@broxus/react-uikit 0.20.1 → 0.21.0

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

@@ -13,35 +13,35 @@ interface ItemSharedProps {
     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;
+    itemIcon?: RenderIconType;
+    key: string;
+    label?: React.ReactNode;
     popupClassName?: string;
     popupOffset?: number[];
+    rootClassName?: string;
     onClick?: NavClickEventHandler;
+    onMouseEnter?: NavHoverEventHandler;
+    onMouseLeave?: NavHoverEventHandler;
     onTitleClick?: (info: NavTitleInfo) => void;
     onTitleMouseEnter?: NavHoverEventHandler;
     onTitleMouseLeave?: NavHoverEventHandler;
 }
 export interface NavItemType extends ItemSharedProps {
-    label?: React.ReactNode;
     disabled?: boolean;
     itemIcon?: RenderIconType;
     key: React.Key;
+    label?: React.ReactNode;
+    onClick?: NavClickEventHandler;
     onMouseEnter?: NavHoverEventHandler;
     onMouseLeave?: NavHoverEventHandler;
-    onClick?: NavClickEventHandler;
 }
 export interface NavItemGroupType extends ItemSharedProps {
-    type: 'group';
-    label?: React.ReactNode;
     children?: ItemType[];
+    label?: React.ReactNode;
+    type: 'group';
 }
 export interface NavDividerType extends ItemSharedProps {
     type: 'divider';

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

@@ -20,7 +20,7 @@ function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoin
     const placements = Object.keys(builtinPlacements);
     for (let i = 0; i < placements.length; i += 1) {
         const placement = placements[i];
-        // @ts-ignore
+        // @ts-ignore bla bla ts
         if (isPointsEq(builtinPlacements[placement].points, points, isAlignPoint)) {
             return `${prefixCls}-${placement}`;
         }

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

@@ -69,7 +69,7 @@ function convertItemsToNodes(list) {
     return (list || [])
         .map((opt, index) => {
         if (opt && typeof opt === 'object') {
-            const { label, children, key, type, ...restProps } = opt;
+            const { children, key, label, type, ...restProps } = opt;
             const mergedKey = key ?? `tmp-${index}`;
             // MenuItemGroup & SubMenuItem
             if (children || type === 'group') {

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

@@ -45,7 +45,7 @@ function Nav(props) {
     const config = (0, ConfigProvider_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`, mode: "horizontal", ...restProps }));
+    return (React.createElement(Nav_1.Nav, { className: (0, classnames_1.default)(`${rootCls}-nav`, className), mode: "horizontal", popupPrefixCls: `${rootCls}-dropdown`, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Nav.displayName = 'Navbar.Nav';

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

@@ -60,8 +60,8 @@ function Overlay(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_1.Component, { className: (0, classnames_1.default)(rootCls, {
+            [`${positionRootCls}-${position}`]: position && positions.includes(position),
             [`${rootCls}-${type}`]: type && ['default', 'primary'].includes(type),
             [`${rootCls}-icon`]: icon,
-            [`${positionRootCls}-${position}`]: position && positions.includes(position),
         }, className), component: defaultElement, ...restProps }));
 }

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

@@ -47,8 +47,8 @@ function Section(props) {
     const { className, kind, 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 && ['xsmall', 'small', 'large', 'xlarge'].includes(size),
-            [`${rootCls}-${kind}`]: kind && ['default', 'muted', 'primary', 'secondary', 'tertiary'].includes(kind),
             [`${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 }));
 }

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

@@ -6,8 +6,8 @@ interface SegmentedLabeledOptionWithoutIcon<ValueType = RcSegmentedValue> extend
     label: RcSegmentedLabeledOption['label'];
 }
 interface SegmentedLabeledOptionWithIcon<ValueType = RcSegmentedValue> extends Omit<RcSegmentedLabeledOption<ValueType>, 'label'> {
-    label?: RcSegmentedLabeledOption['label'];
     icon: React.ReactNode;
+    label?: RcSegmentedLabeledOption['label'];
 }
 export type SegmentedLabeledOption<ValueType = RcSegmentedValue> = SegmentedLabeledOptionWithIcon<ValueType> | SegmentedLabeledOptionWithoutIcon<ValueType>;
 export type SegmentedOptions<T = SegmentedRawOption> = (T | SegmentedLabeledOption<T>)[];

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

@@ -49,7 +49,7 @@ function Segmented(props) {
     const { className, options = [], prefixCls = config.prefixCls, size, vertical, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'segmented'), [config, prefixCls]);
     const mergedOptions = React.useMemo(() => options.map(option => {
-        // @ts-ignore
+        // @ts-ignore bla bla ts
         if (isSegmentedLabeledOptionWithIcon(option)) {
             const { icon, label, ...restOpts } = option;
             return {

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

@@ -46,5 +46,5 @@ function Spinner(props) {
     const { className, prefixCls = config.prefixCls, ratio, ...restProps } = props;
     return (React.createElement("div", { className: (0, classnames_1.default)([`${prefixCls || config.prefixCls}-spinner`, `${prefixCls || config.prefixCls}-icon`], className), role: "status", ...restProps },
         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: 13, style: { strokeWidth: `${(2 / (ratio ?? 1)).toFixed(6)}px` } }))));
+            React.createElement("circle", { cx: 15, cy: 15, fill: "none", r: 13, stroke: "currentColor", style: { strokeWidth: `${(2 / (ratio ?? 1)).toFixed(6)}px` } }))));
 }

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

@@ -49,8 +49,8 @@ exports.Switch = React.forwardRef((props, ref) => {
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'switch'), [config, prefixCls]);
     const mergedLoadingIcon = React.useMemo(() => (React.createElement("div", { className: `${rootCls}-handle` }, loading && (loadingIcon ?? React.createElement(Spinner_1.Spinner, { className: `${rootCls}-loading-icon` })))), [loading, loadingIcon, rootCls]);
     return (React.createElement(switch_1.default, { ref: ref, className: (0, classnames_1.default)({
-            [`${rootCls}-small`]: size === 'small',
             [`${rootCls}-loading`]: loading,
             [`${rootCls}-rtl`]: direction === 'rtl',
-        }, className), prefixCls: rootCls, loadingIcon: mergedLoadingIcon, ...restProps }));
+            [`${rootCls}-small`]: size === 'small',
+        }, className), loadingIcon: mergedLoadingIcon, prefixCls: rootCls, ...restProps }));
 });

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

