@broxus/react-uikit 0.5.4 → 0.6.0

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,6 +1,6 @@
 {
     "name": "@broxus/react-uikit",
-    "version": "0.5.4",
+    "version": "0.6.0",
     "description": "React-based UIkit library",
     "license": "AGPL-3.0",
     "keywords": ["uikit", "ui", "react", "components"],
@@ -51,19 +51,19 @@
         "prepare": "npx yarn cleanup && npx yarn build"
     },
     "dependencies": {
-        "@broxus/js-utils": "^1.2.1",
+        "@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-dropdown": "^4.1.0",
-        "rc-input-number": "^8.0.1",
+        "rc-input-number": "^8.0.3",
         "rc-motion": "^2.7.3",
         "rc-overflow": "^1.3.1",
-        "rc-select": "^14.5.2",
+        "rc-select": "^14.7.1",
         "rc-switch": "^4.1.0",
-        "rc-tabs": "^12.9.0",
-        "rc-textarea": "^1.3.2",
+        "rc-tabs": "^12.10.0",
+        "rc-textarea": "^1.3.3",
         "rc-trigger": "^5.3.4",
         "rc-util": "^5.34.1",
         "shallowequal": "^1.1.0",

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;
-}