@broxus/react-uikit 0.1.3 → 0.2.0

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

@@ -2,12 +2,15 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
 import { useConfig } from '../ConfrigProvider';
+import { useComponentContext } from '../ComponentProvider';
 const defaultElement = 'header';
-export function Header(props) {
+export const Header = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-card-header`, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'header'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Header.displayName = 'Card.Header';
 }

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

@@ -3,7 +3,4 @@ export interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
     position: 'left' | 'top' | 'right' | 'bottom';
     prefixCls?: string;
 }
-export declare function Media(props: CardMediaProps): JSX.Element;
-export declare namespace Media {
-    var displayName: string;
-}
+export declare const Media: React.MemoExoticComponent<(props: CardMediaProps) => JSX.Element>;

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

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { useComponentContext } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
-export function Media(props) {
+export const Media = React.memo((props) => {
     const config = useConfig();
-    const { className, position, prefixCls = `${config.prefixCls}-card-media`, ...restProps } = props;
+    const { getRootCls } = useComponentContext();
+    const { className, position, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'media'), [config, prefixCls]);
     return (React.createElement("div", { className: classNames({
-            [`${prefixCls}-${position}`]: position !== undefined,
+            [`${rootCls}-${position}`]: position !== undefined,
         }, className), ...restProps }));
-}
+});
 if (process.env.NODE_ENV !== 'production') {
     Media.displayName = 'Card.Media';
 }

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

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type CardTitleOwnProps = {
+import { type PolymorphicProps } from '../Component';
+export type CardTitleOwnProps = {
     prefixCls?: string;
 };
-export declare type CardTitleProps<E extends React.ElementType> = PolymorphicComponentProps<E, CardTitleOwnProps>;
-declare const defaultElement = "h1";
-export declare function Title<E extends React.ElementType = typeof defaultElement>(props: CardTitleProps<E>): JSX.Element;
-export declare namespace Title {
-    var displayName: string;
-}
-export {};
+export type CardTitleProps<E extends React.ElementType> = React.PropsWithChildren<CardTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardTitleOwnProps>;
+export declare const Title: React.MemoExoticComponent<(<E extends React.ElementType<any> = "h3">(props: CardTitleProps<E>) => JSX.Element)>;

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

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useComponentContext } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
-const defaultElement = 'h1';
-export function Title(props) {
+const defaultElement = 'h3';
+export const Title = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-card-title`, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'title'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Title.displayName = 'Card.Title';
 }

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

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { Badge } from './Badge';
-import { Body } from './Body';
-import { Footer } from './Footer';
-import { Header } from './Header';
-import { Media } from './Media';
-import { Title } from './Title';
-import type { CardProps } from './Card';
+import type * as React from 'react';
+import { Badge } from '../Card/Badge';
+import { Body } from '../Card/Body';
+import { type CardProps } from '../Card/Card';
+import { Footer } from '../Card/Footer';
+import { Header } from '../Card/Header';
+import { Media } from '../Card/Media';
+import { Title } from '../Card/Title';
 import './index.scss';
 export type { CardProps };
