@broxus/react-uikit 0.15.6 → 0.16.0

package/dist/cjs/types.d.ts

@@ -1,4 +1,5 @@
-export type BreakpointsConfig<T> = {
+import type * as React from 'react';
+export interface BreakpointsConfig<T> {
     /** Default value. Will be used for all sizes by default */
     default?: T;
     /** Extra small size: Phone portrait: 480px by default */
@@ -15,10 +16,10 @@ export type BreakpointsConfig<T> = {
     '2xl'?: T;
     /** Ultra wide size: Ultra Wide screens: 3440px by default */
     '3xl'?: T;
-};
+}
 export type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type Direction = 'ltr' | 'rtl';
-export type TooltipOptions = {
+export interface TooltipOptions {
     animation?: string;
     cls?: string;
     delay?: number;
@@ -26,7 +27,15 @@ export type TooltipOptions = {
     offset?: boolean | number;
     pos?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
     title?: string;
-};
-export type TooltipProps = {
+}
+export interface TooltipProps {
     tooltip?: string | TooltipOptions;
-};
+}
+export type AnyObject = Record<PropertyKey, any>;
+export type LiteralUnion<T extends U, U> = T | (U & {});
+export type SizeType = 'small' | 'medium' | 'large';
+export type StateType = 'success' | 'warning' | 'danger' | 'blank';
+export interface ComponentStyleProps {
+    className?: string;
+    style?: React.CSSProperties;
+}

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

@@ -6,7 +6,7 @@ import { Link } from '../../components/Link';
 const defaultElement = 'button';
 export const Button = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { component = defaultElement, children, ghost, htmlType = 'button', prefixCls = config.prefixCls, shape = config.buttonShape, size = config.buttonSize, type, ...restProps } = props;
+    const { component = defaultElement, children, ghost, htmlType = 'button', prefixCls = config.button?.prefixCls || config.prefixCls, shape = config.button?.shape || config.buttonShape, size = config.button?.size || config.buttonSize, type, ...restProps } = props;
     const buttonRef = React.useRef(null);
     const onClick = React.useCallback(event => {
         if (restProps.disabled) {
@@ -15,7 +15,7 @@ export const Button = React.forwardRef((props, ref) => {
         }
         restProps.onClick?.(event);
     }, [restProps]);
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'button'), [config, prefixCls]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.button?.prefixCls || config.prefixCls, 'button'), [config, prefixCls]);
     const className = React.useMemo(() => classNames(rootCls, {
         [`${rootCls}-${type}`]: type !== undefined,
         [`${rootCls}-ghost`]: ghost === true,

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

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 export function Group(props) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'button-group'), [config, prefixCls]);
+    const { className, prefixCls = config.button?.prefixCls || config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.button?.prefixCls || config.prefixCls, 'button-group'), [config, prefixCls]);
     return React.createElement("div", { className: classNames(rootCls, className), ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {

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

@@ -7,8 +7,8 @@ const defaultElement = 'span';
 export function Badge(props) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, prefixCls = getRootCls(), ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'badge'), [config, prefixCls]);
+    const { className, 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 });
 }
 if (process.env.NODE_ENV !== 'production') {

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

@@ -7,8 +7,8 @@ const defaultElement = 'div';
 export function Body(props) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, prefixCls = getRootCls(), ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'body'), [config, prefixCls]);
+    const { className, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'body'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {

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

@@ -9,9 +9,9 @@ export function Card(props) {
     const config = useConfig();
     const { asBody, className, kind, colorMode = kind && kind !== 'default'
         // @ts-ignore
-        ? config[`card${capitalizeFirstLetter(kind)}ColorMode`]
-        : undefined, hoverable, prefixCls = config.prefixCls, size, ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'card'), [config, prefixCls]);
+        ? (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]);
     const context = React.useMemo(() => ({
         getRootCls() {
             return rootCls;

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

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

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

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

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

@@ -7,8 +7,8 @@ const defaultElement = 'div';
 export function Media(props) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, position, prefixCls = getRootCls(), ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'media'), [config, prefixCls]);
+    const { className, position, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'media'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames({
             [`${rootCls}-${position}`]: position !== undefined,
         }, className), component: defaultElement, ...restProps }));

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

@@ -7,8 +7,8 @@ const defaultElement = 'h3';
 export function Title(props) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, prefixCls = getRootCls(), ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'title'), [config, prefixCls]);
