@broxus/react-uikit 0.1.1 → 0.1.2

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+import { Link } from '../Link';
+/* eslint-disable react/prop-types */
+export const Button = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const { children, ghost, htmlType = 'button', prefixCls = `${config.prefixCls}-button`, shape, size, type, ...restProps } = props;
+    const buttonRef = ref || React.useRef(null);
+    const onClick = event => {
+        if (restProps.disabled) {
+            event.preventDefault();
+            return;
+        }
+        restProps.onClick?.(event);
+    };
+    const className = classNames(prefixCls, {
+        [`${prefixCls}-${type}`]: type !== undefined,
+        [`${prefixCls}-ghost`]: ghost !== undefined,
+        [`${prefixCls}-${size}`]: size !== undefined,
+        [`${prefixCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
+    }, restProps.className);
+    if (restProps.href !== undefined) {
+        return (React.createElement(Link, { ref: buttonRef, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
+    }
+    return (React.createElement("button", { ref: buttonRef, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Button.displayName = 'Button';
+}

package/dist/esm/components/Button/Group.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
+}
+export declare function Group(props: ButtonGroupProps): JSX.Element;
+export declare namespace Group {
+    var displayName: string;
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+export function Group(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-button-group`, ...restProps } = props;
+    return (React.createElement("div", { className: classNames(prefixCls, className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Group.displayName = 'Button.Group';
+}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Group } from './Group';
+import type { ButtonProps } from './Button';
+import './index.scss';
+export type { ButtonProps };
+export interface CompoundedButton extends React.ForwardRefExoticComponent<ButtonProps> {
+    Group: typeof Group;
+}
+export declare const Button: CompoundedButton;

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

@@ -0,0 +1,5 @@
+import { Button as InternalButton } from './Button';
+import { Group } from './Group';
+import './index.scss';
+export const Button = InternalButton;
+Button.Group = Group;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface CardBadgeProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
+}
+export declare function Badge(props: CardBadgeProps): JSX.Element;
+export declare namespace Badge {
+    var displayName: string;
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+import { Label } from '../Label';
+export function Badge(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-card-badge`, ...restProps } = props;
+    return (React.createElement(Label, { className: classNames(prefixCls, className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Badge.displayName = 'Card.Badge';
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface CardBodyProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
+}
+export declare function Body(props: CardBodyProps): JSX.Element;
+export declare namespace Body {
+    var displayName: string;
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+export function Body(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-card-body`, ...restProps } = props;
+    return (React.createElement("div", { className: classNames(prefixCls, className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Body.displayName = 'Card.Body';
+}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import type { ColorMode } from '../ConfrigProvider';
+export interface CardOwnProps extends React.HTMLAttributes<HTMLElement> {
+    asBody?: boolean;
+    color?: 'default' | 'primary' | 'secondary' | 'tertiary';
+    colorMode?: ColorMode;
+    hoverable?: boolean;
+    prefixCls?: string;
+    size?: 'small' | 'large';
+}
+export declare type CardProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, CardOwnProps>;
+declare const defaultElement = "div";
+export declare function Card<E extends React.ElementType = typeof defaultElement>(props: CardProps<E>): JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { capitalizeFirstLetter } from '@broxus/js-utils';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+const defaultElement = 'div';
+export function Card(props) {
+    const config = useConfig();
+    const { asBody, className, color, colorMode = color !== 'default' && color !== undefined
+        ? config[`card${capitalizeFirstLetter(color)}ColorMode`]
+        : undefined, hoverable, prefixCls = `${config.prefixCls}-card`, size, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(prefixCls, {
+            [`${prefixCls}-${color}`]: color !== undefined,
+            [`${prefixCls}-${size}`]: size !== undefined,
+            [`${prefixCls}-body`]: asBody,
+            [`${prefixCls}-hover`]: hoverable,
+            [`${config.prefixCls}-${colorMode}`]: colorMode !== undefined,
+        }, className), component: defaultElement, ...restProps }));
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type CardFooterOwnProps = {
+    prefixCls?: string;
+};
+export declare type CardFooterProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, CardFooterOwnProps>;
+declare const defaultElement = "footer";
+export declare function Footer<E extends React.ElementType = typeof defaultElement>(props: CardFooterProps<E>): JSX.Element;
+export declare namespace Footer {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+const defaultElement = 'footer';
+export function Footer(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-card-footer`, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Footer.displayName = 'Card.Footer';
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type CardHeaderOwnProps = {
+    prefixCls?: string;
+};
+export declare type CardHeaderProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, CardHeaderOwnProps>;
+declare const defaultElement = "header";
+export declare function Header<E extends React.ElementType = typeof defaultElement>(props: CardHeaderProps<E>): JSX.Element;
+export declare namespace Header {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+const defaultElement = 'header';
+export function Header(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-card-header`, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Header.displayName = 'Card.Header';
+}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+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;
+}

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

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

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export declare 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 {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+const defaultElement = 'h1';
+export function Title(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-card-title`, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Title.displayName = 'Card.Title';
+}

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

@@ -0,0 +1,19 @@
+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 './index.scss';
+export type { CardProps };
+export interface CompoundedCard extends React.FunctionComponent<CardProps> {
+    Badge: typeof Badge;
+    Body: typeof Body;
+    Footer: typeof Footer;
+    Header: typeof Header;
+    Media: typeof Media;
+    Title: typeof Title;
+}
+export declare const Card: CompoundedCard;

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

@@ -0,0 +1,15 @@
+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 './index.scss';
+export const Card = InternalCard;
+Card.Badge = Badge;
+Card.Body = Body;
+Card.Footer = Footer;
+Card.Header = Header;
+Card.Media = Media;
+Card.Title = Title;

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

@@ -0,0 +1,8 @@
+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 {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+import { Icon } from '../Icon';
+const defaultElement = 'button';
+export function Close(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" }));
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare type ComponentOwnProps<E extends React.ElementType = React.ElementType> = {
+    component?: E;
+};
+export declare type ComponentProps<E extends React.ElementType> = ComponentOwnProps<E> & Omit<React.ComponentProps<E>, keyof ComponentOwnProps>;
+declare const defaultElement = "div";
+export declare const Component: <E extends React.ElementType = typeof defaultElement>(props: ComponentProps<E>) => React.ReactElement | null;
+export {};

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

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

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

@@ -0,0 +1,5 @@
+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;

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

@@ -0,0 +1 @@
+export { Component } from './Component';

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { BreakpointsConfig } from '../../types';
+export declare type ColorMode = 'light' | 'dark';
+export declare type ConfigContextConsumerProps = {
+    breakpoints?: Exclude<BreakpointsConfig<number>, 'default'>;
+    cardPrimaryColorMode?: ColorMode;
+    cardSecondaryColorMode?: ColorMode;
+    cardTertiaryColorMode?: ColorMode;
+    direction?: string;
+    inverseGlobalColorMode?: ColorMode;
+    prefixCls: string;
+    sectionPrimaryColorMode?: ColorMode;
+    sectionSecondaryColorMode?: ColorMode;
+    sectionTertiaryColorMode?: ColorMode;
+    tilePrimaryColorMode?: ColorMode;
+    tileSecondaryColorMode?: ColorMode;
+    tileTertiaryColorMode?: ColorMode;
+    [k: string]: any;
+};
+export interface ConfigContextProviderProps extends ConfigContextConsumerProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export const ConfigContext = React.createContext({
+    breakpoints: {
+        l: 960,
+        m: 768,
+        s: 480,
+        xl: 1200,
+        xs: 320,
+    },
+    // cardPrimaryColorMode: 'light',
+    // cardSecondaryColorMode: 'light',
+    // cardTertiaryColorMode: 'light',
+    // inverseGlobalColorMode: 'light',
+    prefixCls: 'uk',
+    // sectionPrimaryColorMode: 'light',
+    // sectionSecondaryColorMode: 'light',
+    // sectionTertiaryColorMode: 'light',
+    // tilePrimaryColorMode: 'light',
+    // tileSecondaryColorMode: 'light',
+    // tileTertiaryColorMode: 'light',
+});
+export function useConfig() {
+    return React.useContext(ConfigContext);
+}
+export function ConfigContextProvider(props) {
+    const { children, ...restProps } = props;
+    const context = React.useMemo(() => ({
+        ...useConfig(),
+        direction: document.dir,
+        ...restProps,
+    }), [restProps]);
+    return (React.createElement(ConfigContext.Provider, { value: context }, children));
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export interface ContainerOwnProps {
+    expandLeft?: boolean;
+    expandRight?: boolean;
+    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 {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+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,
+        }, className), component: defaultElement, ...restProps }));
+}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { CheckboxProps } from './types';
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import RcCheckbox from 'rc-checkbox';
+import { useConfig } from '../../ConfrigProvider';
+import { useCheckboxGroup } from './Context';
+export const Checkbox = 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 prevValue = React.useRef(restProps.value);
+    const [internalChecked, setInternalChecked,] = React.useState(restProps.checked || restProps.defaultChecked);
+    const onChange = (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]);
+    const checkboxProps = React.useMemo(() => ({
+        ...restProps,
+        checked: internalChecked,
+        onChange,
+    }), [restProps, internalChecked]);
+    if (checkboxGroup && !skipGroup) {
+        checkboxProps.onChange = (...args) => {
+            onChange(...args);
+            checkboxGroup.toggleOption?.({
+                label: children,
+                value: restProps.value,
+            });
+        };
+        checkboxProps.checked = checkboxGroup.value?.indexOf(restProps.value) > -1;
+        checkboxProps.disabled = restProps.disabled || checkboxGroup.disabled;
+        checkboxProps.name = checkboxGroup.name;
+    }
+    const rootPrefixCls = React.useMemo(() => `${prefixCls}-checkbox`, [prefixCls]);
+    const controlPrefixCls = React.useMemo(() => `${prefixCls}-control`, [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))));
+});
+Checkbox.displayName = 'Checkbox';

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { CheckboxGroupConsumerProps } from './types';
+export declare const Context: React.Context<CheckboxGroupConsumerProps | null>;
+export declare function useCheckboxGroup(): CheckboxGroupConsumerProps | null;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const Context = React.createContext(null);
+export function useCheckboxGroup() {
+    return React.useContext(Context);
+}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { CheckboxGroupProps } from './types';
+export declare const Group: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Checkbox } from './Checkbox';
+import { Context } from './Context';
+export const Group = React.forwardRef((props, ref) => {
+    const { block, children, className, defaultValue, direction, options = [], size, stack, style, onChange, ...restProps } = props;
+    const [value, setValue] = React.useState(restProps.value || defaultValue || []);
+    const [registeredValues, setRegisteredValues] = React.useState([]);
+    const getOptions = React.useCallback(() => options?.map((option) => {
+        if (typeof option === 'string') {
+            return {
+                label: option,
+                value: option,
+            };
+        }
+        return option;
+    }), [options]);
+    const cancelValue = React.useCallback((val) => {
+        setRegisteredValues(prevValues => prevValues.filter(v => v !== val));
+    }, [registeredValues]);
+    const registerValue = React.useCallback((val) => {
+        setRegisteredValues(prevValues => [...prevValues, val]);
+    }, [registeredValues]);
+    const toggleOption = (option) => {
+        const optionIndex = value.indexOf(option.value);
+        const newValue = [...value];
+        if (optionIndex === -1) {
+            newValue.push(option.value);
+        }
+        else {
+            newValue.splice(optionIndex, 1);
+        }
+        if (!('value' in restProps)) {
+            setValue(newValue);
+        }
+        const opts = getOptions();
+        onChange?.(newValue.filter(val => registeredValues.indexOf(val) !== -1)
+            .sort((a, b) => {
+            const indexA = opts.findIndex(opt => opt.value === a);
+            const indexB = opts.findIndex(opt => opt.value === b);
+            return indexA - indexB;
+        }));
+    };
+    React.useEffect(() => {
+        if ('value' in restProps) {
+            setValue(restProps.value || []);
+        }
+    }, [restProps.value]);
+    const checkboxGroupClasses = React.useMemo(() => classNames('uk-checkbox-group', {
+        'uk-checkbox-group-rtl': direction === 'rtl',
+        'uk-checkbox-group-stack': stack,
+    }, className), [direction, stack]);
+    const context = React.useMemo(() => ({
+        cancelValue,
+        disabled: restProps.disabled,
+        name: restProps.name,
+        registerValue,
+        toggleOption,
+        value,
+    }), [
+        cancelValue,
+        restProps.disabled,
+        restProps.name,
+        registerValue,
+        toggleOption,
+        value,
+    ]);
+    return (React.createElement("div", { className: checkboxGroupClasses, style: style, ...restProps, ref: ref },
+        React.createElement(Context.Provider, { value: context }, options?.length > 0 ? getOptions().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: "uk-checkbox-group-item", style: option.style, onChange: option.onChange }, option.label))) : children)));
+});
+Group.displayName = 'Checkbox.Group';

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Group } from './Group';
+import type { CheckboxProps } from './types';
+import './index.scss';
+export * from './types';
+export interface CompoundedCheckbox extends React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> {
+    Group: typeof Group;
+}
+export declare const Checkbox: CompoundedCheckbox;

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

@@ -0,0 +1,6 @@
+import { Checkbox as InternalCheckbox } from './Checkbox';
+import { Group } from './Group';
+import './index.scss';
+export * from './types';
+export const Checkbox = InternalCheckbox;
+Checkbox.Group = Group;