@broxus/react-uikit 0.1.3 → 0.2.1

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import type { InputProps, InputRef } from './types';
-export declare const Input: React.ForwardRefExoticComponent<InputProps<import("..").ValueType> & React.RefAttributes<InputRef>>;
+import { type InputProps, type InputRef } from '../../Control/Input/types';
+export declare const Input: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputProps<import("..").ValueType> & React.RefAttributes<InputRef>>>;

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

@@ -1,13 +1,23 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
+import { useConfig } from '../../ConfrigProvider';
+import { useInput } from '../../Control/Input/useInput';
 import { Icon } from '../../Icon';
-import { useInput } from './useInput';
-export const Input = React.forwardRef((props, ref) => {
-    const { allowClear, inputRef, prefix, suffix, wrapperClasses, onClear, ...restProps } = useInput({
+const ForwardedInput = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const { allowClear, inputRef, prefix, prefixCls = config.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 inputProps = omit({
+        ...restProps,
+        className: classNames(rootCls, {
+            [`${prefixCls || config.prefixCls}-empty`]: !restProps.value,
+        }),
+    }, ['dir', 'size']);
     React.useImperativeHandle(ref, () => ({
         blur() {
             inputRef.current?.blur();
@@ -19,16 +29,15 @@ export const Input = React.forwardRef((props, ref) => {
             return inputRef;
         },
     }));
-    const inputProps = omit({
-        ...restProps,
-        className: classNames('uk-input', {
-            'uk-empty': !restProps.value,
-        }),
-    }, ['dir', 'size']);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: restProps.id },
-        prefix && (React.createElement("span", { key: "prefix", className: "uk-control-prefix" }, prefix)),
-        React.createElement("span", { key: "input", className: "uk-control-input" },
+        prefix && (React.createElement("span", { key: "prefix", className: `${controlCls}-prefix` }, prefix)),
+        React.createElement("span", { key: "input", className: `${controlCls}-input` },
             React.createElement("input", { ref: inputRef, ...inputProps, type: restProps.type })),
-        (allowClear && restProps.value) && (React.createElement(Icon, { key: "clearfix-icon", icon: "close", className: "uk-control-clearfix", onClick: onClear })),
-        suffix && (React.createElement("span", { key: "suffix", className: "uk-control-suffix" }, suffix))));
+        allowClear && restProps.value && (React.createElement(Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clearfix`, onClick: onClear })),
+        suffix && (React.createElement("span", { key: "suffix", className: `${controlCls}-suffix` }, suffix))));
 });
+export const Input = React.memo(ForwardedInput);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedInput.displayName = 'Input.Forwarded';
+    Input.displayName = 'Input';
+}

package/dist/esm/components/Control/Input/Number/index.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import type { InputNumberProps, InputRef } from '../types';
+import { type InputNumberProps, type InputRef } from '../../../Control/Input/types';
 import './index.scss';
-export declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps<import("../..").ValueType> & React.RefAttributes<InputRef>>;
+export declare const InputNumber: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputNumberProps<import("../..").ValueType> & React.RefAttributes<InputRef>>>;

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

@@ -1,16 +1,14 @@
 import * as React from 'react';
 import RcInputNumber from 'rc-input-number';
 import omit from 'rc-util/lib/omit';
+import { useConfig } from '../../../ConfrigProvider';
+import { useInput } from '../../../Control/Input/useInput';
 import { Icon } from '../../../Icon';
-import { useInput } from '../useInput';
 import './index.scss';
-export const InputNumber = React.forwardRef((props, ref) => {
-    // Hooks
-    const { inputRef, wrapperClasses, ...restProps } = useInput({
-        ...props,
-        type: 'number',
-    });
-    // External component API
+/* eslint-disable jsx-a11y/label-has-associated-control */
+const ForwardedInputNumber = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const { inputRef, prefixCls = config.prefixCls, wrapperClasses, ...restProps } = useInput({ ...props, type: 'number' });
     React.useImperativeHandle(ref, () => ({
         blur() {
             inputRef.current?.blur();
@@ -22,16 +20,23 @@ export const InputNumber = React.forwardRef((props, ref) => {
             return inputRef;
         },
     }));
-    // Pre-render logic
-    const upIcon = React.useMemo(() => (React.createElement(Icon, { icon: "keyboard_arrow_up", className: "uk-number-handler-up-inner" })), []);
-    const downIcon = React.useMemo(() => (React.createElement(Icon, { icon: "keyboard_arrow_down", className: "uk-number-handler-down-inner" })), []);
-    const inputProps = omit({
-        ...restProps,
-        className: 'uk-number-wrapper',
-    }, ['allowClear', 'prefix', 'size', 'suffix', 'onClear']);
-    // Render
+    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 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` }, [
+        'allowClear',
+        'prefix',
+        'size',
+        'suffix',
+        'onClear',
+    ]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: restProps.id },
-        React.createElement("div", { className: "uk-control-input" },
-            React.createElement(RcInputNumber, { ...inputProps, downHandler: downIcon, prefixCls: "uk-number", ref: inputRef, upHandler: upIcon }))));
+        React.createElement("div", { className: `${controlCls}-input` },
+            React.createElement(RcInputNumber, { ...inputProps, downHandler: downIcon, prefixCls: rootCls, ref: inputRef, upHandler: upIcon }))));
 });