+    const { className, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'title'), [config, prefixCls]);
     return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
 export interface CardContextConsumerProps {
-    getRootCls(): string | undefined;
+    getRootCls(prefixCls?: string): string | undefined;
 }
 export declare const CardContext: React.Context<CardContextConsumerProps>;

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

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 export const CardContext = React.createContext({
-    getRootCls() {
-        return 'uk-card';
+    getRootCls(prefixCls = 'uk') {
+        return `${prefixCls}-card`;
     },
 });

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { type SizeType } from '../../types';
+export declare const SizeContext: React.Context<SizeType | undefined>;

package/dist/esm/components/ConfigProvider/SizeContext.js

@@ -0,0 +1,3 @@
+'use client';
+import * as React from 'react';
+export const SizeContext = React.createContext(undefined);

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

@@ -1,19 +1,45 @@
 import * as React from 'react';
 import { type ButtonProps } from '../../components/Button';
 import { type ColorMode } from '../../components/Inverse';
-import { type BreakpointsConfig, type TooltipOptions } from '../../types';
+import { type BreakpointsConfig, type Direction, type TooltipOptions } from '../../types';
 type PropsWithMouseHandler = {
     onClick: React.HTMLAttributes<HTMLElement>['onClick'];
 };
+export { SizeContext } from '../../components/ConfigProvider/SizeContext';
 export type ConfigContextConsumedProps = {
     breakpoints: Exclude<BreakpointsConfig<number>, 'default'>;
-    buttonShape?: ButtonProps['shape'];
-    buttonSize?: ButtonProps['size'];
-    cardPrimaryColorMode?: ColorMode;
-    cardSecondaryColorMode?: ColorMode;
-    cardTertiaryColorMode?: ColorMode;
-    controlClearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
-    direction?: string;
+    button?: {
+        ghost?: boolean;
+        prefixCls?: string;
+        shape?: ButtonProps['shape'];
+        size?: ButtonProps['size'];
+    };
+    card?: {
+        prefixCls?: string;
+        primaryColorMode?: ColorMode;
+        secondaryColorMode?: ColorMode;
+        tertiaryColorMode?: ColorMode;
+    };
+    checkbox?: {
+        direction?: Direction | string;
+        prefixCls?: string;
+    };
+    control?: {
+        direction?: Direction | string;
+        prefixCls?: string;
+        clearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
+    };
+    datePicker?: {
+        direction?: Direction | string;
+        prefixCls?: string;
+        clearIcon?: React.ReactNode | (() => React.ReactElement);
+        nextIcon?: React.ReactNode;
+        prevIcon?: React.ReactNode;
+        suffixIcon?: React.ReactNode;
+        superPrevIcon?: React.ReactNode;
+        superNextIcon?: React.ReactNode;
+    };
+    direction?: Direction | string;
     getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
     getRootPrefixCls: (prefix?: string, component?: string) => string;
     getTooltipConfig: (props: string | TooltipOptions | undefined) => {
@@ -21,23 +47,80 @@ export type ConfigContextConsumedProps = {
     };
     inverseGlobalColorMode?: ColorMode;
     prefixCls: string;
+    radio?: {
+        direction?: Direction | string;
+        prefixCls?: string;
+    };
+    section?: {
+        prefixCls?: string;
+        primaryColorMode?: ColorMode;
+        secondaryColorMode?: ColorMode;
+        tertiaryColorMode?: ColorMode;
+    };
+    select?: {
+        direction?: Direction | string;
+        prefixCls?: string;
+        addIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
+        arrowIcon?: React.ReactNode | ((props: {
+            isOpen: boolean;
+        } & PropsWithMouseHandler) => React.ReactElement);
+        clearIcon?: React.ReactNode | (() => React.ReactElement);
+        loadingIcon?: React.ReactNode | (() => React.ReactElement);
+        notFoundContent?: React.ReactNode | (() => React.ReactElement);
+        searchIcon?: React.ReactNode | (() => React.ReactElement);
+    };
+    timePicker?: {
+        direction?: Direction | string;
+        prefixCls?: string;
+        clearIcon?: React.ReactNode | (() => React.ReactElement);
+        suffixIcon?: React.ReactNode;
+    };
+    tile?: {
+        prefixCls?: string;
+        primaryColorMode?: ColorMode;
+        secondaryColorMode?: ColorMode;
+        tertiaryColorMode?: ColorMode;
+    };
+    /** @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 */
     selectArrowIcon?: React.ReactNode | ((props: {
         isOpen: boolean;
     } & PropsWithMouseHandler) => React.ReactElement);
+    /** @deprecated Use `select['clearIcon']` config instead */
     selectClearIcon?: React.ReactNode | (() => React.ReactElement);
+    /** @deprecated Use `select['loadingIcon']` config instead */
     selectLoadingIcon?: React.ReactNode | (() => React.ReactElement);
+    /** @deprecated Use `select['notFoundContent']` config instead */
     selectNotFoundContent?: React.ReactNode | (() => React.ReactElement);
+    /** @deprecated Use `select['searchIcon']` config instead */
     selectSearchIcon?: React.ReactNode | (() => React.ReactElement);
+    /** @deprecated Use `tile['primaryColorMode']` config instead */
     tilePrimaryColorMode?: ColorMode;
+    /** @deprecated Use `tile['secondaryColorMode']` config instead */
     tileSecondaryColorMode?: ColorMode;
+    /** @deprecated Use `tile['tertiaryColorMode']` config instead */
     tileTertiaryColorMode?: ColorMode;
 };
 export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextConsumedProps>;
 export declare const ConfigContext: React.Context<ConfigContextConsumedProps>;
 export declare function useConfig(): ConfigContextConsumedProps;
 export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): React.JSX.Element;
-export {};

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

@@ -1,6 +1,7 @@
 'use client';
 import { error } from '@broxus/js-utils';
 import * as React from 'react';
+export { SizeContext } from '../../components/ConfigProvider/SizeContext';
 export const ConfigContext = React.createContext({
     breakpoints: {
         '2xl': 2560,
@@ -11,9 +12,6 @@ export const ConfigContext = React.createContext({
         xl: 1600,
         xs: 480,
     },
-    // cardPrimaryColorMode: 'light',
-    // cardSecondaryColorMode: 'light',
-    // cardTertiaryColorMode: 'light',
     getRootPrefixCls(prefix, module) {
         return `${prefix ? `${prefix}-` : `${this.prefixCls}-`}${module ?? ''}`;
     },
@@ -36,14 +34,7 @@ export const ConfigContext = React.createContext({
             ].filter(Boolean).join(';'),
         };
     },
-    // inverseGlobalColorMode: 'light',
     prefixCls: 'uk',
-    // sectionPrimaryColorMode: 'light',
-    // sectionSecondaryColorMode: 'light',
-    // sectionTertiaryColorMode: 'light',
-    // tilePrimaryColorMode: 'light',
-    // tileSecondaryColorMode: 'light',
-    // tileTertiaryColorMode: 'light',
 });
 export function useConfig() {
     return React.useContext(ConfigContext);

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SizeType } from '../../../components/Control';
+import { type SizeType } from '../../../types';
 export interface AbstractCheckboxProps<T> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'onMouseEnter' | 'onMouseLeave'> {
     autoFocus?: boolean;
     block?: boolean;

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

@@ -6,7 +6,7 @@ import { useCheckboxGroup } from '../../../components/Control/Checkbox/CheckboxG
 export const Checkbox = React.forwardRef((props, ref) => {
     const config = useConfig();
     const checkboxGroup = useCheckboxGroup();
-    const { block, children, className, direction = config.direction, disabled, id, prefixCls = config.prefixCls, size, skipGroup, style, type = 'checkbox', onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const { block, children, className, direction = config.checkbox?.direction || config.direction, disabled, id, prefixCls = config.checkbox?.prefixCls || config.prefixCls, size, skipGroup, style, type = 'checkbox', onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...restProps } = props;
     const prevValue = React.useRef(restProps.value);
     const [internalChecked, setInternalChecked] = React.useState(restProps.checked || restProps.defaultChecked);
     const onChange = React.useCallback((event) => {
@@ -39,16 +39,16 @@ export const Checkbox = React.forwardRef((props, ref) => {
         checkboxProps.disabled = disabled || checkboxGroup.disabled;
         checkboxProps.name = checkboxGroup.name;
     }
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'checkbox'), [config, prefixCls]);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    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',
-        [`${prefixCls || config.prefixCls}-checked`]: checkboxProps.checked,
-        [`${prefixCls || config.prefixCls}-disabled`]: checkboxProps.disabled,
+        [`${prefixCls || config.checkbox?.prefixCls || config.prefixCls}-checked`]: checkboxProps.checked,
+        [`${prefixCls || config.checkbox?.prefixCls || config.prefixCls}-disabled`]: checkboxProps.disabled,
     }, className), [
         controlCls,
         block,
@@ -56,6 +56,7 @@ export const Checkbox = React.forwardRef((props, ref) => {
         rootCls,
         direction,
         prefixCls,
+        config.checkbox?.prefixCls,
         config.prefixCls,
         checkboxProps.checked,
         checkboxProps.disabled,

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type SizeType } from '../../../components/Control';
 import { type CheckboxChangeEvent } from '../../../components/Control/Checkbox/Checkbox';
+import { type SizeType } from '../../../types';
 export interface CheckboxOptionType<T = any> {
     label: React.ReactNode;
     value: T;

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

@@ -5,7 +5,7 @@ import { Checkbox } from '../../../components/Control/Checkbox/Checkbox';
 import { CheckboxGroupContext } from '../../../components/Control/Checkbox/CheckboxGroupContext';
 export const Group = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { block, children, className, defaultValue, direction = config.direction, options = [], prefixCls = config.prefixCls, size, stack, style, onChange, ...restProps } = props;
+    const { block, children, className, defaultValue, direction = config.checkbox?.direction || config.direction, options = [], prefixCls = config.checkbox?.prefixCls || config.prefixCls, size, stack, style, onChange, ...restProps } = props;
     const [value, setValue] = React.useState(restProps.value || defaultValue || []);
     const [registeredValues, setRegisteredValues] = React.useState([]);
     const memoOptions = React.useMemo(() => options.map((option) => {
@@ -40,7 +40,7 @@ export const Group = React.forwardRef((props, ref) => {
             return indexA - indexB;
         }));
     };
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'checkbox-group'), [config, prefixCls]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.checkbox?.prefixCls || config.prefixCls, 'checkbox-group'), [config, prefixCls]);
     const checkboxGroupClasses = React.useMemo(() => classNames(rootCls, {
         [`${rootCls}-rtl`]: direction === 'rtl',
         [`${rootCls}-stack`]: stack,

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

@@ -7,19 +7,29 @@ import { Icon } from '../../../components/Icon';
 import '../index.scss';
 export const Input = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { allowClear, htmlSize, inputRef, prefix, prefixCls = config.prefixCls, suffix, wrapperClasses, onClear, ...restProps } = useInput({
+    const { allowClear, htmlSize, inputRef, prefix, prefixCls, suffix, wrapperClasses, onClear, ...restProps } = useInput({
         type: 'text',
         ...props,
     });
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'input'), [config, prefixCls]);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'input'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
     const inputProps = omit({
         ...restProps,
         className: classNames(rootCls, {
-            [`${prefixCls || config.prefixCls}-empty`]: !restProps.value,
+            [`${prefixCls}-empty`]: !restProps.value,
         }),
     }, ['dir', 'size']);
     const clearIcon = React.useMemo(() => {
+        if (typeof config.control?.clearIcon === 'function') {
+            return config.control.clearIcon({
+                onClick: (event) => {
+                    onClear?.(event);
+                },
+            });
+        }
+        if (React.isValidElement(config.control?.clearIcon)) {
+            return config.control.clearIcon;
+        }
         if (typeof config.controlClearIcon === 'function') {
             return config.controlClearIcon({
                 onClick: (event) => {

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

@@ -9,7 +9,7 @@ import '../../index.scss';
 /* eslint-disable jsx-a11y/label-has-associated-control */
 export const InputNumber = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { inputRef, prefixCls = config.prefixCls, wrapperClasses, ...restProps } = useInput({ ...props, type: 'number' });
+    const { inputRef, prefixCls, wrapperClasses, ...restProps } = useInput({ ...props, type: 'number' });
     React.useImperativeHandle(ref, () => ({
         blur() {
             inputRef.current?.blur();
@@ -21,8 +21,8 @@ export const InputNumber = React.forwardRef((props, ref) => {
             return inputRef;
         },
     }));
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'number'), [config, prefixCls]);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    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 inputProps = omit({ ...restProps, className: `${rootCls}-wrapper` }, [

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

@@ -7,11 +7,11 @@ import './index.scss';
 import '../../index.scss';
 export const Password = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
+    const { prefixCls = config.control?.prefixCls || config.prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
     const inputRef = React.useRef(null);
     const removePasswordTimeout = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.control?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
     const removePasswordValueAttribute = React.useCallback(() => {
         removePasswordTimeout.current = setTimeout(() => {
             const input = inputRef?.current?.getInputRef()?.current;

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

@@ -10,7 +10,7 @@ export function fixControlledValue(value) {
 export function useInput(props) {
     const config = useConfig();
     const inputRef = React.useRef(null);
-    const { className, direction, prefixCls = config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
+    const { className, direction = config.control?.direction || config.direction, prefixCls = config.control?.prefixCls || config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
     const [focused, setFocused] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(useInternalValueState ? restProps.value || restProps.defaultValue : undefined);
     const onChange = React.useCallback((event) => {
@@ -55,15 +55,15 @@ export function useInput(props) {
         onFocus,
         onKeyDown,
     }), [restProps, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.control?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => classNames(controlCls, {
         [`${controlCls}-${restProps.type}`]: restProps.type,
         [`${controlCls}-${size}`]: size,
         [`${controlCls}-${state}`]: state,
         [`${controlCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
-        [`${prefixCls || config.prefixCls}-focused`]: focused,
-        [`${prefixCls || config.prefixCls}-readonly`]: restProps.readOnly,
+        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
+        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-focused`]: focused,
+        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-readonly`]: restProps.readOnly,
     }, className), [
         controlCls,
         restProps.type,
@@ -73,6 +73,7 @@ export function useInput(props) {
         state,
         direction,
         prefixCls,
+        config.control?.prefixCls,
         config.prefixCls,
         focused,
         className,

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

@@ -6,7 +6,7 @@ import { Radio } from '../../../components/Control/Radio/Radio';
 import { RadioGroupContext } from '../../../components/Control/Radio/RadioGroupContext';
 export const Group = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { block, children, className, defaultValue, direction = config.direction, disabled, id, options, prefixCls = config.prefixCls, size, stack, style, ...restProps } = props;
+    const { block, children, className, defaultValue, direction = config.radio?.direction || config.direction, disabled, id, options, prefixCls = config.radio?.prefixCls || config.prefixCls, size, stack, style, ...restProps } = props;
     const [value, setValue] = useMergedState(defaultValue, {
         value: restProps.value,
     });
@@ -20,7 +20,7 @@ export const Group = React.forwardRef((props, ref) => {
             restProps.onChange?.(val);
         }
     }, [restProps, setValue, value]);
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'radio-group'), [config, prefixCls]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.radio?.prefixCls || config.prefixCls, 'radio-group'), [config, prefixCls]);
     const context = React.useMemo(() => ({
         disabled,
         name: restProps.name,

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

@@ -6,7 +6,7 @@ import { useRadioGroup } from '../../../components/Control/Radio/RadioGroupConte
 export const Radio = React.forwardRef((props, ref) => {
     const config = useConfig();
     const radioGroup = useRadioGroup();
-    const { block, size, className, children, direction = config.direction, disabled, id, prefixCls = config.prefixCls, skipGroup, style, onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const { block, size, className, children, direction = config.radio?.direction || config.direction, disabled, id, prefixCls = config.radio?.prefixCls || config.prefixCls, skipGroup, style, onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...restProps } = props;
     const [internalChecked, setInternalChecked] = React.useState(restProps.checked
         ?? restProps.defaultChecked
         ?? ('value' in restProps && restProps.value === radioGroup?.value));
@@ -33,16 +33,16 @@ export const Radio = React.forwardRef((props, ref) => {
         radioProps.name = radioGroup.name;
         radioProps.onChange = onChange;
     }
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'radio'), [config, prefixCls]);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.radio?.prefixCls || config.prefixCls, 'radio'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.radio?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => classNames({
         [controlCls]: block,
         [`${controlCls}-radio`]: block,
         [`${controlCls}-${size}`]: block && size,
         [`${rootCls}-wrapper`]: true,
         [`${rootCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls || config.prefixCls}-checked`]: internalChecked,
-        [`${prefixCls || config.prefixCls}-disabled`]: radioProps.disabled,
+        [`${prefixCls || config.radio?.prefixCls || config.prefixCls}-checked`]: internalChecked,
+        [`${prefixCls || config.radio?.prefixCls || config.prefixCls}-disabled`]: radioProps.disabled,
     }, className), [
         controlCls,
         block,
@@ -50,6 +50,7 @@ export const Radio = React.forwardRef((props, ref) => {
         rootCls,
         direction,
         prefixCls,
+        config.radio?.prefixCls,
         config.prefixCls,
         internalChecked,
         radioProps.disabled,

package/dist/esm/components/Control/Select/index.d.ts

@@ -2,7 +2,8 @@ import { type BaseSelectRef, OptGroup, Option, type SelectProps as RcSelectProps
 import { type OptionProps } from 'rc-select/lib/Option';
 import { type BaseOptionType, type DefaultOptionType } from 'rc-select/lib/Select';
 import * as React from 'react';
-import { type ControlProps, type SizeType } from '../../../components/Control/types';
+import { type ControlProps } from '../../../components/Control/types';
+import { type SizeType } from '../../../types';
 import './index.scss';
 import '../index.scss';
 export type { BaseSelectRef, OptionProps };