@broxus/react-uikit 0.22.0 → 0.23.0

package/styles/variables.scss

@@ -207,7 +207,8 @@ $transition-slow-duration:                                      0.7s !default;
 // Accordion
 // ========================================================================
 
-$accordion-item-margin-top:                                     $global-margin !default;
+$accordion-gutter:                                              $global-margin !default;
+$accordion-header-color:                                        $global-emphasis-color !default;
 $accordion-title-font-size:                                     $global-medium-font-size !default;
 $accordion-title-line-height:                                   1.4 !default;
 $accordion-title-color:                                         $global-emphasis-color !default;
@@ -364,7 +365,7 @@ $base-pre-color:                                                $global-color !d
 $base-focus-outline-width:                                      2px !default;
 $base-focus-outline-style:                                      dotted !default;
 $base-focus-outline:                                            $global-emphasis-color !default;
-$base-focus-outline-offset:                                     1px !default;
+$base-focus-outline-offset:                                     -2px !default;
 $base-selection-background:                                     #39f !default;
 $base-selection-color:                                          $global-inverse-color !default;
 
@@ -745,6 +746,7 @@ $inverse-control-focus-border:                                  $inverse-control
 $inverse-control-focus-color:                                   $inverse-global-color !default;
 $inverse-control-disabled-background:                           color.scale($inverse-global-muted-background, $lightness: -30%) !default;
 $inverse-control-disabled-border:                               color.scale($inverse-control-border, $lightness: -4%) !default;
+$inverse-control-disabled-color:                                $inverse-global-color !default;
 $inverse-control-placeholder-color:                             $inverse-global-muted-color !default;
 $inverse-control-icon-color:                                    $inverse-global-muted-color !default;
 $inverse-control-icon-hover-color:                              $inverse-global-color !default;
@@ -795,6 +797,7 @@ $countdown-separator-font-size-m:                               3rem !default; /
 $datepicker-border:                                             $control-border !default;
 $datepicker-border-style:                                       $control-border-style !default;
 $datepicker-border-width:                                       $control-border-width !default;
+$datepicker-gutter:                                             $global-small-gutter !default;
 $datepicker-height:                                             $control-height - $datepicker-border-width * 2 !default;
 $datepicker-small-height:                                       $control-small-height - $datepicker-border-width * 2 !default;
 $datepicker-medium-height:                                      $control-medium-height - $datepicker-border-width * 2 !default;
@@ -1098,7 +1101,7 @@ $inverse-label-color:                                           $inverse-global-
 // Leader
 // ========================================================================
 
-$leader-fill-content:                                           '.' !default;
+$leader-fill-content:                                           '"."' !default;
 $leader-fill-margin-left:                                       $global-small-gutter !default;
 
 
@@ -1297,41 +1300,48 @@ $inverse-nav-primary-sublist-item-active-color:                 $inverse-global-
 // Navbar
 // ========================================================================
 
+$navbar-color-mode:                                             dark !default;
 $navbar-background:                                             $global-muted-background !default;
-$navbar-color-mode:                                             none !default;
+$navbar-gap:                                                    20px !default; // Must have a unit because of `calc`
+$navbar-nav-gap:                                                20px !default; // Must have a unit because of `calc`
+$navbar-gap-m:                                                  30px !default;
+$navbar-nav-gap-m:                                              30px !default;
 $navbar-nav-item-height:                                        80px !default;
-$navbar-nav-item-padding-horizontal:                            15px !default;
+$navbar-nav-item-padding-horizontal:                            10px !default;
+$navbar-nav-item-padding-horizontal-m:                          $navbar-nav-item-padding-horizontal * 1.5 !default;
 $navbar-nav-item-color:                                         $global-muted-color !default;
 $navbar-nav-item-font-size:                                     $global-font-size !default;
 $navbar-nav-item-font-family:                                   $global-font-family !default;
 $navbar-nav-item-hover-color:                                   $global-color !default;
 $navbar-nav-item-onclick-color:                                 $global-emphasis-color !default;
 $navbar-nav-item-active-color:                                  $global-emphasis-color !default;