-export interface CompoundedCard extends React.FunctionComponent<CardProps> {
+export interface Card extends React.MemoExoticComponent<React.FunctionComponent<CardProps>> {
     Badge: typeof Badge;
     Body: typeof Body;
     Footer: typeof Footer;
@@ -16,4 +16,4 @@ export interface CompoundedCard extends React.FunctionComponent<CardProps> {
     Media: typeof Media;
     Title: typeof Title;
 }
-export declare const Card: CompoundedCard;
+export declare const Card: Card;

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

@@ -1,10 +1,10 @@
-import { Badge } from './Badge';
-import { Body } from './Body';
-import { Card as InternalCard } from './Card';
-import { Footer } from './Footer';
-import { Header } from './Header';
-import { Media } from './Media';
-import { Title } from './Title';
+import { Badge } from '../Card/Badge';
+import { Body } from '../Card/Body';
+import { Card as InternalCard } from '../Card/Card';
+import { Footer } from '../Card/Footer';
+import { Header } from '../Card/Header';
+import { Media } from '../Card/Media';
+import { Title } from '../Card/Title';
 import './index.scss';
 export const Card = InternalCard;
 Card.Badge = Badge;

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

@@ -1,8 +1,4 @@
 import * as React from 'react';
-import type { IconProps } from '../Icon';
-export declare type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'> & {
-    prefixCls?: string;
-};
-declare const defaultElement = "button";
-export declare function Close<E extends React.ElementType = typeof defaultElement>(props: CloseProps<E>): JSX.Element;
-export {};
+import { type IconProps } from '../Icon';
+export type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'>;
+export declare const Close: React.MemoExoticComponent<(<E extends React.ElementType<any> = "button">(props: CloseProps<E>) => JSX.Element)>;

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

@@ -3,8 +3,12 @@ import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
 import { Icon } from '../Icon';
 const defaultElement = 'button';
-export function Close(props) {
+export const Close = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-close`, ...restProps } = props;
-    return (React.createElement(Icon, { "aria-hidden": "false", className: classNames(prefixCls, className), component: defaultElement, tabIndex: -1, ...restProps, icon: "close" }));
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'close'), [config, prefixCls]);
+    return (React.createElement(Icon, { "aria-hidden": "false", className: classNames(rootCls, className), component: defaultElement, tabIndex: -1, ...restProps, icon: "close" }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Close.displayName = 'Close';
 }

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import type { ComponentProps } from './Component';
-export { Component } from './Component';
-export declare type PolymorphicComponentProps<E extends React.ElementType, P> = ComponentProps<E> & P;
-export declare type PolymorphicComponent<P, D extends React.ElementType = 'div'> = <E extends React.ElementType = D>(props: PolymorphicComponentProps<E, P>) => React.ReactElement | null;
+type ComponentOwnProp<E extends React.ElementType = React.ElementType> = {
+    component?: E;
+};
+type PropsToOmit<E extends React.ElementType, P = {}> = keyof (ComponentOwnProp<E> & P);
+export type PolymorphicProps<E extends React.ElementType, P = {}> = ComponentOwnProp<E> & Omit<React.ComponentPropsWithoutRef<E>, PropsToOmit<E, P>>;
+export type PolymorphicComponent<P = {}, C extends React.ElementType = 'div', I = {}> = <E extends React.ElementType = C>(props: PolymorphicProps<E, P> & I) => React.ReactElement | null;
+declare const defaultElement: React.ElementType;
+export declare const Component: <E extends React.ElementType = typeof defaultElement, P = {}>(props: PolymorphicProps<E, P>) => React.ReactElement | null;
+export {};

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

@@ -1 +1,3 @@
-export { Component } from './Component';
+import * as React from 'react';
+const defaultElement = 'div';
+export const Component = React.forwardRef(({ component: Element = defaultElement, ...props }, ref) => React.createElement(Element, { ref: ref, ...props }));

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type ComponentContextConsumerProps = {
+    getRootCls(): string | undefined;
+};
+export interface ComponentContextProviderProps extends React.PropsWithChildren<Partial<ComponentContextConsumerProps>> {
+    component: string;
+    prefixCls?: string;
+}
+export declare const ComponentContext: React.Context<ComponentContextConsumerProps>;
+export declare function useComponentContext(): ComponentContextConsumerProps;
+export declare function ComponentProvider(props: ComponentContextProviderProps): JSX.Element;

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useConfig } from '../ConfrigProvider';
+import { useContext } from '../../hooks';
+export const ComponentContext = React.createContext({
+    getRootCls() {
+        return undefined;
+    },
+});
+export function useComponentContext() {
+    return useContext(ComponentContext);
+}
+export function ComponentProvider(props) {
+    const config = useConfig();
+    const { children, component, prefixCls = config.prefixCls } = props;
+    const context = React.useMemo(() => ({
+        getRootCls() {
+            return config.getRootPrefixCls(prefixCls || config.prefixCls, component);
+        },
+    }), [component, config, prefixCls]);
+    return React.createElement(ComponentContext.Provider, { value: context }, children);
+}

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

@@ -1,12 +1,17 @@
 import * as React from 'react';
-import type { BreakpointsConfig } from '../../types';
-export declare type ColorMode = 'light' | 'dark';
-export declare type ConfigContextConsumerProps = {
+import { type BreakpointsConfig, type TooltipOptions } from '../../types';
+export type ColorMode = 'light' | 'dark';
+export type ConfigContextConsumerProps = {
     breakpoints?: Exclude<BreakpointsConfig<number>, 'default'>;
     cardPrimaryColorMode?: ColorMode;
     cardSecondaryColorMode?: ColorMode;
     cardTertiaryColorMode?: ColorMode;
     direction?: string;
+    getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+    getRootPrefixCls: (prefix?: string, component?: string) => string;
+    getTooltipConfig: (props: string | TooltipOptions) => {
+        'data-uk-tooltip': string;
+    };
     inverseGlobalColorMode?: ColorMode;
     prefixCls: string;
     sectionPrimaryColorMode?: ColorMode;
@@ -15,11 +20,8 @@ export declare type ConfigContextConsumerProps = {
     tilePrimaryColorMode?: ColorMode;
     tileSecondaryColorMode?: ColorMode;
     tileTertiaryColorMode?: ColorMode;
-    [k: string]: any;
 };
-export interface ConfigContextProviderProps extends ConfigContextConsumerProps {
-    children: React.ReactNode | React.ReactNode[];
-}
+export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextConsumerProps>;
 export declare const ConfigContext: React.Context<ConfigContextConsumerProps>;
 export declare function useConfig(): ConfigContextConsumerProps;
 export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): JSX.Element;

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { error } from '@broxus/js-utils';
+import { useContext } from '../../hooks';
 export const ConfigContext = React.createContext({
     breakpoints: {
         l: 960,
@@ -10,6 +12,25 @@ export const ConfigContext = React.createContext({
     // cardPrimaryColorMode: 'light',
     // cardSecondaryColorMode: 'light',
     // cardTertiaryColorMode: 'light',
+    getRootPrefixCls(prefix, module) {
+        return `${prefix ? `${prefix}-` : `${this.prefixCls}-`}${module ?? ''}`;
+    },
+    getTooltipConfig(props) {
+        if (typeof props === 'string') {
+            return { 'data-uk-tooltip': `title: ${props}` };
+        }
+        return {
+            'data-uk-tooltip': [
+                props.title ? `title: ${props.title}` : false,
+                props.animation ? `animation: ${props.animation}` : false,
+                props.cls ? `cls: ${props.cls}` : false,
+                props.delay !== undefined ? `delay: ${props.delay}` : false,
+                props.duration !== undefined ? `duration: ${props.duration}` : false,
+            ]
+                .filter(Boolean)
+                .join(';'),
+        };
+    },
     // inverseGlobalColorMode: 'light',
     prefixCls: 'uk',
     // sectionPrimaryColorMode: 'light',
@@ -20,14 +41,23 @@ export const ConfigContext = React.createContext({
     // tileTertiaryColorMode: 'light',
 });
 export function useConfig() {
-    return React.useContext(ConfigContext);
+    return useContext(ConfigContext);
 }
 export function ConfigContextProvider(props) {
+    const initialContext = useConfig();
     const { children, ...restProps } = props;
-    const context = React.useMemo(() => ({
-        ...useConfig(),
-        direction: document.dir,
-        ...restProps,
-    }), [restProps]);
-    return (React.createElement(ConfigContext.Provider, { value: context }, children));
+    const context = React.useMemo(() => {
+        let direction = 'ltr';
+        try {
+            direction = document.dir;
+        }
+        catch (e) {
+            error(e.message);
+        }
+        return { ...initialContext, direction, ...restProps };
+    }, [initialContext, restProps]);
+    return React.createElement(ConfigContext.Provider, { value: context }, children);
+}
+if (process.env.NODE_ENV !== 'production') {
+    ConfigContext.displayName = 'ConfigContext';
 }

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

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 import './index.scss';
 export interface ContainerOwnProps {
     expandLeft?: boolean;
     expandRight?: boolean;
+    prefixCls?: string;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge' | 'expand';
 }
-export declare type ContainerProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, ContainerOwnProps>;
-declare const defaultElement = "div";
-export declare function Container<E extends React.ElementType = typeof defaultElement>(props: ContainerProps<E>): JSX.Element;
-export {};
+export type ContainerProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ContainerOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ContainerOwnProps>;
+export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: ContainerProps<E>) => JSX.Element)>;

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

@@ -1,13 +1,19 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
 import './index.scss';
 const defaultElement = 'div';
-export function Container(props) {
-    const { className, expandLeft, expandRight, size, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames('uk-container', {
-            [`uk-container-${size}`]: size !== undefined,
-            'uk-container-expand-left': expandLeft,
-            'uk-container-expand-right': expandRight,
+export const Container = React.memo((props) => {
+    const config = useConfig();
+    const { className, expandLeft, expandRight, prefixCls = config.prefixCls, size, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'container'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, {
+            [`${rootCls}-${size}`]: size !== undefined,
+            [`${rootCls}-expand-left`]: expandLeft,
+            [`${rootCls}-expand-right`]: expandRight,
         }, className), component: defaultElement, ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Container.displayName = 'Container';
 }

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

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

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

@@ -1,40 +1,25 @@
 import * as React from 'react';
+import { retrieveGlobalAttributes } from '@broxus/js-utils';
 import classNames from 'classnames';
-import RcCheckbox from 'rc-checkbox';
 import { useConfig } from '../../ConfrigProvider';
-import { useCheckboxGroup } from './Context';
-export const Checkbox = React.forwardRef((props, ref) => {
+import { useCheckboxGroup } from '../../Control/Checkbox/CheckboxGroupContext';
+const ForwardedCheckbox = React.forwardRef((props, ref) => {
     const config = useConfig();
     const checkboxGroup = useCheckboxGroup();
-    const { block, children, className, direction = config.direction, prefixCls = config.prefixCls, size, skipGroup, style, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const { block, children, className, direction = config.direction, disabled, id, prefixCls = config.prefixCls, size, skipGroup, style, onMouseEnter, onMouseLeave, ...restProps } = props;
     const prevValue = React.useRef(restProps.value);
-    const [internalChecked, setInternalChecked,] = React.useState(restProps.checked || restProps.defaultChecked);
-    const onChange = (event) => {
+    const [internalChecked, setInternalChecked] = React.useState(restProps.checked || restProps.defaultChecked);
+    const onChange = React.useCallback((event) => {
         setInternalChecked(!internalChecked);
         restProps.onChange?.(event);
-    };
-    React.useEffect(() => {
-        checkboxGroup?.registerValue(restProps.value);
-    }, []);
-    React.useEffect(() => {
-        if (skipGroup) {
-            return;
-        }
-        if (restProps.value !== prevValue.current) {
-            checkboxGroup?.cancelValue(prevValue.current);
-            checkboxGroup?.registerValue(restProps.value);
-        }
-        // eslint-disable-next-line consistent-return
-        return () => checkboxGroup?.cancelValue(restProps.value);
-    }, [restProps.value]);
-    React.useEffect(() => {
-        setInternalChecked(restProps.checked || restProps.defaultChecked);
-    }, [restProps.checked, restProps.defaultChecked]);
+    }, [internalChecked, restProps]);
     const checkboxProps = React.useMemo(() => ({
         ...restProps,
         checked: internalChecked,
+        disabled,
+        id,
         onChange,
-    }), [restProps, internalChecked]);
+    }), [disabled, id, internalChecked, onChange, restProps]);
     if (checkboxGroup && !skipGroup) {
         checkboxProps.onChange = (...args) => {
             onChange(...args);
@@ -44,27 +29,62 @@ export const Checkbox = React.forwardRef((props, ref) => {
             });
         };
         checkboxProps.checked = checkboxGroup.value?.indexOf(restProps.value) > -1;
-        checkboxProps.disabled = restProps.disabled || checkboxGroup.disabled;
+        checkboxProps.disabled = disabled || checkboxGroup.disabled;
         checkboxProps.name = checkboxGroup.name;
     }
-    const rootPrefixCls = React.useMemo(() => `${prefixCls}-checkbox`, [prefixCls]);
-    const controlPrefixCls = React.useMemo(() => `${prefixCls}-control`, [prefixCls]);
+    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 wrapperClasses = React.useMemo(() => classNames({
-        [controlPrefixCls]: block,
-        [`${controlPrefixCls}-checkbox`]: block,
-        [`${controlPrefixCls}-${size}`]: block && size,
-        [`${rootPrefixCls}-wrapper`]: true,
-        [`${rootPrefixCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls}-checked`]: internalChecked,
-        [`${prefixCls}-disabled`]: checkboxProps.disabled,
-    }, className), [checkboxProps, block, size, direction]);
-    const checkboxClasses = React.useMemo(() => classNames({
-        [`${rootPrefixCls}-indeterminate`]: checkboxProps.indeterminate,
-    }), [checkboxProps.indeterminate, rootPrefixCls]);
-    return (React.createElement("label", { className: wrapperClasses, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-        React.createElement(RcCheckbox, { ...checkboxProps, prefixCls: rootPrefixCls, className: checkboxClasses, 
-            // @ts-ignore
-            ref: ref }),
-        children !== undefined && (React.createElement("span", { className: `${rootPrefixCls}-label` }, children))));
+        [controlCls]: block,
+        [`${controlCls}-checkbox`]: block,
+        [`${controlCls}-${size}`]: block && size,
+        [`${rootCls}-wrapper`]: true,
+        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls || config.prefixCls}-checked`]: internalChecked,
+        [`${prefixCls || config.prefixCls}-disabled`]: checkboxProps.disabled,
+    }, className), [
+        controlCls,
+        block,
+        size,
+        rootCls,
+        direction,
+        prefixCls,
+        config.prefixCls,
+        internalChecked,
+        checkboxProps.disabled,
+        className,
+    ]);
+    const checkboxClasses = React.useMemo(() => classNames(rootCls, {
+        [`${rootCls}-checked`]: internalChecked,
+        [`${rootCls}-disabled`]: disabled,
+        [`${rootCls}-indeterminate`]: checkboxProps.indeterminate,
+    }), [rootCls, internalChecked, disabled, checkboxProps.indeterminate]);
+    const globalAttributes = React.useMemo(() => retrieveGlobalAttributes(restProps), [restProps]);
+    React.useEffect(() => {
+        checkboxGroup?.registerValue(restProps.value);
+    }, [checkboxGroup, restProps.value]);
+    React.useEffect(() => {
+        if (skipGroup) {
+            return;
+        }
+        if (restProps.value !== prevValue.current) {
+            checkboxGroup?.cancelValue(prevValue.current);
+            checkboxGroup?.registerValue(restProps.value);
+        }
+        // eslint-disable-next-line consistent-return
+        return () => checkboxGroup?.cancelValue(restProps.value);
+    }, [checkboxGroup, restProps.value, skipGroup]);
+    React.useEffect(() => {
+        setInternalChecked(restProps.checked || restProps.defaultChecked);
+    }, [restProps.checked, restProps.defaultChecked]);
+    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("span", { className: `${rootCls}-inner` })),
+        children !== undefined && React.createElement("span", { className: `${rootCls}-label` }, children)));
 });
