@broxus/react-uikit 0.1.1 → 0.1.2

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const Badge_1 = require("./Badge");
+const Body_1 = require("./Body");
+const Card_1 = require("./Card");
+const Footer_1 = require("./Footer");
+const Header_1 = require("./Header");
+const Media_1 = require("./Media");
+const Title_1 = require("./Title");
+require("./index.scss");
+exports.Card = Card_1.Card;
+exports.Card.Badge = Badge_1.Badge;
+exports.Card.Body = Body_1.Body;
+exports.Card.Footer = Footer_1.Footer;
+exports.Card.Header = Header_1.Header;
+exports.Card.Media = Media_1.Media;
+exports.Card.Title = Title_1.Title;

package/dist/cjs/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/cjs/components/Close/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Close = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+const Icon_1 = require("../Icon");
+const defaultElement = 'button';
+function Close(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = `${config.prefixCls}-close`, ...restProps } = props;
+    return (React.createElement(Icon_1.Icon, { "aria-hidden": "false", className: (0, classnames_1.default)(prefixCls, className), component: defaultElement, tabIndex: -1, ...restProps, icon: "close" }));
+}
+exports.Close = Close;

package/dist/cjs/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/cjs/components/Component/Component.js

@@ -0,0 +1,29 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Component = void 0;
+const React = __importStar(require("react"));
+const defaultElement = 'div';
+exports.Component = React.forwardRef(({ component: El = defaultElement, ...props }, ref) => React.createElement(El, { ref: ref, ...props }));

package/dist/cjs/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/cjs/components/Component/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Component = void 0;
+var Component_1 = require("./Component");
+Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return Component_1.Component; } });

package/dist/cjs/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/cjs/components/ConfrigProvider/index.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigContextProvider = exports.useConfig = exports.ConfigContext = void 0;
+const React = __importStar(require("react"));
+exports.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',
+});
+function useConfig() {
+    return React.useContext(exports.ConfigContext);
+}
+exports.useConfig = useConfig;
+function ConfigContextProvider(props) {
+    const { children, ...restProps } = props;
+    const context = React.useMemo(() => ({
+        ...useConfig(),
+        direction: document.dir,
+        ...restProps,
+    }), [restProps]);
+    return (React.createElement(exports.ConfigContext.Provider, { value: context }, children));
+}
+exports.ConfigContextProvider = ConfigContextProvider;

package/dist/cjs/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/cjs/components/Container/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+require("./index.scss");
+const defaultElement = 'div';
+function Container(props) {
+    const { className, expandLeft, expandRight, size, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-container', {
+            [`uk-container-${size}`]: size !== undefined,
+            'uk-container-expand-left': expandLeft,
+            'uk-container-expand-right': expandRight,
+        }, className), component: defaultElement, ...restProps }));
+}
+exports.Container = Container;

package/dist/cjs/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/cjs/components/Control/Checkbox/Checkbox.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const rc_checkbox_1 = __importDefault(require("rc-checkbox"));
+const ConfrigProvider_1 = require("../../ConfrigProvider");
+const Context_1 = require("./Context");
+exports.Checkbox = React.forwardRef((props, ref) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const checkboxGroup = (0, Context_1.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(() => (0, classnames_1.default)({
+        [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(() => (0, classnames_1.default)({
+        [`${rootPrefixCls}-indeterminate`]: checkboxProps.indeterminate,
+    }), [checkboxProps.indeterminate, rootPrefixCls]);
+    return (React.createElement("label", { className: wrapperClasses, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+        React.createElement(rc_checkbox_1.default, { ...checkboxProps, prefixCls: rootPrefixCls, className: checkboxClasses, 
+            // @ts-ignore
+            ref: ref }),
+        children !== undefined && (React.createElement("span", { className: `${rootPrefixCls}-label` }, children))));
+});
+exports.Checkbox.displayName = 'Checkbox';

package/dist/cjs/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/cjs/components/Control/Checkbox/Context.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCheckboxGroup = exports.Context = void 0;
+const React = __importStar(require("react"));
+exports.Context = React.createContext(null);
+function useCheckboxGroup() {
+    return React.useContext(exports.Context);
+}
+exports.useCheckboxGroup = useCheckboxGroup;

package/dist/cjs/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/cjs/components/Control/Checkbox/Group.js

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Group = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Checkbox_1 = require("./Checkbox");
+const Context_1 = require("./Context");
+exports.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(() => (0, classnames_1.default)('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_1.Context.Provider, { value: context }, options?.length > 0 ? getOptions().map(option => (React.createElement(Checkbox_1.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)));
+});
+exports.Group.displayName = 'Checkbox.Group';

package/dist/cjs/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/cjs/components/Control/Checkbox/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const Checkbox_1 = require("./Checkbox");
+const Group_1 = require("./Group");
+require("./index.scss");
+__exportStar(require("./types"), exports);
+exports.Checkbox = Checkbox_1.Checkbox;
+exports.Checkbox.Group = Group_1.Group;

package/dist/cjs/components/Control/Checkbox/types.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import type { SizeType } from '../types';
+export declare type CheckboxValueType = string | number | boolean;
+export interface AbstractCheckboxProps<T> {
+    autoFocus?: boolean;
+    block?: boolean;
+    checked?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    direction?: string;
+    id?: string;
+    name?: string;
+    prefixCls?: string;
+    size?: SizeType;
+    skipGroup?: boolean;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    type?: string;
+    value?: any;
+    onChange?: (event: T) => void;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+}
+export interface CheckboxProps extends AbstractCheckboxProps<CheckboxChangeEvent> {
+    indeterminate?: boolean;
+}
+export interface CheckboxChangeEventTarget extends CheckboxProps {
+    checked: boolean;
+}
+export interface CheckboxChangeEvent {
+    nativeEvent: MouseEvent;
+    target: CheckboxChangeEventTarget;
+    preventDefault(): void;
+    stopPropagation(): void;
+}
+export interface CheckboxGroupConsumerProps {
+    disabled?: boolean;
+    name?: string;
+    value?: any;
+    cancelValue: (value: string) => void;
+    registerValue: (value: string) => void;
+    toggleOption?: (option: CheckboxOptionType) => void;
+}
+export interface AbstractCheckboxGroupProps {
+    block?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    direction?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    options?: CheckboxOptionType[] | string[];
+    size?: SizeType;
+    stack?: boolean;
+    style?: React.CSSProperties;
+}
+export interface CheckboxGroupProps extends AbstractCheckboxGroupProps {
+    defaultValue?: CheckboxValueType[];
+    value?: CheckboxValueType[];
+    onChange?: (checkedValue: CheckboxValueType[]) => void;
+}
+export interface CheckboxOptionType {
+    disabled?: boolean;
+    label: React.ReactNode;
+    value: CheckboxValueType;
+    style?: React.CSSProperties;
+    onChange?: (event: CheckboxChangeEvent) => void;
+}

package/dist/cjs/components/Control/Checkbox/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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