@broxus/react-uikit 0.5.5 → 0.6.1

package/dist/esm/types.d.ts

@@ -1,9 +1,15 @@
 export type BreakpointsConfig<T> = {
+    /** Default value. Will be used for all sizes by default */
     default?: T;
+    /** Extra small size: Phone portrait: 480px by default */
     xs?: T;
+    /** Small size: Phone landscape: 640px by default */
     s?: T;
+    /** Medium size: Tablet Landscape: 960px by default */
     m?: T;
+    /** Large size: Desktop: 1200px by default */
     l?: T;
+    /** Extra large size: Large screens: 1600px by default */
     xl?: T;
 };
 export type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/package.json

@@ -1,9 +1,14 @@
 {
     "name": "@broxus/react-uikit",
-    "version": "0.5.5",
+    "version": "0.6.1",
     "description": "React-based UIkit library",
     "license": "AGPL-3.0",
-    "keywords": ["uikit", "ui", "react", "components"],
+    "keywords": [
+        "uikit",
+        "ui",
+        "react",
+        "components"
+    ],
     "maintainers": [
         {
             "name": "Denis Klimov",
@@ -53,24 +58,25 @@
     "dependencies": {
         "@broxus/js-utils": "^1.3.0",
         "classnames": "^2.3.2",
-        "rc-collapse": "^3.7.0",
-        "rc-dialog": "^9.1.0",
-        "rc-drawer": "^6.3.0",
+        "rc-collapse": "^3.7.1",
+        "rc-dialog": "^9.2.0",
+        "rc-drawer": "^6.4.1",
         "rc-dropdown": "^4.1.0",
-        "rc-input-number": "^8.0.1",
+        "rc-input-number": "^8.0.4",
         "rc-motion": "^2.7.3",
         "rc-overflow": "^1.3.1",
-        "rc-select": "^14.5.2",
+        "rc-select": "^14.7.4",
         "rc-switch": "^4.1.0",
-        "rc-tabs": "^12.9.0",
-        "rc-textarea": "^1.3.2",
+        "rc-tabs": "^12.10.0",
+        "rc-textarea": "^1.3.4",
         "rc-trigger": "^5.3.4",
-        "rc-util": "^5.34.1",
+        "rc-util": "^5.36.0",
         "shallowequal": "^1.1.0",
-        "uikit": "^3.16.22"
+        "uikit": "^3.16.24"
     },
     "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-    }
+    },
+    "gitHead": "4be3af0574840f5fb9b24a07d9e710362e3f0180"
 }

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

@@ -1 +0,0 @@
-"use strict";

package/dist/cjs/components/Tab/index.scss

@@ -1,216 +0,0 @@
-// Name:            Tab
-// Description:     Component to create a tabbed navigation
-//
-// Component:       `uk-tab`
-//
-// Modifiers:       `uk-tab-bottom`
-//                  `uk-tab-left`
-//                  `uk-tab-right`
-//
-// States:          `uk-active`
-//                  `uk-disabled`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Tab
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Gutter
- * 3. Reset list
- */
-
-.uk-tab {
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 2 */
-    margin-left: calc(var(--tab-margin-horizontal) * -1);
-
-    /* 3 */
-    padding: 0;
-    @if mixin-exists(hook-tab) {
-        @include hook-tab;
-    }
-}
-
-/*
- * 1. Space is allocated solely based on content dimensions: 0 0 auto
- * 2. Gutter
- * 3. Create position context for dropdowns
- */
-
-.uk-tab > * {
-    /* 1 */
-    flex: none;
-
-    /* 2 */
-    padding-left: var(--tab-margin-horizontal);
-
-    /* 3 */
-    position: relative;
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Items must target `a` elements to exclude other elements (e.g. dropdowns)
- * 1. Center content vertically, e.g. an icon
- * 2. Imitate white space gap when using flexbox
- * 3. Center content if a width is set
- * 4. Style
- */
-
-.uk-tab > * > a {
-    /* 1 */
-    align-items: center;
-
-    /* 4 */
-    color: var(--tab-item-color);
-
-    /* 2 */
-    column-gap: 0.25em;
-
-    /* 4 */
-    display: flex;
-
-    /* 3 */
-    justify-content: center;
-
-    /* 4 */
-    padding: var(--tab-item-padding-vertical) var(--tab-item-padding-horizontal);
-    @if mixin-exists(hook-tab-item) {
-        @include hook-tab-item;
-    }
-}
-
-/* Hover */
-.uk-tab > * > a:hover {
-    color: var(--tab-item-hover-color);
-    text-decoration: var(--tab-item-hover-text-decoration);
-    @if mixin-exists(hook-tab-item-hover) {
-        @include hook-tab-item-hover;
-    }
-}
-
-/* Active */
-.uk-tab > .uk-active > a {
-    color: var(--tab-item-active-color);
-    @if mixin-exists(hook-tab-item-active) {
-        @include hook-tab-item-active;
-    }
-}
-
-/* Disabled */
-.uk-tab > .uk-disabled > a {
-    color: var(--tab-item-disabled-color);
-    @if mixin-exists(hook-tab-item-disabled) {
-        @include hook-tab-item-disabled;
-    }
-}
-
-
-/* Position modifier
- ========================================================================== */
-
-/*
- * Bottom
- */
-
-.uk-tab-bottom {
-    @if mixin-exists(hook-tab-bottom) {
-        @include hook-tab-bottom;
-    }
-}
-
-.uk-tab-bottom > * > a {
-    @if mixin-exists(hook-tab-bottom-item) {
-        @include hook-tab-bottom-item;
-    }
-}
-
-/*
- * Left + Right
- * 1. Reset Gutter
- */
-
-.uk-tab-left,
-.uk-tab-right {
-    flex-direction: column;
-
-    /* 1 */
-    margin-left: 0;
-}
-
-/* 1 */
-.uk-tab-left > *,
-.uk-tab-right > * { padding-left: 0; }
-
-.uk-tab-left {
-    @if mixin-exists(hook-tab-left) {
-        @include hook-tab-left;
-    }
-}
-
-.uk-tab-right {
-    @if mixin-exists(hook-tab-right) {
-        @include hook-tab-right;
-    }
-}
-
-.uk-tab-left > * > a {
-    justify-content: left;
-    @if mixin-exists(hook-tab-left-item) {
-        @include hook-tab-left-item;
-    }
-}
-
-.uk-tab-right > * > a {
-    justify-content: left;
-    @if mixin-exists(hook-tab-right-item) {
-        @include hook-tab-right-item;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-tab-misc) {
-    @include hook-tab-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --tab-margin-horizontal: #{$tab-margin-horizontal};
-    --tab-item-padding-horizontal: #{$tab-item-padding-horizontal};
-    --tab-item-padding-vertical: #{$tab-item-padding-vertical};
-    --tab-item-color: var(--global-muted-color);
-    --tab-item-hover-color: var(--global-color);
-    --tab-item-hover-text-decoration: #{$tab-item-hover-text-decoration};
-    --tab-item-active-color: var(--global-primary-background);
-    --tab-item-disabled-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-tab-item-color: var(--inverse-global-muted-color);
-    --inverse-tab-item-hover-color: var(--inverse-global-color);
-    --inverse-tab-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-tab-item-disabled-color: var(--inverse-global-muted-color);
-}

package/dist/cjs/styles/switcher.scss

@@ -1,51 +0,0 @@
-// Name:            Switcher
-// Description:     Component to navigate through different content panes
-//
-// Component:       `uk-switcher`
-//
-// States:          `uk-active`
-//
-// ========================================================================
-
-
-/* ========================================================================
-   Component: Switcher
- ========================================================================== */
-
-/*
- * Reset list
- */
-
-.uk-switcher {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Hide not active items
- */
-
-.uk-switcher > :not(.uk-active) {
-    display: none;
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-switcher > * > :last-child {
-    margin-bottom: 0;
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-switcher-misc) {
-    @include hook-switcher-misc;
-}

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

@@ -1 +0,0 @@
-"use strict";

package/dist/esm/components/Tab/index.scss

@@ -1,216 +0,0 @@
-// Name:            Tab
-// Description:     Component to create a tabbed navigation
-//
-// Component:       `uk-tab`
-//
-// Modifiers:       `uk-tab-bottom`
-//                  `uk-tab-left`
-//                  `uk-tab-right`
-//
-// States:          `uk-active`
-//                  `uk-disabled`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Tab
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Gutter
- * 3. Reset list
- */
-
-.uk-tab {
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 2 */
-    margin-left: calc(var(--tab-margin-horizontal) * -1);
-
-    /* 3 */
-    padding: 0;
-    @if mixin-exists(hook-tab) {
-        @include hook-tab;
-    }
-}
-
-/*
- * 1. Space is allocated solely based on content dimensions: 0 0 auto
- * 2. Gutter
- * 3. Create position context for dropdowns
- */
-
-.uk-tab > * {
-    /* 1 */
-    flex: none;
-
-    /* 2 */
-    padding-left: var(--tab-margin-horizontal);
-
-    /* 3 */
-    position: relative;
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Items must target `a` elements to exclude other elements (e.g. dropdowns)
- * 1. Center content vertically, e.g. an icon
- * 2. Imitate white space gap when using flexbox
- * 3. Center content if a width is set
- * 4. Style
- */
-
-.uk-tab > * > a {
-    /* 1 */
-    align-items: center;
-
-    /* 4 */
-    color: var(--tab-item-color);
-
-    /* 2 */
-    column-gap: 0.25em;
-
-    /* 4 */
-    display: flex;
-
-    /* 3 */
-    justify-content: center;
-
-    /* 4 */
-    padding: var(--tab-item-padding-vertical) var(--tab-item-padding-horizontal);
-    @if mixin-exists(hook-tab-item) {
-        @include hook-tab-item;
-    }
-}
-
-/* Hover */
-.uk-tab > * > a:hover {
-    color: var(--tab-item-hover-color);
-    text-decoration: var(--tab-item-hover-text-decoration);
-    @if mixin-exists(hook-tab-item-hover) {
-        @include hook-tab-item-hover;
-    }
-}
-
-/* Active */
-.uk-tab > .uk-active > a {
-    color: var(--tab-item-active-color);
-    @if mixin-exists(hook-tab-item-active) {
-        @include hook-tab-item-active;
-    }
-}
-
-/* Disabled */
-.uk-tab > .uk-disabled > a {
-    color: var(--tab-item-disabled-color);
-    @if mixin-exists(hook-tab-item-disabled) {
-        @include hook-tab-item-disabled;
-    }
-}
-
-
-/* Position modifier
- ========================================================================== */
-
-/*
- * Bottom
- */
-
-.uk-tab-bottom {
-    @if mixin-exists(hook-tab-bottom) {
-        @include hook-tab-bottom;
-    }
-}
-
-.uk-tab-bottom > * > a {
-    @if mixin-exists(hook-tab-bottom-item) {
-        @include hook-tab-bottom-item;
-    }
-}
-
-/*
- * Left + Right
- * 1. Reset Gutter
- */
-
-.uk-tab-left,
-.uk-tab-right {
-    flex-direction: column;
-
-    /* 1 */
-    margin-left: 0;
-}
-
-/* 1 */
-.uk-tab-left > *,
-.uk-tab-right > * { padding-left: 0; }
-
-.uk-tab-left {
-    @if mixin-exists(hook-tab-left) {
-        @include hook-tab-left;
-    }
-}
-
-.uk-tab-right {
-    @if mixin-exists(hook-tab-right) {
-        @include hook-tab-right;
-    }
-}
-
-.uk-tab-left > * > a {
-    justify-content: left;
-    @if mixin-exists(hook-tab-left-item) {
-        @include hook-tab-left-item;
-    }
-}
-
-.uk-tab-right > * > a {
-    justify-content: left;
-    @if mixin-exists(hook-tab-right-item) {
-        @include hook-tab-right-item;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-tab-misc) {
-    @include hook-tab-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --tab-margin-horizontal: #{$tab-margin-horizontal};
-    --tab-item-padding-horizontal: #{$tab-item-padding-horizontal};
-    --tab-item-padding-vertical: #{$tab-item-padding-vertical};
-    --tab-item-color: var(--global-muted-color);
-    --tab-item-hover-color: var(--global-color);
-    --tab-item-hover-text-decoration: #{$tab-item-hover-text-decoration};
-    --tab-item-active-color: var(--global-primary-background);
-    --tab-item-disabled-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-tab-item-color: var(--inverse-global-muted-color);
-    --inverse-tab-item-hover-color: var(--inverse-global-color);
-    --inverse-tab-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-tab-item-disabled-color: var(--inverse-global-muted-color);
-}

package/dist/esm/styles/switcher.scss

@@ -1,51 +0,0 @@
-// Name:            Switcher
-// Description:     Component to navigate through different content panes
-//
-// Component:       `uk-switcher`
-//
-// States:          `uk-active`
-//
-// ========================================================================
-
-
-/* ========================================================================
-   Component: Switcher
- ========================================================================== */
-
-/*
- * Reset list
- */
-
-.uk-switcher {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Hide not active items
- */
-
-.uk-switcher > :not(.uk-active) {
-    display: none;
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-switcher > * > :last-child {
-    margin-bottom: 0;
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-switcher-misc) {
-    @include hook-switcher-misc;
-}