-InputNumber.displayName = 'Input.Number';
+export const InputNumber = React.memo(ForwardedInputNumber);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedInputNumber.displayName = 'Input.Number.Forwarded';
+    InputNumber.displayName = 'Input.Number';
+}

package/dist/esm/components/Control/Input/Password/index.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import type { InputRef, PasswordProps } from '../types';
+import { type InputRef, type PasswordProps } from '../../../Control/Input/types';
 import './index.scss';
-export declare const Password: React.ForwardRefExoticComponent<PasswordProps & React.RefAttributes<InputRef>>;
+export declare const Password: React.MemoExoticComponent<React.ForwardRefExoticComponent<PasswordProps & React.RefAttributes<InputRef>>>;

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

@@ -1,37 +1,40 @@
 import * as React from 'react';
 import { preventEvent } from '@broxus/js-utils';
+import { useConfig } from '../../../ConfrigProvider';
+import { Input } from '../../../Control/Input/Input';
 import { Icon } from '../../../Icon';
-import { Input } from '../Input';
 import './index.scss';
-export const Password = React.forwardRef((props, ref) => {
-    const { onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
+const ForwardedPassword = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const { prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
     const inputRef = React.useRef(null);
     const removePasswordTimeout = React.useRef(null);
-    const [visible, toggleVisible] = React.useState(false);
-    const removePasswordValueAttribute = () => {
+    const [visible, setVisible] = React.useState(false);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const removePasswordValueAttribute = React.useCallback(() => {
         removePasswordTimeout.current = setTimeout(() => {
-            if (inputRef?.current?.getInputRef()?.current?.getAttribute('type') === 'password'
-                && inputRef?.current?.getInputRef()?.current?.hasAttribute('value')) {
-                inputRef?.current?.getInputRef()?.current?.removeAttribute('value');
+            const input = inputRef?.current?.getInputRef()?.current;
+            if (input?.getAttribute('type') === 'password' && input?.hasAttribute('value')) {
+                input?.removeAttribute('value');
             }
         });
-    };
-    const onChange = event => {
+    }, []);
+    const toggleVisibility = React.useCallback(() => {
+        setVisible(!visible);
+        restProps.onVisibilityChange?.(!visible);
+    }, [restProps, visible]);
+    const onChange = React.useCallback(event => {
         removePasswordValueAttribute();
         onChangeCallback?.(event);
-    };
-    const onBlur = event => {
+    }, [onChangeCallback, removePasswordValueAttribute]);
+    const onBlur = React.useCallback(event => {
         removePasswordValueAttribute();
         onBlurCallback?.(event);
-    };
-    const onFocus = event => {
+    }, [onBlurCallback, removePasswordValueAttribute]);
+    const onFocus = React.useCallback(event => {
         removePasswordValueAttribute();
         restProps.onFocus?.(event);
-    };
-    const onClickIcon = React.useCallback(() => {
-        toggleVisible(!visible);
-        restProps.onVisibilityChange?.(!visible);
-    }, [visible]);
+    }, [removePasswordValueAttribute, restProps]);
     React.useImperativeHandle(ref, () => ({
         blur() {
             inputRef.current?.blur();
@@ -40,9 +43,7 @@ export const Password = React.forwardRef((props, ref) => {
             inputRef.current?.focus();
         },
         getInputRef() {
-            return inputRef.current
-                ? inputRef.current.getInputRef()
-                : null;
+            return inputRef.current ? inputRef.current.getInputRef() : null;
         },
     }));
     React.useEffect(() => {
@@ -52,12 +53,23 @@ export const Password = React.forwardRef((props, ref) => {
                 clearTimeout(removePasswordTimeout.current);
             }
         };
-    }, []);
+    }, [removePasswordValueAttribute]);
     const suffix = React.useMemo(() => (React.createElement(React.Fragment, null,
         React.createElement(Icon, { key: "toggle_visibility_icon", icon: visible
-                ? (restProps.iconVisibility ?? 'visibility')
-                : (restProps.iconVisibilityOff ?? 'visibility_off'), className: "uk-control-password-icon", onClick: onClickIcon, onMouseDown: preventEvent, onMouseUp: preventEvent }),
-        restProps.suffix)), [restProps.iconVisibility, restProps.iconVisibilityOff, visible]);
+                ? restProps.iconVisibility ?? 'visibility'
+                : restProps.iconVisibilityOff ?? 'visibility_off', className: `${controlCls}-password-icon`, onClick: toggleVisibility, onMouseDown: preventEvent, onMouseUp: preventEvent }),
+        restProps.suffix)), [
+        controlCls,
+        restProps.iconVisibility,
+        restProps.iconVisibilityOff,
+        restProps.suffix,
+        toggleVisibility,
+        visible,
+    ]);
     return (React.createElement(Input, { ...restProps, suffix: suffix, type: visible ? 'text' : 'password', ref: inputRef, onChange: onChange, onBlur: onBlur, onFocus: onFocus }));
 });