+$navbar-parent-icon-margin-left:                                4px !default;
+$navbar-item-padding-horizontal:                                0 !default;
+$navbar-item-padding-horizontal-m:                              $navbar-item-padding-horizontal * 1.5 !default;
 $navbar-item-color:                                             $global-color !default;
 $navbar-toggle-color:                                           $global-muted-color !default;
 $navbar-toggle-hover-color:                                     $global-color !default;
 $navbar-subtitle-font-size:                                     $global-small-font-size !default;
-$navbar-dropdown-background:                                    $global-muted-background !default;
-$navbar-dropdown-color:                                         $global-color !default;
+$navbar-dropdown-color-mode:                                    dark !default;
 $navbar-dropdown-margin:                                        0 !default;
 $navbar-dropdown-padding:                                       15px !default;
 $navbar-dropdown-width:                                         200px !default;
+$navbar-dropdown-background:                                    $global-muted-background !default;
+$navbar-dropdown-color:                                         $global-color !default;
+$navbar-dropdown-focus-outline:                                 $base-focus-outline !default;
 $navbar-dropdown-z-index:                                       $global-z-index + 20 !default;
 $navbar-dropdown-grid-gutter-horizontal:                        $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical:                          $navbar-dropdown-grid-gutter-horizontal !default;
-$navbar-dropdown-dropbar-margin-top:                            0 !default;
-$navbar-dropdown-dropbar-margin-bottom:                         $navbar-dropdown-dropbar-margin-top !default;
 $navbar-dropdown-nav-item-color:                                $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color:                          $global-color !default;
 $navbar-dropdown-nav-item-active-color:                         $global-emphasis-color !default;
+$navbar-dropdown-nav-subtitle-font-size:                        $global-small-font-size !default;
 $navbar-dropdown-nav-header-color:                              $global-emphasis-color !default;
 $navbar-dropdown-nav-divider-border-width:                      $global-border-width !default;
 $navbar-dropdown-nav-divider-border:                            $global-border !default;
 $navbar-dropdown-nav-sublist-item-color:                        $global-muted-color !default;
 $navbar-dropdown-nav-sublist-item-hover-color:                  $global-color !default;
 $navbar-dropdown-nav-sublist-item-active-color:                 $global-emphasis-color !default;
-$navbar-dropbar-background:                                     $navbar-dropdown-background !default;
-$navbar-dropbar-z-index:                                        $global-z-index - 20 !default;
 
 // Inverse
 $inverse-navbar-background:                                     $inverse-global-muted-background !default;
@@ -1350,7 +1360,6 @@ $inverse-navbar-dropdown-nav-header-color:                      $inverse-global-
 $inverse-navbar-dropdown-nav-divider-border:                    $inverse-global-border !default;
 $inverse-navbar-dropdown-nav-sublist-item-color:                $inverse-global-muted-color !default;
 $inverse-navbar-dropdown-nav-sublist-item-hover-color:          $inverse-global-color !default;
-$inverse-navbar-dropbar-background:                             $inverse-navbar-dropdown-background !default;
 
 
 // Overlay
@@ -1542,8 +1551,10 @@ $select-medium-gutter:                                          15px !default;
 $select-large-gutter:                                           12px !default;
 $select-content-padding-horizontal:                             $control-padding-horizontal !default;
 $select-content-padding-vertical:                               $select-gutter !default;
+$select-content-small-padding-horizontal:                       $control-small-padding-horizontal !default;
 $select-content-medium-padding-horizontal:                      $control-medium-padding-horizontal !default;
 $select-content-large-padding-horizontal:                       $control-large-padding-horizontal !default;
+$select-search-input-width:                                     4px !default;
 $select-search-input-color:                                     $control-color !default;
 $select-placeholder-color:                                      $control-placeholder-color !default;
 $select-selection-item-background:                              $global-background !default;
@@ -1569,6 +1580,7 @@ $select-item-disabled-color:                                    $control-disable
 $select-item-group-color:                                       $global-muted-color !default;
 $select-item-group-font-size:                                   $global-small-font-size !default;
 $select-item-group-text-transform:                              uppercase !default;
+$select-item-group-padding-horizontal:                          $select-gutter !default;
 
 
 // Slidenav
@@ -1726,6 +1738,8 @@ $tabs-margin-horizontal:                                        20px !default;
 $tabs-margin-vertical:                                          10px !default;
 $tabs-tab-padding-horizontal:                                   15px !default;
 $tabs-tab-padding-vertical:                                     10px !default;
