@broxus/react-uikit 0.1.3 → 0.2.1

package/dist/esm/styles/variables.scss

@@ -75,7 +75,7 @@ $global-default-background:                     #e5e5e5 !default;
 $global-muted-background:                       #f8f8f8 !default;
 $global-primary-background:                     #1e87f0 !default;
 $global-secondary-background:                   #222 !default;
-$global-tertiary-background:                    #c16635 !default;
+$global-tertiary-background:                    #b8b8b8 !default;
 $global-success-background:                     #1cb57c !default;
 $global-warning-background:                     #ffbc60 !default;
 $global-danger-background:                      #f5604b !default;
@@ -86,7 +86,7 @@ $global-danger-background:                      #f5604b !default;
 
 $global-border-width:                           1px !default;
 $global-border-style:                           solid !default;
-$global-border:                                 $global-default-background !default;
+$global-border:                                 darken($global-default-background, 3%) !default;
 $global-muted-border:                           $global-muted-background !default;
 $global-primary-border:                         $global-primary-background !default;
 $global-secondary-border:                       $global-secondary-background !default;
@@ -199,9 +199,9 @@ $alert-danger-color:                            $global-danger-background !defau
 // Align
 // ========================================================================
 
-$align-margin-horizontal: $global-gutter !default;
-$align-margin-vertical: $global-gutter !default;
-$align-margin-horizontal-l: $global-medium-gutter !default;
+$align-margin-horizontal:                       $global-gutter !default;
+$align-margin-vertical:                         $global-gutter !default;
+$align-margin-horizontal-l:                     $global-medium-gutter !default;
 
 
 // Animation
@@ -857,6 +857,7 @@ $checkbox-focus-border:                         $global-primary-border !default;
 $checkbox-checked-background:                   $global-primary-background !default;
 $checkbox-checked-border:                       $global-primary-border !default;
 $checkbox-checked-icon-color:                   $global-inverse-color !default;
+$checkbox-control-background:                   rgba($control-background, 45%) !default;
 $checkbox-checked-control-background:           rgba($checkbox-checked-background, 15%) !default;
 $checkbox-checked-control-color:                $global-primary-background !default;
 $checkbox-checked-control-padding:              10px !default;
@@ -879,6 +880,7 @@ $radio-focus-border:                            $control-focus-border !default;
 $radio-checked-background:                      transparent !default;
 $radio-checked-border:                          $global-primary-border !default;
 $radio-checked-icon-color:                      $global-primary-background !default;
+$radio-control-background:                      rgba($control-background, 45%) !default;
 $radio-checked-control-background:              rgba($radio-checked-icon-color, 15%) !default;
 $radio-checked-control-color:                   $global-primary-background !default;
 $radio-disabled-background:                     $control-disabled-background !default;
@@ -1248,6 +1250,8 @@ $nav-header-padding-horizontal:                 $nav-item-padding-horizontal !de
 $nav-header-font-size:                          $global-small-font-size !default;
 $nav-header-text-transform:                     uppercase !default;
 $nav-header-margin-top:                         $global-margin !default;
+$nav-divider-border-width:                      $global-border-width !default;
+$nav-divider-border:                            $global-border !default;
 $nav-divider-margin-vertical:                   5px !default;
 $nav-divider-margin-horizontal:                 0 !default;
 $nav-default-item-color:                        $global-muted-color !default;

package/dist/esm/types.d.ts