@@ -53,9 +53,7 @@ function Tabs(props) {
             addIcon: addIcon || React.createElement(Icon_1.Icon, { icon: "add" }),
             removeIcon: React.createElement(Icon_1.Icon, { icon: "close" }),
             showAdd: hideAdd !== true,
-            // eslint-disable-next-line sort-keys
-            onEdit: (editType, { key, event }) => {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            onEdit: (editType, { event, key }) => {
                 onEdit?.(editType === 'add' ? event : key, editType);
             },
         }
@@ -63,8 +61,8 @@ function Tabs(props) {
     return (React.createElement(tabs_1.default, { animated: (0, hooks_1.useAnimateConfig)(rootCls, animated), direction: direction, items: items, ...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,
+            [`${rootCls}-editable-card`]: type === 'editable-card',
         }, className), editable: editable, more: {
             icon: React.createElement(Icon_1.Icon, { icon: "more_horizontal" }),
             transitionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'),

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

@@ -55,12 +55,30 @@ function Text(props) {
         : (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, {
             [`${prefixCls || config.prefixCls}-dropcap`]: dropcap,
-            [`${rootCls}-${color}`]: color && ['muted', 'emphasis', 'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'].includes(color),
+            [`${rootCls}-${color}`]: color && [
+                'muted',
+                'emphasis',
+                'primary',
+                'secondary',
+                'tertiary',
+                'success',
+                'warning',
+                'danger',
+            ].includes(color),
             [`${rootCls}-${kind}`]: kind && ['meta', 'lead', 'base'].includes(kind),
             [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large'].includes(size),
             [`${rootCls}-${transform}`]: transform && ['capitalize', 'uppercase', 'lowercase'].includes(transform),
             [`${rootCls}-${verticalAlign}`]: verticalAlign && ['top', 'middle', 'bottom', 'baseline'].includes(verticalAlign),
-            [`${rootCls}-${weight}`]: weight && ['thin', 'light', 'normal', 'medium', 'semibold', 'bold', 'lighter', 'bolder'].includes(weight),
+            [`${rootCls}-${weight}`]: weight && [
+                'thin',
+                'light',
+                'normal',
+                'medium',
+                'semibold',
+                'bold',
+                'lighter',
+                'bolder',
+            ].includes(weight),
             [`${rootCls}-${wrap}`]: wrap && ['truncate', 'break', 'nowrap'].includes(wrap),
             [`${rootCls}-decoration-none`]: decoration === 'none',
             [`${rootCls}-italic`]: italic,

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

@@ -47,8 +47,8 @@ function Tile(props) {
     const { className, kind, prefixCls = config.prefixCls, preserveColor, size, ...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 && ['xsmall', 'small', 'large', 'xlarge'].includes(size),
-            [`${rootCls}-${kind}`]: kind && ['default', 'muted', 'primary', 'secondary', 'tertiary'].includes(kind),
             [`${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 }));
 }

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

@@ -45,6 +45,6 @@ const utils_1 = require("../../components/Width/utils");
 const defaultElement = 'div';
 function Width(props) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { className, prefixCls = config.prefixCls, size, s, m, l, xl, ...restProps } = props;
+    const { className, l, m, prefixCls = config.prefixCls, s, size, 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,3 +1,3 @@
-export * from '../../components/Width/Width';
 export * from '../../components/Width/types';
 export * from '../../components/Width/utils';
+export * from '../../components/Width/Width';

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

@@ -14,6 +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("../../components/Width/Width"), exports);
 __exportStar(require("../../components/Width/types"), exports);
 __exportStar(require("../../components/Width/utils"), exports);
+__exportStar(require("../../components/Width/Width"), exports);

package/dist/cjs/index.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable perfectionist/sort-exports */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

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

@@ -5,7 +5,7 @@ import { Close } from '../../components/Close';
 import { useConfig } from '../../components/ConfigProvider';
 export const Alert = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { children, className, closable = true, closeIcon = config.alert?.closeIcon, prefixCls = config.prefixCls, style, severity, onClose, onClosed, ...restProps } = props;
+    const { children, className, closable = true, closeIcon = config.alert?.closeIcon, prefixCls = config.prefixCls, severity, style, onClose, onClosed, ...restProps } = props;
     const [closed, setClosed] = React.useState(false);
     const close = React.useCallback(() => {
         onClose?.();
@@ -15,9 +15,9 @@ export const Alert = React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         close,
     }), [close]);
-    return (React.createElement(CSSMotion, { motionName: `${rootCls}-motion`, motionAppear: false, motionEnter: false, visible: !closed, onLeaveStart: node => ({
+    return (React.createElement(CSSMotion, { motionAppear: false, motionEnter: false, motionName: `${rootCls}-motion`, visible: !closed, onLeaveEnd: onClosed, onLeaveStart: node => ({
             maxHeight: node.offsetHeight,
-        }), onLeaveEnd: onClosed }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: classNames(rootCls, {
+        }) }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: classNames(rootCls, {
             [`${rootCls}-${severity}`]: severity !== undefined,
         }, className, motionClassName), "data-show": !closed, role: "alert", style: { ...style, ...motionStyle }, ...restProps },
         closable && (React.isValidElement(closeIcon) ? (React.cloneElement(closeIcon, {

package/dist/esm/components/Align/Align.js

@@ -6,7 +6,7 @@ import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export function Align(props) {
     const config = useConfig();
-    const { align = 'left', className, direction = config.direction, prefixCls = config.prefixCls, s, m, l, xl, ...restProps } = props;
+    const { align = 'left', className, direction = config.direction, l, m, prefixCls = config.prefixCls, s, xl, ...restProps } = props;
     const isRtl = React.useMemo(() => direction === 'rtl', [direction]);
     const mergedAlign = React.useMemo(() => {
         if (isRtl && align === 'left') {

package/dist/esm/components/Button/Button.js

@@ -17,10 +17,10 @@ export const Button = React.forwardRef((props, ref) => {
     }, [restProps]);
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'button'), [config, prefixCls]);
     const className = React.useMemo(() => classNames(rootCls, {
+        [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
+        [`${rootCls}-${size}`]: size !== undefined,
         [`${rootCls}-${type}`]: type !== undefined,
         [`${rootCls}-ghost`]: ghost === true,
-        [`${rootCls}-${size}`]: size !== undefined,
-        [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
     }, restProps.className), [rootCls, type, ghost, size, shape, restProps.className]);
     if (restProps.href !== undefined) {
         return (React.createElement(Component, { ref: ref || buttonRef, component: Link, href: restProps.href, ...restProps, className: className, onClick: onClick }));

package/dist/esm/components/Card/Badge.js

@@ -7,9 +7,9 @@ const defaultElement = 'span';
 export function Badge(props) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const { className, component = defaultElement, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'badge'), [config, prefixCls]);
-    return React.createElement(BaseBadge, { className: classNames(rootCls, className), ...restProps });
+    return (React.createElement(BaseBadge, { className: classNames(rootCls, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Badge.displayName = 'Card.Badge';

package/dist/esm/components/Card/Card.js

@@ -8,7 +8,7 @@ const defaultElement = 'div';
 export function Card(props) {
     const config = useConfig();
     const { asBody, className, kind, colorMode = kind && kind !== 'default'
-        // @ts-ignore
+        // @ts-expect-error TS7053: Element implicitly has an any type because ...
         ? (config.card?.[`${kind}ColorMode`] || config[`card${capitalizeFirstLetter(kind)}ColorMode`])
         : undefined, hoverable, prefixCls = config.card?.prefixCls || config.prefixCls, size, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'card'), [config, prefixCls]);
@@ -19,11 +19,11 @@ export function Card(props) {
     }), [rootCls]);
     return (React.createElement(CardContext.Provider, { value: context },
         React.createElement(Component, { className: classNames(rootCls, {
+                [`${config.prefixCls}-${colorMode}`]: colorMode && ['dark', 'light'].includes(colorMode),
                 [`${rootCls}-${kind}`]: kind && ['default', 'primary', 'secondary', 'tertiary'].includes(kind),
                 [`${rootCls}-${size}`]: size && ['small', 'large'].includes(size),
                 [`${rootCls}-body`]: asBody,
                 [`${rootCls}-hover`]: hoverable,
-                [`${config.prefixCls}-${colorMode}`]: colorMode && ['dark', 'light'].includes(colorMode),
             }, className), component: defaultElement, ...restProps })));
 }
 if (process.env.NODE_ENV !== 'production') {

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

@@ -6,7 +6,7 @@ import { Footer } from '../../components/Card/Footer';
 import { Header } from '../../components/Card/Header';
 import { Media } from '../../components/Card/Media';
 import { Title } from '../../components/Card/Title';
-export type { CardProps };
+export { type CardProps };
 export interface Card extends React.FunctionComponent<CardProps> {
     Badge: typeof Badge;
     Body: typeof Body;

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

@@ -2,12 +2,12 @@ import * as React from 'react';
 type ComponentOwnProp<T extends React.ElementType = React.ElementType> = React.ComponentPropsWithoutRef<T> & {
     component?: T | keyof React.JSX.IntrinsicElements;
 };
-type PropsToOmit<E extends React.ElementType = React.ElementType, Props extends object = {}> = Omit<React.ComponentPropsWithoutRef<E>, keyof Props>;
-export type PolymorphicProps<E extends React.ElementType = React.ElementType, Props extends object = {}> = ComponentOwnProp<E> & PropsToOmit<E, Props>;
-export interface PolymorphicComponent<Component extends React.ElementType = React.ElementType, Props extends object = {}> {
+type PropsToOmit<E extends React.ElementType = React.ElementType, Props extends object = object> = Omit<React.ComponentPropsWithoutRef<E>, keyof Props>;
+export type PolymorphicProps<E extends React.ElementType = React.ElementType, Props extends object = object> = ComponentOwnProp<E> & PropsToOmit<E, Props>;
+export interface PolymorphicComponent<Component extends React.ElementType = React.ElementType, Props extends object = object> {
     <E extends React.ElementType = Component>(props: PolymorphicProps<E, Props>): React.JSX.Element;
-    displayName?: string;
     defaultProps?: Partial<any>;
+    displayName?: string;
     id?: string;
 }
 export declare const Component: React.ForwardRefExoticComponent<Omit<ComponentOwnProp<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;

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

@@ -9,41 +9,53 @@ interface PropsWithMouseHandler {
 }
 export { SizeContext } from '../../components/ConfigProvider/SizeContext';
 export interface ConfigContextConsumedProps {
-    breakpoints: Exclude<BreakpointsConfig<number>, 'default'>;
     alert?: {
         closeIcon?: React.ReactNode | (() => React.ReactElement);
     };
+    breakpoints: Exclude<BreakpointsConfig<number>, 'default'>;
     button?: {
         ghost?: boolean;
         prefixCls?: string;
         shape?: ButtonProps['shape'];
         size?: ButtonProps['size'];
     };
+    /** @deprecated Use `button['shape']` config instead */
+    buttonShape?: ButtonProps['shape'];
+    /** @deprecated Use `button['size']` config instead */
+    buttonSize?: ButtonProps['size'];
     card?: {
         prefixCls?: string;
         primaryColorMode?: ColorMode;
         secondaryColorMode?: ColorMode;
         tertiaryColorMode?: ColorMode;
     };
+    /** @deprecated Use `card['primaryColorMode']` config instead */
+    cardPrimaryColorMode?: ColorMode;
+    /** @deprecated Use `card['secondaryColorMode']` config instead */
+    cardSecondaryColorMode?: ColorMode;
+    /** @deprecated Use `card['tertiaryColorMode']` config instead */
+    cardTertiaryColorMode?: ColorMode;
     checkbox?: {
         direction?: Direction;
         prefixCls?: string;
     };
     control?: {
+        clearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
         direction?: Direction;
         prefixCls?: string;
-        clearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     };
+    /** @deprecated Use `control['clearIcon']` config instead */
+    controlClearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     datePicker?: {
+        clearIcon?: React.ReactNode | (() => React.ReactElement);
         direction?: Direction;
         locale?: PickerLocale;
-        prefixCls?: string;
-        clearIcon?: React.ReactNode | (() => React.ReactElement);
         nextIcon?: React.ReactNode;
+        prefixCls?: string;
         prevIcon?: React.ReactNode;
         suffixIcon?: React.ReactNode;
-        superPrevIcon?: React.ReactNode;
         superNextIcon?: React.ReactNode;
+        superPrevIcon?: React.ReactNode;
     };
     direction?: Direction;
     getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
@@ -63,49 +75,24 @@ export interface ConfigContextConsumedProps {
         secondaryColorMode?: ColorMode;
         tertiaryColorMode?: ColorMode;
     };
+    /** @deprecated Use `section['primaryColorMode']` config instead */
+    sectionPrimaryColorMode?: ColorMode;
+    /** @deprecated Use `section['secondaryColorMode']` config instead */
+    sectionSecondaryColorMode?: ColorMode;
+    /** @deprecated Use `section['tertiaryColorMode']` config instead */
+    sectionTertiaryColorMode?: ColorMode;
     select?: {
-        direction?: Direction;
-        prefixCls?: string;
         addIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
         arrowIcon?: React.ReactNode | ((props: {
             isOpen: boolean;
         } & PropsWithMouseHandler) => React.ReactElement);
         clearIcon?: React.ReactNode | (() => React.ReactElement);
+        direction?: Direction;
         loadingIcon?: React.ReactNode | (() => React.ReactElement);
         notFoundContent?: React.ReactNode | (() => React.ReactElement);
-        searchIcon?: React.ReactNode | (() => React.ReactElement);
-    };
-    timePicker?: {
-        direction?: Direction;
-        locale?: TimePickerLocale;
-        prefixCls?: string;
-        clearIcon?: React.ReactNode | (() => React.ReactElement);
-        suffixIcon?: React.ReactNode;
-    };
-    tile?: {
         prefixCls?: string;
-        primaryColorMode?: ColorMode;
-        secondaryColorMode?: ColorMode;
-        tertiaryColorMode?: ColorMode;
+        searchIcon?: React.ReactNode | (() => React.ReactElement);
     };
-    /** @deprecated Use `button['shape']` config instead */
-    buttonShape?: ButtonProps['shape'];
-    /** @deprecated Use `button['size']` config instead */
-    buttonSize?: ButtonProps['size'];
-    /** @deprecated Use `card['primaryColorMode']` config instead */
-    cardPrimaryColorMode?: ColorMode;
-    /** @deprecated Use `card['secondaryColorMode']` config instead */
-    cardSecondaryColorMode?: ColorMode;
-    /** @deprecated Use `card['tertiaryColorMode']` config instead */
-    cardTertiaryColorMode?: ColorMode;
-    /** @deprecated Use `control['clearIcon']` config instead */
-    controlClearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
-    /** @deprecated Use `section['primaryColorMode']` config instead */
-    sectionPrimaryColorMode?: ColorMode;
-    /** @deprecated Use `section['secondaryColorMode']` config instead */
-    sectionSecondaryColorMode?: ColorMode;
-    /** @deprecated Use `section['tertiaryColorMode']` config instead */
-    sectionTertiaryColorMode?: ColorMode;
     /** @deprecated Use `select['addIcon']` config instead */
     selectAddIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     /** @deprecated Use `select['arrowIcon']` config instead */
@@ -120,12 +107,25 @@ export interface ConfigContextConsumedProps {
     selectNotFoundContent?: React.ReactNode | (() => React.ReactElement);
     /** @deprecated Use `select['searchIcon']` config instead */
     selectSearchIcon?: React.ReactNode | (() => React.ReactElement);
+    tile?: {
+        prefixCls?: string;
+        primaryColorMode?: ColorMode;
+        secondaryColorMode?: ColorMode;
+        tertiaryColorMode?: ColorMode;
+    };
     /** @deprecated Use `tile['primaryColorMode']` config instead */
     tilePrimaryColorMode?: ColorMode;
     /** @deprecated Use `tile['secondaryColorMode']` config instead */
     tileSecondaryColorMode?: ColorMode;
     /** @deprecated Use `tile['tertiaryColorMode']` config instead */
     tileTertiaryColorMode?: ColorMode;
+    timePicker?: {
+        clearIcon?: React.ReactNode | (() => React.ReactElement);
+        direction?: Direction;
+        locale?: TimePickerLocale;
+        prefixCls?: string;
+        suffixIcon?: React.ReactNode;
+    };
 }
 export declare const ConfigContext: React.Context<ConfigContextConsumedProps>;
 export declare function useConfig(): ConfigContextConsumedProps;

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

@@ -8,10 +8,10 @@ export const Container = React.memo((props) => {
     const { className, expandLeft, expandRight, prefixCls = config.prefixCls, preserve, size, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'container'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
+            [`${prefixCls || config.prefixCls}-preserve`]: preserve,
             [`${rootCls}-${size}`]: size !== undefined,
             [`${rootCls}-expand-left`]: expandLeft,
             [`${rootCls}-expand-right`]: expandRight,
-            [`${prefixCls || config.prefixCls}-preserve`]: preserve,
         }, className), component: defaultElement, ...restProps }));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/esm/components/Control/Checkbox/Checkbox.d.ts

@@ -6,6 +6,7 @@ export interface AbstractCheckboxProps<T> extends Omit<React.InputHTMLAttributes
     children?: React.ReactNode;
     defaultChecked?: boolean;
     direction?: string;
+    id?: string;
     name?: string;
     prefixCls?: string;
     required?: boolean;
@@ -16,7 +17,6 @@ export interface AbstractCheckboxProps<T> extends Omit<React.InputHTMLAttributes
     title?: string;
     type?: string;
     value?: any;
-    id?: string;
     onChange?: (event: T) => void;
 }
 export interface CheckboxChangeEventTarget extends CheckboxProps {

package/dist/esm/components/Control/Checkbox/Checkbox.js

@@ -31,7 +31,6 @@ export const Checkbox = React.forwardRef((props, ref) => {
         disabled,
         id,
         type,
-        // eslint-disable-next-line sort-keys
         onChange,
     }), [restProps, internalChecked, disabled, id, type, onChange]);
     if (checkboxGroup && !skipGroup) {
@@ -49,13 +48,13 @@ export const Checkbox = React.forwardRef((props, ref) => {
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.checkbox?.prefixCls || config.prefixCls, 'checkbox'), [config, prefixCls]);
     const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.checkbox?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => classNames({
-        [controlCls]: block,
-        [`${controlCls}-checkbox`]: block,
         [`${controlCls}-${size}`]: block && size,
-        [`${rootCls}-wrapper`]: true,
-        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${controlCls}-checkbox`]: block,
         [`${prefixCls || config.checkbox?.prefixCls || config.prefixCls}-checked`]: checkboxProps.checked,
         [`${prefixCls || config.checkbox?.prefixCls || config.prefixCls}-disabled`]: checkboxProps.disabled,
+        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${rootCls}-wrapper`]: true,
+        [controlCls]: block,
     }, className), [
         controlCls,
         block,
@@ -93,7 +92,7 @@ export const Checkbox = React.forwardRef((props, ref) => {
     }, [restProps.value, skipGroup]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: id, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
         React.createElement("span", { className: classNames(checkboxClasses) },
-            React.createElement("input", { className: `${rootCls}-input`, ref: ref, ...checkboxProps, id: id, type: "checkbox", ...globalAttributes }),
+            React.createElement("input", { ref: ref, className: `${rootCls}-input`, ...checkboxProps, id: id, type: "checkbox", ...globalAttributes }),
             React.createElement("span", { className: `${rootCls}-inner` })),
         children !== undefined && React.createElement("span", { className: `${rootCls}-label` }, children)));
 });

package/dist/esm/components/Control/Checkbox/Group.d.ts

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { type CheckboxChangeEvent } from '../../../components/Control/Checkbox/Checkbox';
 import { type SizeType } from '../../../types';
 export interface CheckboxOptionType<T = any> {
+    disabled?: boolean;
+    id?: string;
     label: React.ReactNode;
-    value: T;
+    required?: boolean;
     style?: React.CSSProperties;
-    disabled?: boolean;
     title?: string;
-    id?: string;
+    value: T;
     onChange?: (event: CheckboxChangeEvent) => void;
-    required?: boolean;
 }
 export interface AbstractCheckboxGroupProps<T = any> {
     block?: boolean;

package/dist/esm/components/Control/Checkbox/Group.js

@@ -61,7 +61,7 @@ export const Group = React.forwardRef((props, ref) => {
     }, [restProps, restProps.value]);
     return (React.createElement("div", { className: checkboxGroupClasses, style: style, ...restProps, ref: ref },
         React.createElement(CheckboxGroupContext.Provider, { value: context }, options?.length > 0
-            ? memoOptions.map(option => (React.createElement(Checkbox, { key: option.value.toString(), block: block, checked: value.indexOf(option.value) > -1, direction: direction, disabled: 'disabled' in option ? option.disabled : restProps.disabled, size: size, value: option.value, className: `${rootCls}-item`, style: option.style, onChange: option.onChange }, option.label)))
+            ? memoOptions.map(option => (React.createElement(Checkbox, { key: option.value.toString(), block: block, checked: value.indexOf(option.value) > -1, className: `${rootCls}-item`, direction: direction, disabled: 'disabled' in option ? option.disabled : restProps.disabled, size: size, style: option.style, value: option.value, onChange: option.onChange }, option.label)))
             : children)));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/esm/components/Control/Input/Input.js

@@ -39,7 +39,7 @@ export const Input = React.forwardRef((props, ref) => {
         if (React.isValidElement(config.controlClearIcon)) {
             return config.controlClearIcon;
         }
-        return (React.createElement(Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clear`, onClick: onClear }));
+        return (React.createElement(Icon, { key: "clearfix-icon", className: `${controlCls}-clear`, icon: "close", onClick: onClear }));
     }, [config, controlCls, onClear]);
     React.useImperativeHandle(ref, () => ({
         blur() {

package/dist/esm/components/Control/Input/Number/index.js

@@ -21,8 +21,8 @@ export const InputNumber = React.forwardRef((props, ref) => {
     }));
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'number'), [config, prefixCls]);
     const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
-    const upIcon = React.useMemo(() => React.createElement(Icon, { icon: "keyboard_arrow_up", className: `${rootCls}-handler-up-inner` }), [rootCls]);
-    const downIcon = React.useMemo(() => React.createElement(Icon, { icon: "keyboard_arrow_down", className: `${rootCls}-handler-down-inner` }), [rootCls]);
+    const upIcon = React.useMemo(() => React.createElement(Icon, { className: `${rootCls}-handler-up-inner`, icon: "keyboard_arrow_up" }), [rootCls]);
+    const downIcon = React.useMemo(() => React.createElement(Icon, { className: `${rootCls}-handler-down-inner`, icon: "keyboard_arrow_down" }), [rootCls]);
     const inputProps = omit({ ...restProps, className: `${rootCls}-wrapper` }, [
         'allowClear',
         'prefix',
@@ -32,7 +32,7 @@ export const InputNumber = React.forwardRef((props, ref) => {
     ]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: restProps.id },
         React.createElement("div", { className: `${controlCls}-input` },
-            React.createElement(RcInputNumber, { ...inputProps, downHandler: downIcon, prefixCls: rootCls, ref: inputRef, upHandler: upIcon }))));
+            React.createElement(RcInputNumber, { ...inputProps, ref: inputRef, downHandler: downIcon, prefixCls: rootCls, upHandler: upIcon }))));
 });
 if (process.env.NODE_ENV !== 'production') {
     InputNumber.displayName = 'Input.Number';