+$tabs-medium-tab-padding-horizontal:                            20px !default;
+$tabs-medium-tab-padding-vertical:                              15px !default;
 $tabs-large-tab-padding-horizontal:                             25px !default;
 $tabs-large-tab-padding-vertical:                               20px !default;
 $tabs-tab-font-size:                                            $global-font-size !default;
@@ -1734,10 +1748,10 @@ $tabs-tab-hover-color:                                          $global-primary-
 $tabs-tab-active-color:                                         $global-primary-color !default;
 $tabs-tab-disabled-color:                                       $global-muted-color !default;
 $tabs-tab-remove-color:                                         $global-muted-color !default;
-$tabs-tab-remove-font-size:                                     $global-small-font-size !default;
+$tabs-tab-remove-font-size:                                     $global-font-size !default;
 $tabs-tab-remove-hover-color:                                   $global-danger-color !default;
 $tabs-tab-remove-active-color:                                  $global-danger-color !default;
-$tabs-nav-more-font-size:                                       $global-small-font-size !default;
+$tabs-nav-more-font-size:                                       $global-font-size !default;
 $tabs-ink-bar-color:                                            $global-primary-color !default;
 $tabs-ink-bar-height:                                           2px !default;
 $tabs-ink-bar-width:                                            2px !default;
@@ -1746,12 +1760,15 @@ $tabs-card-tab-border-width:                                    $global-border-w
 $tabs-card-tab-border-style:                                    $global-border-style !default;
 $tabs-card-tab-border:                                          $global-border !default;
 $tabs-card-tab-border-radius:                                   $global-border-radius !default;
-$tabs-card-tab-padding-horizontal:                              15px !default;
-$tabs-card-tab-padding-vertical:                                10px !default;
-$tabs-card-large-tab-padding-horizontal:                        25px !default;
-$tabs-card-large-tab-padding-vertical:                          20px !default;
-$tabs-card-tab-active-background:                               $global-background !default;
+$tabs-card-tab-padding-horizontal:                              $tabs-tab-padding-horizontal !default;
+$tabs-card-tab-padding-vertical:                                $tabs-tab-padding-vertical !default;
+$tabs-card-medium-tab-padding-horizontal:                       $tabs-medium-tab-padding-horizontal !default;
+$tabs-card-medium-tab-padding-vertical:                         $tabs-medium-tab-padding-vertical !default;
+$tabs-card-large-tab-padding-horizontal:                        $tabs-large-tab-padding-horizontal !default;
+$tabs-card-large-tab-padding-vertical:                          $tabs-large-tab-padding-vertical !default;
 $tabs-card-gutter:                                              $global-xsmall-gutter !default;
+$tabs-card-tab-active-background:                               $global-background !default;
+$tabs-card-tab-active-color:                                    $global-emphasis-color !default;
 $tabs-dropdown-background:                                      $dropdown-background !default;
 $tabs-dropdown-border-radius:                                   $global-border-radius !default;
 $tabs-dropdown-item-color:                                      $tabs-tab-color !default;

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { type NavItemGroupType } from '../../../components/Nav/types';
-export interface NavItemGroupProps extends Omit<NavItemGroupType, 'children' | 'type' | 'label'> {
-    children?: React.ReactNode;
-    /** @private Internal filled key. Do not set it directly */
-    eventKey?: string;
-    title?: React.ReactNode;
-    /** @private Do not use. Private warning empty usage */
-    warnKey?: boolean;
-}
-export declare function InternalNavItemGroup({ children, className, title, ...restProps }: NavItemGroupProps): React.JSX.Element;
-export declare namespace InternalNavItemGroup {
-    var displayName: string;
-}

package/dist/cjs/components/Nav/context/PrivateContext.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { type NavProps } from '../../../components/Nav/Nav';
-export interface PrivateContextProps {
-    _internalRenderMenuItem?: NavProps['_internalRenderMenuItem'];
-    _internalRenderSubMenuItem?: NavProps['_internalRenderSubMenuItem'];
-}
-export declare const PrivateContext: React.Context<PrivateContextProps>;

package/dist/cjs/components/Nav/hooks/useUUID.d.ts

@@ -1 +0,0 @@
-export declare function useUUID(id?: string): string | undefined;