@@ -1,4 +1,4 @@
-export declare type BreakpointsConfig<T> = {
+export type BreakpointsConfig<T> = {
     default?: T;
     xs?: T;
     s?: T;
@@ -6,5 +6,17 @@ export declare type BreakpointsConfig<T> = {
     l?: T;
     xl?: T;
 };
-export declare type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export declare type Direction = 'ltr' | 'rtl';
+export type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type Direction = 'ltr' | 'rtl';
+export type TooltipOptions = {
+    animation?: string;
+    cls?: string;
+    delay?: number;
+    duration?: number;
+    offset?: boolean | number;
+    pos?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    title?: string;
+};
+export type TooltipProps = {
+    tooltip?: string | TooltipOptions;
+};

package/dist/esm/utils/get-breakpoints-config-classes.d.ts

@@ -1,2 +1,2 @@
-import { BreakpointsConfig } from '../types';
+import { type BreakpointsConfig } from '../types';
 export declare function getBreakpointsConfigClasses<E>(prefixCls: string, coreCls: string, config?: BreakpointsConfig<E>): string[];

package/dist/esm/utils/get-breakpoints-config-classes.js

@@ -1,3 +1,3 @@
 export function getBreakpointsConfigClasses(prefixCls, coreCls, config = {}) {
-    return Object.entries(config).map(([key, value]) => (value ? `${prefixCls}-${coreCls}-${value}${key !== 'default' ? `@${key}` : ''}` : ''));
+    return Object.entries(config).map(([key, value]) => value ? `${prefixCls}-${coreCls}-${value}${key !== 'default' ? `@${key}` : ''}` : '');
 }

package/dist/esm/utils/index.d.ts

@@ -1,4 +1,3 @@
-export * from './hooks';
-export * from './get-breakpoints-config-classes';
-export * from './modal';
-export * from './motion';
+export * from '../utils/get-breakpoints-config-classes';
+export * from '../utils/modal';
+export * from '../utils/motion';

package/dist/esm/utils/index.js

@@ -1,4 +1,3 @@
-export * from './hooks';
-export * from './get-breakpoints-config-classes';
-export * from './modal';
-export * from './motion';
+export * from '../utils/get-breakpoints-config-classes';
+export * from '../utils/modal';
+export * from '../utils/motion';

package/dist/esm/utils/motion.d.ts

@@ -1,3 +1,3 @@
-import { CSSMotionProps } from 'rc-motion';
-export declare const collapseMotion: CSSMotionProps;
-export declare const getTransitionName: (rootPrefixCls: string, motion: string, transitionName?: string) => string;
+import { type CSSMotionProps } from 'rc-motion';
+export declare function getMotionName(prefixCls: string, motion: string, transitionName?: string): string;
+export declare function getCollapseMotion(prefixCls: string): CSSMotionProps;

package/dist/esm/utils/motion.js

@@ -1,25 +1,26 @@
 const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
 const getRealHeight = node => ({ height: node.scrollHeight, opacity: 1 });
 const getCurrentHeight = node => ({ height: node ? node.offsetHeight : 0 });
-const skipOpacityTransition = (_, event) => (event?.deadline === true
-    || event.propertyName === 'height');
-export const collapseMotion = {
-    leavedClassName: 'uk-hidden',
-    motionDeadline: 300,
-    motionName: 'uk-motion-collapse',
-    onAppearActive: getRealHeight,
-    onAppearEnd: skipOpacityTransition,
-    onAppearStart: getCollapsedHeight,
-    onEnterActive: getRealHeight,
-    onEnterEnd: skipOpacityTransition,
-    onEnterStart: getCollapsedHeight,
-    onLeaveActive: getCollapsedHeight,
-    onLeaveEnd: skipOpacityTransition,
-    onLeaveStart: getCurrentHeight,
-};
-export const getTransitionName = (rootPrefixCls, motion, transitionName) => {
+const skipOpacityTransition = (_, event) => event?.deadline === true || event.propertyName === 'height';
+export function getMotionName(prefixCls, motion, transitionName) {
     if (transitionName !== undefined) {
         return transitionName;
     }
-    return `${rootPrefixCls}-${motion}`;
-};
+    return `${prefixCls}-motion-${motion}`;
+}
+export function getCollapseMotion(prefixCls) {
+    return {
+        leavedClassName: `${prefixCls}-hidden`,
+        motionDeadline: 300,
+        motionName: getMotionName(prefixCls, 'collapse'),
+        onAppearActive: getRealHeight,
+        onAppearEnd: skipOpacityTransition,
+        onAppearStart: getCollapsedHeight,
+        onEnterActive: getRealHeight,
+        onEnterEnd: skipOpacityTransition,
+        onEnterStart: getCollapsedHeight,
+        onLeaveActive: getCollapsedHeight,
+        onLeaveEnd: skipOpacityTransition,
+        onLeaveStart: getCurrentHeight,
+    };
+}

package/package.json

@@ -1,30 +1,31 @@
 {
     "name": "@broxus/react-uikit",
-    "version": "0.1.3",
-    "description": "Broxus React UIkit library",
-    "license": "GNU GPL v3.0",
-    "author": {
-        "name": "Denis Klimov",
-        "url": "https://github.com/JeremiahGeronimo"
-    },
-    "contributors": [
+    "version": "0.2.1",
+    "description": "React-based UIkit library",
+    "license": "AGPL-3.0",
+    "keywords": ["uikit", "ui", "react", "components"],
+    "maintainers": [
         {
             "name": "Denis Klimov",
             "url": "https://github.com/JeremiahGeronimo"
         }
     ],
+    "publishConfig": {
+        "access": "public"
+    },
     "exports": {
         ".": {
             "import": "./dist/esm/index.js",
             "require": "./dist/cjs/index.js"
         },
-        "./styles": "./dist/esm/styles",
+        "./styles/*.scss": "./dist/esm/styles/*.scss",
         "./package.json": "./package.json"
     },
     "files": [
         "dist",
         "LICENSE",
-        "README.md"
+        "README.md",
+        "!**/*.tsbuildinfo"
     ],
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -34,37 +35,39 @@
         "npm": ">=8"
     },
     "scripts": {
-        "build": "npx yarn build:cjs & npx yarn build:esm & npx yarn styles:cjs:copy & npx yarn styles:esm:copy",
-        "build:cjs": "tsc --project tsconfig.json --module CommonJS --outDir dist/cjs",
-        "build:esm": "tsc --project tsconfig.json --module ES2015 --outDir dist/esm",
-        "build:watch": "npx yarn build:esm -w --preserveWatchOutput",
-        "styles:cjs:copy": "copyfiles \"src/**/*.scss\" -u 1 dist/cjs",
-        "styles:esm:copy": "copyfiles \"src/**/*.scss\" -u 1 dist/esm",
-        "styles:watch": "chokidar \"src/**/*.scss\" -c \"npx yarn styles:esm:copy\"",
-        "dev": "npx yarn build:watch & npx yarn styles:watch",
-        "cleanup": "rimraf dist",
-        "prepublish": "npx yarn cleanup & npx yarn build"
+        "build": "npx yarn build:js && npx yarn styles:copy",
+        "build:js": "npx yarn build:cjs & npx yarn build:esm",
+        "build:cjs": "tsc -p tsconfig.cjs.json && tsc-alias -p tsconfig.cjs.json",
+        "build:esm": "tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json",
+        "styles:copy": "npx yarn styles:cjs:copy && npx yarn styles:esm:copy",
+        "styles:cjs:copy": "npx copyfiles \"src/**/*.scss\" -u 1 dist/cjs",
+        "styles:esm:copy": "npx copyfiles \"src/**/*.scss\" -u 1 dist/esm",
+        "watch:js": "tsc -p tsconfig.esm.json & (concurrently \"tsc -p tsconfig.esm.json -w\" \"tsc-alias -p tsconfig.esm.json -w\")",
+        "watch:styles": "npx chokidar \"src/**/*.scss\" -c \"npx yarn styles:esm:copy\"",
+        "dev": "npx yarn watch:js & npx yarn watch:styles",
+        "cleanup": "npx rimraf dist",
+        "prepare": "npx yarn cleanup && npx yarn build"
     },
     "dependencies": {
-        "@broxus/js-utils": "^1.0.2",
-        "classnames": "^2.3.0",
-        "rc-checkbox": "^2.3.2",
-        "rc-collapse": "^3.3.1",
-        "rc-dialog": "^8.9.0",
-        "rc-drawer": "^4.4.3",
+        "@broxus/js-utils": "^1.1.0",
+        "classnames": "^2.3.2",
+        "rc-collapse": "^3.5.2",
+        "rc-dialog": "^9.1.0",
+        "rc-drawer": "^6.1.5",
         "rc-dropdown": "^4.0.1",
-        "rc-input-number": "^7.3.6",
-        "rc-motion": "^2.6.2",
-        "rc-overflow": "^1.2.8",
-        "rc-select": "^14.1.9",
-        "rc-tabs": "^11.16.1",
-        "rc-textarea": "^0.3.7",
-        "rc-trigger": "^5.3.1",
-        "rc-util": "^5.23.0",
+        "rc-input-number": "^7.4.2",
+        "rc-motion": "^2.6.3",
+        "rc-overflow": "^1.3.0",
+        "rc-select": "^14.4.0",
+        "rc-tabs": "^12.5.10",
+        "rc-textarea": "^1.2.1",
+        "rc-trigger": "^5.3.4",
+        "rc-util": "^5.29.2",
         "shallowequal": "^1.1.0",
-        "uikit": "^3.15.1"
+        "uikit": "^3.16.11"
     },
     "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     }
 }

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

@@ -1,8 +0,0 @@
-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/Control/Checkbox/Context.d.ts

@@ -1,4 +0,0 @@
-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/Radio/Context.d.ts

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

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

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import type { AbstractCheckboxGroupProps, AbstractCheckboxProps } from '../Checkbox';
-export declare type RadioProps = AbstractCheckboxProps<RadioChangeEvent>;
-export interface RadioChangeEventTarget extends RadioProps {
-    checked: boolean;
-}
-export interface RadioChangeEvent {
-    nativeEvent: MouseEvent;
-    target: RadioChangeEventTarget;
-    preventDefault(): void;
-    stopPropagation(): void;
-}
-export interface RadioGroupProps extends AbstractCheckboxGroupProps {
-    defaultValue?: any;
-    value?: any;
-    onChange?: (event: RadioChangeEvent) => void;
-    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-}
-export interface RadioGroupConsumerProps {
-    disabled?: boolean;
-    name?: string;
-    value?: any;
-    onChange: (event: RadioChangeEvent) => void;
-}

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

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

package/dist/cjs/components/Nav/Group.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export interface NavItemGroupProps {
-    className?: string;
-    title?: React.ReactNode;
-    children?: React.ReactNode;
-    /** @private Internal filled key. Do not set it directly */
-    eventKey?: string;
-    /** @private Do not use. Private warning empty usage */
-    warnKey?: boolean;
-}
-export declare function Group({ children, ...props }: NavItemGroupProps): JSX.Element;
-export declare namespace Group {
-    var displayName: string;
-}

package/dist/cjs/utils/hooks/index.d.ts

@@ -1 +0,0 @@
-export * from './useForceUpdate';

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

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

@@ -1,3 +0,0 @@
-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/Control/Checkbox/Context.d.ts

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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import type { AbstractCheckboxGroupProps, AbstractCheckboxProps } from '../Checkbox';
-export declare type RadioProps = AbstractCheckboxProps<RadioChangeEvent>;
-export interface RadioChangeEventTarget extends RadioProps {
-    checked: boolean;
-}
-export interface RadioChangeEvent {
-    nativeEvent: MouseEvent;
-    target: RadioChangeEventTarget;
-    preventDefault(): void;
-    stopPropagation(): void;
-}
-export interface RadioGroupProps extends AbstractCheckboxGroupProps {
-    defaultValue?: any;
-    value?: any;
-    onChange?: (event: RadioChangeEvent) => void;
-    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-}
-export interface RadioGroupConsumerProps {
-    disabled?: boolean;
-    name?: string;
-    value?: any;
-    onChange: (event: RadioChangeEvent) => void;
-}

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export interface NavItemGroupProps {
-    className?: string;
-    title?: React.ReactNode;
-    children?: React.ReactNode;
-    /** @private Internal filled key. Do not set it directly */
-    eventKey?: string;
-    /** @private Do not use. Private warning empty usage */
-    warnKey?: boolean;
-}
-export declare function Group({ children, ...props }: NavItemGroupProps): JSX.Element;
-export declare namespace Group {
-    var displayName: string;
-}

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import omit from 'rc-util/lib/omit';
-import { parseChildren } from './utils/nodeUtil';
-import { NavContext } from './context/NavContext';
-import { useFullPath, useMeasure } from './context/PathContext';
-function InternalNavItemGroup({ children, className, title, ...props }) {
-    const { prefixCls } = React.useContext(NavContext);
-    const groupPrefixCls = `${prefixCls}-group`;
-    return (React.createElement("li", { className: classNames(groupPrefixCls, className), ...props, onClick: e => e.stopPropagation() },
-        React.createElement("div", { className: `${groupPrefixCls}-header`, title: typeof title === 'string' ? title : undefined }, title),
-        React.createElement("ul", { className: "uk-nav-sub" }, children)));
-}
-// eslint-disable-next-line react/no-multi-comp
-export function Group({ children, ...props }) {
-    const connectedKeyPath = useFullPath(props.eventKey);
-    const childList = parseChildren(children, connectedKeyPath);
-    const measure = useMeasure();
-    if (measure) {
-        return childList;
-    }
-    return (React.createElement(InternalNavItemGroup, { ...omit(props, ['warnKey']) }, childList));
-}
-if (process.env.NODE_ENV !== 'production') {
-    Group.displayName = 'Nav.Group';
-}

package/dist/esm/utils/hooks/index.d.ts

@@ -1 +0,0 @@
-export * from './useForceUpdate';

package/dist/esm/utils/hooks/index.js

@@ -1 +0,0 @@
-export * from './useForceUpdate';