-Password.displayName = 'Input.Password';
+export const Password = React.memo(ForwardedPassword);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedPassword.displayName = 'Input.Password.Forwarded';
+    Password.displayName = 'Input.Password';
+}

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { InputNumber } from './Number';
-import { Password } from './Password';
-import type { InputProps, InputRef } from './types';
-export * from './types';
-export * from './useInput';
-export interface CompoundedInput extends React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> {
+import { InputNumber } from '../../Control/Input/Number';
+import { Password } from '../../Control/Input/Password';
+import type { InputProps, InputRef } from '../../Control/Input/types';
+export * from '../../Control/Input/types';
+export * from '../../Control/Input/useInput';
+export interface Input extends React.MemoExoticComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>> {
     Number: typeof InputNumber;
     Password: typeof Password;
 }
-export declare const Input: CompoundedInput;
+export declare const Input: Input;

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

@@ -1,8 +1,8 @@
-import { Input as InternalInput } from './Input';
-import { InputNumber } from './Number';
-import { Password } from './Password';
-export * from './types';
-export * from './useInput';
+import { Input as InternalInput } from '../../Control/Input/Input';
+import { InputNumber } from '../../Control/Input/Number';
+import { Password } from '../../Control/Input/Password';
+export * from '../../Control/Input/types';
+export * from '../../Control/Input/useInput';
 export const Input = InternalInput;
 Input.Number = InputNumber;
 Input.Password = Password;

package/dist/esm/components/Control/Input/types.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
-import type { ControlProps, ValueType } from '../types';
+import type * as React from 'react';
+import { type InputNumberProps as RcInputNumberProps } from 'rc-input-number';
+import { type ControlProps, type ValueType } from '../../Control/types';
 export interface InputFocusOptions extends FocusOptions {
     cursor?: 'start' | 'end' | 'all';
 }
@@ -9,7 +9,7 @@ export interface InputRef {
     focus(): void;
     getInputRef(): React.RefObject<HTMLInputElement> | null;
 }
-export declare type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
+export type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
 export interface InputProps<T extends ValueType = ValueType> extends OmittedNativeInput, ControlProps<T> {
     useInternalValueState?: boolean;
     onClear?(event: React.MouseEvent<HTMLElement>): void;
@@ -19,7 +19,7 @@ export interface PasswordProps extends InputProps {
     iconVisibilityOff?: string;
     onVisibilityChange?(visible: boolean): void;
 }
-export interface InputNumberProps<T extends ValueType = ValueType> extends Omit<RcInputNumberProps<T>, 'prefix' | 'size'>, ControlProps<T> {
+export interface InputNumberProps<T extends ValueType = ValueType> extends Omit<RcInputNumberProps<T>, 'prefix' | 'size' | 'type'>, Omit<ControlProps<T>, 'value'> {
     useInternalValueState?: boolean;
     onClear?(event: React.MouseEvent<HTMLElement>): void;
 }

package/dist/esm/components/Control/Input/useInput.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import type { ValueType } from '../types';
-import type { InputNumberProps, InputProps } from './types';
+import { type ValueType } from '../../Control/types';
+import { type InputNumberProps, type InputProps } from '../../Control/Input/types';
 interface HookConsumedProps {
     inputRef: React.RefObject<HTMLInputElement>;
+    prefixCls?: string;
     wrapperClasses: string;
 }
-declare type Props<T, U extends ValueType = ValueType> = T extends InputNumberProps<U> ? T : T extends InputProps<U> ? T : any;
+type Props<T, U extends ValueType = ValueType> = T extends InputNumberProps<U> ? T : T extends InputProps<U> ? T : any;
 export declare function fixControlledValue<T>(value: T): T | string;
-export declare function useInput<T, U extends ValueType = ValueType>({ className, direction, size, state, useInternalValueState, onPressEnter, ...props }: Props<T, U>): T & HookConsumedProps;
+export declare function useInput<T, U extends ValueType = ValueType>(props: Props<T, U>): T & HookConsumedProps;
 export {};

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

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { useConfig } from '../../ConfrigProvider';
 export function fixControlledValue(value) {
     if (value == null) {
         return '';
     }
     return value;
 }
-export function useInput({ className, direction, size, state, useInternalValueState = true, onPressEnter, ...props }) {
-    // Refs
+export function useInput(props) {
+    const config = useConfig();
     const inputRef = React.useRef(null);
-    // States
+    const { className, direction, prefixCls = config.prefixCls, size, state, useInternalValueState = true, onPressEnter, ...restProps } = props;
     const [focused, setFocused] = React.useState(false);
-    const [internalValue, setInternalValue] = React.useState(useInternalValueState ? (props.value || props.defaultValue) : undefined);
-    // Methods
-    const onChange = (event) => {
+    const [internalValue, setInternalValue] = React.useState(useInternalValueState ? restProps.value || restProps.defaultValue : undefined);
+    const onChange = React.useCallback((event) => {
         if (useInternalValueState) {
             if (typeof event === 'string' || typeof event === 'number') {
                 setInternalValue(event);
@@ -22,67 +22,64 @@ export function useInput({ className, direction, size, state, useInternalValueSt
                 setInternalValue(event.target.value);
             }
         }
-        props.onChange?.(event);
-    };
-    const onClear = event => {
+        restProps.onChange?.(event);
+    }, [restProps, useInternalValueState]);
+    const onClear = React.useCallback(event => {
         if (inputRef.current) {
             inputRef.current.value = '';
         }
         onChange(event);
-    };
-    const onBlur = event => {
+    }, [onChange]);
+    const onBlur = React.useCallback(event => {
         setFocused(false);
-        props.onBlur?.(event);
-    };
-    const onFocus = event => {
+        restProps.onBlur?.(event);
+    }, [restProps]);
+    const onFocus = React.useCallback(event => {
         setFocused(true);
-        props.onFocus?.(event);
-    };
-    const onKeyDown = event => {
-        if (onPressEnter && event.keyCode === 13) {
+        restProps.onFocus?.(event);
+    }, [restProps]);
+    const onKeyDown = React.useCallback(event => {
+        if (onPressEnter && (event.keyCode === 13 || event.key === 'Enter')) {
             onPressEnter(event);
         }
-        props.onKeyDown?.(event);
-    };
-    // Effects
-    React.useEffect(() => {
-        if (useInternalValueState) {
-            setInternalValue(props.value);
-        }
-    }, [props.value]);
-    // Pre-render logic
+        restProps.onKeyDown?.(event);
+    }, [onPressEnter, restProps]);
     const inputProps = React.useMemo(() => ({
-        ...props,
-        value: fixControlledValue(internalValue || props.value),
+        ...restProps,
+        value: fixControlledValue(internalValue || restProps.value),
         // eslint-disable-next-line sort-keys
         onBlur,
         onChange,
         onClear,
         onFocus,
         onKeyDown,
-    }), [props, internalValue]);
-    const wrapperClasses = React.useMemo(() => classNames('uk-control', {
-        [`uk-control-${props.type}`]: props.type,
-        [`uk-control-${size}`]: size,
-        [`uk-control-${state}`]: state,
-        'uk-control-rtl': direction === 'rtl',
-        'uk-disabled': props.disabled,
-        'uk-focused': focused,
-        'uk-readonly': props.readOnly,
+    }), [restProps, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(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,
     }, className), [
-        className,
-        direction,
-        focused,
+        controlCls,
+        restProps.type,
+        restProps.disabled,
+        restProps.readOnly,
         size,
         state,
-        props.disabled,
-        props.readOnly,
-        props.type,
+        direction,
+        prefixCls,
+        config.prefixCls,
+        focused,
+        className,
     ]);
-    // Return consumed props
-    return {
-        ...inputProps,
-        inputRef,
-        wrapperClasses,
-    };
+    React.useEffect(() => {
+        if (useInternalValueState) {
+            setInternalValue(restProps.value);
+        }
+    }, [restProps.value, useInternalValueState]);
+    return { ...inputProps, inputRef, wrapperClasses };
 }

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

@@ -1,3 +1,8 @@
 import * as React from 'react';
-import type { RadioGroupProps } from './types';
-export declare const Group: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+import { type AbstractCheckboxGroupProps } from '../../Control/Checkbox';
+export interface RadioGroupProps<T = any> extends AbstractCheckboxGroupProps<T> {
+    defaultValue?: T;
+    value?: T;
+    onChange?: (option: T) => void;
+}
+export declare const Group: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioGroupProps<any> & React.RefAttributes<HTMLDivElement>>>;

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

@@ -1,45 +1,52 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import { Radio } from './Radio';
-import { Context } from './Context';
-export const Group = React.forwardRef((props, ref) => {
-    const { block, children, className, defaultValue, direction, disabled, id, options, size, stack, style, onMouseEnter, onMouseLeave, ...restProps } = props;
+import { useConfig } from '../../ConfrigProvider';
+import { Radio } from '../../Control/Radio/Radio';
+import { RadioGroupContext } from '../../Control/Radio/RadioGroupContext';
+const ForwardedGroup = 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 [value, setValue] = useMergedState(defaultValue, {
         value: restProps.value,
     });
-    const onRadioChange = (event) => {
+    const onChange = React.useCallback(event => {
         const lastValue = value;
         const val = event.target.value;
         if (!('value' in restProps)) {
             setValue(val);
         }
         if (val !== lastValue) {
-            restProps.onChange?.(event);
+            restProps.onChange?.(val);
         }
-    };
+    }, [restProps, setValue, value]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'radio-group'), [config, prefixCls]);
     const context = React.useMemo(() => ({
         disabled,
         name: restProps.name,
         value,
         // eslint-disable-next-line sort-keys
-        onChange: onRadioChange,
-    }), [disabled, value, restProps]);
+        onChange,
+    }), [disabled, restProps.name, value, onChange]);
     const renderGroup = () => {
         let childrenToRender = children;
         if (options && options.length > 0) {
             childrenToRender = options.map((option) => {
                 if (typeof option === 'string') {
-                    return (React.createElement(Radio, { key: option, block: block, checked: value === option, direction: direction, disabled: disabled, size: size, value: option, className: "uk-radio-group-item" }, option));
+                    return (React.createElement(Radio, { key: option, block: block, className: `${rootCls}-item`, checked: value === option, direction: direction, disabled: disabled, size: size, value: option }, option));
                 }
-                return (React.createElement(Radio, { key: `radio-group-value-options-${option.value}`, block: block, checked: value === option.value, direction: direction, disabled: option.disabled || disabled, size: size, value: option.value, style: option.style, className: "uk-radio-group-item" }, option.label));
+                return (React.createElement(Radio, { key: `radio-group-value-options-${option.value}`, block: block, checked: value === option.value, className: `${rootCls}-item`, direction: direction, disabled: option.disabled || disabled, size: size, style: option.style, value: option.value }, option.label));
             });
         }
-        return (React.createElement("div", { ref: ref, className: classNames('uk-radio-group', {
-                'uk-radio-group-rtl': direction === 'rtl',
-                'uk-radio-group-stack': stack,
-            }, className), id: id, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, childrenToRender));
+        return (React.createElement("div", { className: classNames(rootCls, {
+                [`${rootCls}-rtl`]: direction === 'rtl',
+                [`${rootCls}-stack`]: stack,
+            }, className), id: id, style: style, ref: ref }, childrenToRender));
     };
-    return (React.createElement(Context.Provider, { value: context }, renderGroup()));
+    return React.createElement(RadioGroupContext.Provider, { value: context }, renderGroup());
 });
-Group.displayName = 'Radio.Group';
+export const Group = React.memo(ForwardedGroup);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedGroup.displayName = 'Radio.Group.Forwarded';
+    Group.displayName = 'Radio.Group';
+}

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

@@ -1,3 +1,7 @@
 import * as React from 'react';
-import type { RadioProps } from './types';
-export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+import { type AbstractCheckboxProps } from '../../Control/Checkbox';
+export interface RadioProps extends AbstractCheckboxProps {
+    onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
+}
+export declare const Radio: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>>;