package/dist/cjs/components/Nav/hooks/useUUID.js

@@ -1,56 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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.useUUID = useUUID;
-const useMergedState_1 = __importDefault(require("@rc-component/util/lib/hooks/useMergedState"));
-const React = __importStar(require("react"));
-const uniquePrefix = Math.random().toFixed(5).toString().slice(2);
-let internalId = 0;
-function useUUID(id) {
-    const [uuid, setUUID] = (0, useMergedState_1.default)(id, {
-        value: id,
-    });
-    React.useEffect(() => {
-        internalId += 1;
-        const newId = process.env.NODE_ENV === 'test'
-            ? 'test'
-            : `${uniquePrefix}-${internalId}`;
-        setUUID(`uk-nav-uuid-${newId}`);
-    }, [setUUID]);
-    return uuid;
-}

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { type NavItemGroupType } from '../../../components/Nav/types';
-export interface NavItemGroupProps extends Omit<NavItemGroupType, 'children' | 'type' | 'label'> {
-    children?: React.ReactNode;
-    /** @private Internal filled key. Do not set it directly */
-    eventKey?: string;
-    title?: React.ReactNode;
-    /** @private Do not use. Private warning empty usage */
-    warnKey?: boolean;
-}
-export declare function InternalNavItemGroup({ children, className, title, ...restProps }: NavItemGroupProps): React.JSX.Element;
-export declare namespace InternalNavItemGroup {
-    var displayName: string;
-}

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

@@ -1,16 +0,0 @@
-import { stopEventPropagate } from '@broxus/js-utils';
-import omit from '@rc-component/util/lib/omit';
-import classNames from 'classnames';
-import * as React from 'react';
-import { NavContext } from '../../../components/Nav/context/NavContext';
-export function InternalNavItemGroup({ children, className, title, ...restProps }) {
-    const { prefixCls } = React.useContext(NavContext);
-    const groupRootCls = React.useMemo(() => `${prefixCls}-group`, [prefixCls]);
-    const subRootCls = React.useMemo(() => `${prefixCls}-sub`, [prefixCls]);
-    return (React.createElement("li", { className: classNames(groupRootCls, className), role: "presentation", ...omit(restProps, ['eventKey', 'warnKey']), onClick: stopEventPropagate },
-        React.createElement("div", { className: `${groupRootCls}-header`, role: "presentation", title: typeof title === 'string' ? title : undefined }, title),
-        React.createElement("ul", { className: subRootCls, role: "group" }, children)));
-}
-if (process.env.NODE_ENV !== 'production') {
-    InternalNavItemGroup.displayName = 'Nav.InternalNavItemGroup';
-}

package/dist/esm/components/Nav/context/PrivateContext.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { type NavProps } from '../../../components/Nav/Nav';
-export interface PrivateContextProps {
-    _internalRenderMenuItem?: NavProps['_internalRenderMenuItem'];
-    _internalRenderSubMenuItem?: NavProps['_internalRenderSubMenuItem'];
-}
-export declare const PrivateContext: React.Context<PrivateContextProps>;

package/dist/esm/components/Nav/context/PrivateContext.js

@@ -1,6 +0,0 @@
-'use client';
-import * as React from 'react';
-export const PrivateContext = React.createContext({});
-if (process.env.NODE_ENV !== 'production') {
-    PrivateContext.displayName = 'Nav.PrivateContext';
-}

package/dist/esm/components/Nav/hooks/useUUID.d.ts

@@ -1 +0,0 @@
-export declare function useUUID(id?: string): string | undefined;

package/dist/esm/components/Nav/hooks/useUUID.js

@@ -1,17 +0,0 @@
-import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
-import * as React from 'react';
-const uniquePrefix = Math.random().toFixed(5).toString().slice(2);
-let internalId = 0;
-export function useUUID(id) {
-    const [uuid, setUUID] = useMergedState(id, {
-        value: id,
-    });
-    React.useEffect(() => {
-        internalId += 1;
-        const newId = process.env.NODE_ENV === 'test'
-            ? 'test'
-            : `${uniquePrefix}-${internalId}`;
-        setUUID(`uk-nav-uuid-${newId}`);
-    }, [setUUID]);
-    return uuid;
-}