@broxus/react-uikit 0.1.3 → 0.2.1

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,64 @@ 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);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [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);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [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>>>;

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

@@ -1,9 +1,11 @@
 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;
+import { useConfig } from '../../ConfrigProvider';
+import { Checkbox } from '../../Control/Checkbox/Checkbox';
+import { CheckboxGroupContext, } from '../../Control/Checkbox/CheckboxGroupContext';
+const ForwardedGroup = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const { block, children, className, defaultValue, direction = config.direction, options = [], prefixCls = config.prefixCls, size, stack, style, onChange, ...restProps } = props;
     const [value, setValue] = React.useState(restProps.value || defaultValue || []);
     const [registeredValues, setRegisteredValues] = React.useState([]);
     const getOptions = React.useCallback(() => options?.map((option) => {
@@ -17,11 +19,11 @@ export const Group = React.forwardRef((props, ref) => {
     }), [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 toggleOption = React.useCallback((option) => {
         const optionIndex = value.indexOf(option.value);
         const newValue = [...value];
         if (optionIndex === -1) {
@@ -34,22 +36,19 @@ export const Group = React.forwardRef((props, ref) => {
             setValue(newValue);
         }
         const opts = getOptions();
-        onChange?.(newValue.filter(val => registeredValues.indexOf(val) !== -1)
+        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]);
+    }, [getOptions, onChange, registeredValues, restProps, value]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'checkbox-group'), [config, prefixCls]);
+    const checkboxGroupClasses = React.useMemo(() => classNames(rootCls, {
+        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${rootCls}-stack`]: stack,
+    }, className), [className, direction, rootCls, stack]);
     const context = React.useMemo(() => ({
         cancelValue,
         disabled: restProps.disabled,
@@ -57,15 +56,19 @@ export const Group = React.forwardRef((props, ref) => {
         registerValue,
         toggleOption,
         value,
-    }), [
-        cancelValue,
-        restProps.disabled,
-        restProps.name,
-        registerValue,
-        toggleOption,
-        value,
-    ]);
+    }), [cancelValue, restProps.disabled, restProps.name, registerValue, toggleOption, value]);
+    React.useEffect(() => {
+        if ('value' in restProps) {
+            setValue(restProps.value || []);
+        }
+    }, [restProps, restProps.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)));
+        React.createElement(CheckboxGroupContext.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: `${rootCls}-item`, style: option.style, onChange: option.onChange }, option.label)))
+            : children)));
 });
-Group.displayName = 'Checkbox.Group';
+export const Group = React.memo(ForwardedGroup);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedGroup.displayName = 'Checkbox.Group.Forwarded';
+    Group.displayName = 'Checkbox.Group';
+}

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

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

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

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

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

@@ -21,6 +21,11 @@
     display: flex;
     line-height: unset;
     user-select: none;
+
+    &.uk-control {
+        background-color: var(--checkbox-control-background);
+    }
+
     @if mixin-exists(hook-checkbox-wrapper) {
         @include hook-checkbox-wrapper;
     }
@@ -28,7 +33,6 @@
 
 .uk-checkbox-wrapper .uk-checkbox {
     border: 0;
-    border-radius: var(--checkbox-border-radius);
     display: inline-block;
     height: var(--checkbox-size);
     line-height: 1;
@@ -48,16 +52,13 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    bottom: 0;
     cursor: pointer;
     height: 100%;
-    left: 0;
+    inset: 0;
     margin: 0;
     opacity: 0;
     outline: none;
     position: absolute;
-    right: 0;
-    top: 0;
     width: 100%;
     z-index: 1;
     @if mixin-exists(hook-checkbox-input) {
@@ -66,7 +67,7 @@
 }
 
 .uk-checkbox-wrapper .uk-checkbox-inner {
-    background-color: transparent;
+    background-color: var(--checkbox-background);
     border: var(--checkbox-border-width) solid var(--checkbox-border);
     border-collapse: separate;
     border-radius: var(--checkbox-border-radius);
@@ -102,9 +103,11 @@
 }
 
 .uk-checkbox-wrapper .uk-checkbox-label {
+    line-height: var(--checkbox-size);
     max-width: 100%;
     overflow: hidden;
     padding-left: var(--control-affix-margin);
+    text-overflow: ellipsis;
     @if mixin-exists(hook-checkbox-label) {
         @include hook-checkbox-label;
     }
@@ -279,8 +282,11 @@
 /* Right to Left Direction
  ========================================================================== */
 
-[dir='rtl'] .uk-checkbox-wrapper .uk-checkbox-label,
-.uk-checkbox-wrapper.uk-checkbox-rtl .uk-checkbox-label {
+.uk-checkbox-rtl {
+    flex-direction: row-reverse;
+}
+
+.uk-checkbox-rtl .uk-checkbox-label {
     padding-left: 0;
     padding-right: var(--control-affix-margin);
 }
@@ -305,6 +311,7 @@
     --checkbox-checked-background: var(--global-primary-background);
     --checkbox-checked-border: var(--global-primary-border);
     --checkbox-checked-icon-color: var(--global-inverse-color);
+    --checkbox-control-background: #{$checkbox-control-background};
     --checkbox-checked-control-background: #{$checkbox-checked-control-background};
     --checkbox-checked-control-color: #{$checkbox-checked-control-color};
     --checkbox-checked-control-padding: #{$checkbox-checked-control-padding};

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

@@ -1,73 +1,10 @@
-import * as React from 'react';
-import type { SizeType } from '../types';
-export declare type CheckboxValueType = string | number | boolean;
-export interface AbstractCheckboxProps<T> {
-    autoFocus?: boolean;
+import type * as React from 'react';
+import { type SizeType } from '../../Control/types';
+export interface AbstractCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onMouseEnter' | 'onMouseLeave'> {
     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;
 }