-Checkbox.displayName = 'Checkbox';
+export const Checkbox = React.memo(ForwardedCheckbox);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedCheckbox.displayName = 'Checkbox.Forwarded';
+    Checkbox.displayName = 'Checkbox';
+}

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { type SizeType } from '../../Control/types';
+export interface AbstractCheckboxGroupProps<T = any> {
+    block?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    direction?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    options?: T[];
+    prefixCls?: string;
+    size?: SizeType;
+    stack?: boolean;
+    style?: React.CSSProperties;
+}
+export interface CheckboxGroupConsumerProps<T = any> {
+    disabled?: boolean;
+    name?: string;
+    value?: any;
+    cancelValue: (value: string) => void;
+    registerValue: (value: string) => void;
+    toggleOption?: (option: T) => void;
+}
+export declare const CheckboxGroupContext: React.Context<CheckboxGroupConsumerProps<any> | null>;
+export declare function useCheckboxGroup<T = any>(): CheckboxGroupConsumerProps<T> | null;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const CheckboxGroupContext = React.createContext(null);
+export function useCheckboxGroup() {
+    return React.useContext(CheckboxGroupContext);
+}
+if (process.env.NODE_ENV !== 'production') {
+    CheckboxGroupContext.displayName = 'CheckboxGroupContext';
+}

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

@@ -1,3 +1,15 @@
 import * as React from 'react';
-import type { CheckboxGroupProps } from './types';
-export declare const Group: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+import { type AbstractCheckboxGroupProps } from '../../Control/Checkbox/CheckboxGroupContext';
+export interface CheckboxGroupProps<T = any> extends AbstractCheckboxGroupProps<T> {
+    defaultValue?: T[];
+    value?: T[];
+    onChange?: (values: T[]) => void;
+}
+export interface CheckboxOptionType<T = any> {
+    disabled?: boolean;
+    label: React.ReactNode;
+    value: T;
+    style?: React.CSSProperties;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+export declare const Group: React.MemoExoticComponent<React.ForwardRefExoticComponent<CheckboxGroupProps<any> & React.RefAttributes<HTMLDivElement>>>;