@broxus/react-uikit 0.17.4 → 0.19.0

package/dist/esm/index.d.ts

@@ -24,6 +24,7 @@ export * from './components/Card';
 export * from './components/Nav';
 export * from './components/Navbar';
 export * from './components/Subnav';
+export * from './components/Segmented';
 export * from './components/Breadcrumb';
 export * from './components/Tabs';
 export * from './components/Dotnav';

package/dist/esm/index.js

@@ -24,6 +24,7 @@ export * from './components/Card';
 export * from './components/Nav';
 export * from './components/Navbar';
 export * from './components/Subnav';
+export * from './components/Segmented';
 export * from './components/Breadcrumb';
 export * from './components/Tabs';
 export * from './components/Dotnav';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@broxus/react-uikit",
-    "version": "0.17.4",
+    "version": "0.19.0",
     "description": "React-based UIkit library",
     "license": "AGPL-3.0",
     "keywords": [
@@ -24,11 +24,12 @@
             "require": "./dist/cjs/index.js",
             "types": "./dist/esm/index.d.ts"
         },
-        "./package.json": "./package.json",
-        "./styles/*": "./dist/esm/styles/*"
+        "./styles/*": "./styles/*",
+        "./package.json": "./package.json"
     },
     "files": [
         "dist",
+        "styles",
         "LICENSE",
         "README.md"
     ],
@@ -44,45 +45,46 @@
         "npm": ">=8"
     },
     "scripts": {
-        "build": "npx yarn build:js && npx yarn styles:copy",
+        "build": "npx yarn build:js",
         "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": "npx chokidar \"src/**/*.{ts,tsx}\" -c \"npx yarn build:esm\"",
-        "watch:styles": "npx chokidar \"src/**/*.scss\" -c \"npx yarn styles:esm:copy\"",
-        "dev": "npx yarn watch:js & npx yarn watch:styles",
+        "watch:js": "npx chokidar \"src/**/*.{ts,tsx}\" -c \"npx yarn build:esm -- --incremental\"",
+        "dev": "npx yarn watch:js",
         "lint": "npx eslint src --ext .ts,.tsx",
         "lint:fix": "npx eslint src --ext .ts,.tsx --fix",
         "cleanup": "npx rimraf dist",
         "prepare": "npx yarn cleanup && npx yarn build"
     },
     "dependencies": {
-        "@broxus/js-utils": "^1.3.13",
+        "@broxus/js-utils": "^1.3.15",
+        "@rc-component/collapse": "^1.0.1",
+        "@rc-component/dialog": "^1.2.0",
+        "@rc-component/drawer": "^1.0.0",
+        "@rc-component/dropdown": "^1.0.0",
+        "@rc-component/input-number": "^1.0.0",
+        "@rc-component/motion": "^1.1.4",
+        "@rc-component/picker": "^1.2.3",
+        "@rc-component/resize-observer": "^1.0.0",
+        "@rc-component/segmented": "^1.1.0",
+        "@rc-component/select": "^1.0.2",
+        "@rc-component/switch": "^1.0.0",
+        "@rc-component/tabs": "^1.3.0",
+        "@rc-component/textarea": "^1.0.0",
+        "@rc-component/trigger": "^3.2.0",
+        "@rc-component/util": "^1.2.1",
         "classnames": "^2.5.1",
-        "rc-collapse": "^3.9.0",
-        "rc-dialog": "^9.6.0",
-        "rc-drawer": "^7.2.0",
-        "rc-dropdown": "^4.2.1",
-        "rc-input-number": "^9.4.0",
-        "rc-motion": "^2.9.5",
-        "rc-overflow": "^1.3.2",
-        "rc-picker": "^4.9.1",
-        "rc-select": "^14.16.4",
+        "rc-motion": "npm:@rc-component/motion@^1.1.4",
+        "rc-overflow": "^1.4.1",
+        "rc-resize-observer": "npm:@rc-component/resize-observer@^1.0.0",
         "rc-slider": "^11.1.8",
-        "rc-switch": "^4.1.0",
-        "rc-tabs": "^15.5.0",
-        "rc-textarea": "^1.9.0",
-        "rc-trigger": "^5.3.4",
-        "rc-util": "^5.44.3",
+        "rc-util": "npm:@rc-component/util@^1.2.1",
         "shallowequal": "^1.1.0",
-        "uikit": "^3.21.16"
+        "uikit": "^3.23.5"
     },
     "peerDependencies": {
-        "react": "^16.8.0 || ^17.x || ^18.x",
-        "react-dom": "^16.8.0 || ^17.x || ^18.x"
+        "react": "^16.8.0 || ^17.x || ^18.x || ^19.x",
+        "react-dom": "^16.8.0 || ^17.x || ^18.x || ^19.x"
     },
-    "gitHead": "801da256ed3d262d1fb38acf4183787a8cc0f48e"
+    "gitHead": "925261cf60db9dec9800ae7d3892fa7b6278d4fa"
 }

package/styles/_import.components.scss

@@ -0,0 +1,69 @@
+// Base
+@forward 'variables';
+@forward 'mixin';
+@forward 'base';
+
+// Elements
+@forward 'link';
+@forward 'heading';
+@forward 'divider';
+@forward 'list';
+@forward 'description-list';
+
+// @forward 'table';
+@forward 'icon';
+@forward 'form'; // After: Icon
+@forward 'control'; // After: Icon
+@forward 'input-password';
+@forward 'input-number';
+@forward 'checkbox';
+@forward 'radio';
+@forward 'datepicker';
+@forward 'button';
+@forward 'progress';
+@forward 'switch';
+
+// Layout
+@forward 'section';
+@forward 'container';
+@forward 'grid';
+@forward 'tile';
+@forward 'card';
+
+// Common
+@forward 'close'; // After: Icon
+@forward 'spinner'; // After: Icon
+@forward 'totop'; // After: Icon
+@forward 'marker'; // After: Icon
+@forward 'alert'; // After: Close
+@forward 'placeholder';
+@forward 'badge';
+@forward 'label';
+
+@forward 'overlay'; // After: Icon
+@forward 'article'; // After: Subnav
+// @forward 'comment';
+// @forward 'search'; // After: Icon
+
+// Navs
+@forward 'nav';
+@forward 'navbar'; // After: Card, Grid, Nav, Icon, Search
+@forward 'subnav';
+@forward 'segmented';
+@forward 'breadcrumb';
+
+// @forward 'pagination';
+@forward 'tabs';
+@forward 'dotnav';
+@forward 'thumbnav';
+@forward 'iconnav';
+
+// JavaScript
+@forward 'accordion'; // After: Card
+@forward 'drop'; // After: Card
+@forward 'dropdown'; // After: Card
+@forward 'modal'; // After: Close
+@forward 'drawer';
+@forward 'datepicker';
+
+@forward 'sticky';

package/styles/_import.scss

@@ -0,0 +1,97 @@
+// Base
+@forward 'variables';
+@forward 'mixin';
+@forward 'base';
+
+// Elements
+@forward 'link';
+@forward 'heading';
+@forward 'divider';
+@forward 'list';
+@forward 'description-list';
+
+// @forward 'table';
+@forward 'icon';
+@forward 'form'; // After: Icon
+@forward 'control'; // After: Icon
+@forward 'input-password';
+@forward 'input-number';
+@forward 'checkbox';
+@forward 'radio';
+@forward 'datepicker';
+@forward 'button';
+@forward 'progress';
+@forward 'switch';
+
+// Layout
+@forward 'section';
+@forward 'container';
+@forward 'tile';
+@forward 'card';
+
+// Common
+@forward 'close'; // After: Icon
+@forward 'spinner'; // After: Icon
+@forward 'totop'; // After: Icon
+@forward 'marker'; // After: Icon
+@forward 'alert'; // After: Close
+// @forward 'placeholder';
+@forward 'badge';
+@forward 'label';
+@forward 'overlay'; // After: Icon
+@forward 'article'; // After: Subnav
+// @forward 'comment';
+// @forward 'search'; // After: Icon
+
+// JavaScript
+@forward 'accordion'; // After: Card
+@forward 'drop'; // After: Card
+@forward 'dropdown'; // After: Card
+@forward 'modal'; // After: Close
+@forward 'drawer';
+@forward 'datepicker';
+@forward 'sticky';
+
+// @forward 'leader';
+@forward 'tooltip';
+
+// @forward 'sortable';
+// @forward 'countdown';
+
+@forward 'grid';
+
+// Navs
+@forward 'nav';
+@forward 'navbar'; // After: Card, Grid, Nav, Icon, Search
+@forward 'subnav';
+@forward 'segmented';
+@forward 'breadcrumb';
+
+// @forward 'pagination';
+@forward 'tabs';
+@forward 'dotnav';
+@forward 'thumbnav';
+@forward 'iconnav';
+
+// Utilities
+@forward 'animation';
+@forward 'motion';
+@forward 'width';
+@forward 'height';
+@forward 'text';
+@forward 'column';
+@forward 'cover';
+@forward 'background';
+@forward 'align';
+@forward 'svg';
+@forward 'utility';
+@forward 'flex'; // After: Utility
+@forward 'margin';
+@forward 'padding';
+@forward 'position';
+@forward 'transition';
+@forward 'visibility';
+@forward 'inverse';
+
+// Need to be loaded last
+@forward 'print';

package/styles/_import.utilities.scss

@@ -0,0 +1,18 @@
+// Utilities
+@forward 'animation';
+@forward 'motion';
+@forward 'height';
+@forward 'text';
+@forward 'column';
+@forward 'background';
+@forward 'utility';
+@forward 'flex'; // After: Utility
+@forward 'margin';
+@forward 'padding';
+@forward 'position';
+@forward 'transition';
+@forward 'visibility';
+@forward 'inverse';
+
+// Need to be loaded last
+@forward 'print';

package/{dist/cjs/components/Accordion/index.scss → styles/accordion.scss}

@@ -4,8 +4,8 @@
 // Component:       `uk-accordion`
 //
 // Sub-objects:     `uk-accordion-header`
-//                  `uk-accordion-content`
-//                  `uk-accordion-content-box`
+//                  `uk-accordion-panel`
+//                  `uk-accordion-body`
 //                  `uk-accordion-extra`
 //
 // States:          `uk-accordion-item-active`
@@ -14,11 +14,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -28,7 +30,7 @@
 .uk-accordion {
     list-style: none;
     padding: 0;
-    @if mixin-exists(hook-accordion) {
+    @if meta.mixin-exists('hook-accordion') {
         @include hook-accordion;
     }
 }
@@ -39,7 +41,7 @@
 
 .uk-accordion > :nth-child(n+2) {
     margin-top: var(--accordion-item-margin-top);
-    @if mixin-exists(hook-accordion-item) {
+    @if meta.mixin-exists('hook-accordion-item') {
         @include hook-accordion-item;
     }
 }
@@ -55,7 +57,7 @@
     display: flex;
     font-size: var(--accordion-header-font-size);
     line-height: var(--accordion-header-line-height);
-    @if mixin-exists(hook-accordion-header) {
+    @if meta.mixin-exists('hook-accordion-header') {
         @include hook-accordion-header;
     }
 
@@ -63,7 +65,7 @@
 
 .uk-accordion-header-collapsible-only {
     cursor: default;
-    @if mixin-exists(hook-accordion-header-collapsible-only) {
+    @if meta.mixin-exists('hook-accordion-header-collapsible-only') {
         @include hook-accordion-header-collapsible-only;
     }
 
@@ -77,7 +79,7 @@
 .uk-accordion-header:focus {
     outline: none;
     text-decoration: none;
-    @if mixin-exists(hook-accordion-header-hover) {
+    @if meta.mixin-exists('hook-accordion-header-hover') {
         @include hook-accordion-header-hover;
     }
 
@@ -99,7 +101,7 @@
     color: var(--accordion-item-disabled-color);
     cursor: not-allowed;
     opacity: 0.7;
-    @if mixin-exists(hook-accordion-item-disable) {
+    @if meta.mixin-exists('hook-accordion-item-disable') {
         @include hook-accordion-item-disable;
     }
 
@@ -109,14 +111,14 @@
 }
 
 
-/* Content
+/* Content panel
  ========================================================================== */
 
-.uk-accordion-content {
+.uk-accordion-panel {
     display: flow-root;
     overflow: hidden;
-    @if mixin-exists(hook-accordion-content) {
-        @include hook-accordion-content;
+    @if meta.mixin-exists('hook-accordion-panel') {
+        @include hook-accordion-panel;
     }
 }
 
@@ -124,12 +126,12 @@
  * Remove margin from the last-child
  */
 
-.uk-accordion-content > :last-child { margin-bottom: 0; }
+.uk-accordion-panel > :last-child { margin-bottom: 0; }
 
-.uk-accordion-content-box {
-    margin-top: var(--accordion-content-margin-top);
-    @if mixin-exists(hook-accordion-content-box) {
-        @include hook-accordion-content-box;
+.uk-accordion-body {
+    margin-top: var(--accordion-panel-margin-top);
+    @if meta.mixin-exists('hook-accordion-body') {
+        @include hook-accordion-body;
     }
 }
 
@@ -140,7 +142,7 @@
 .uk-accordion-extra {
     margin-left: auto;
     margin-right: var(--accordion-extra-margin-horizontal);
-    @if mixin-exists(hook-accordion-extra) {
+    @if meta.mixin-exists('hook-accordion-extra') {
         @include hook-accordion-extra;
     }
 }
@@ -168,7 +170,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-accordion-misc) {
+@if meta.mixin-exists('hook-accordion-misc') {
     @include hook-accordion-misc;
 }
 
@@ -184,7 +186,7 @@
     --accordion-header-color: var(--global-emphasis-color);
     --accordion-header-hover-color: var(--global-color);
     --accordion-extra-margin-horizontal: var(--global-small-margin);
-    --accordion-content-margin-top: var(--global-margin);
+    --accordion-panel-margin-top: var(--global-margin);
     --accordion-icon-margin-right: var(--global-small-margin);
     --accordion-icon-color: var(--global-color);
     --accordion-icon-size: #{$accordion-icon-size};

package/{dist/cjs/components/Alert/index.scss → styles/alert.scss}

@@ -13,11 +13,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -31,7 +33,7 @@
     padding: var(--alert-padding);
     padding-right: var(--alert-padding-right);
     position: relative;
-    @if mixin-exists(hook-alert) {
+    @if meta.mixin-exists('hook-alert') {
         @include hook-alert;
     }
 }
@@ -58,7 +60,7 @@
     position: absolute;
     right: var(--alert-close-right);
     top: var(--alert-close-top);
-    @if mixin-exists(hook-alert-close) {
+    @if meta.mixin-exists('hook-alert-close') {
         @include hook-alert-close;
     }
 }
@@ -80,7 +82,7 @@
     --close-hover-color: initial;
 
     opacity: 0.8;
-    @if mixin-exists(hook-alert-close-hover) {
+    @if meta.mixin-exists('hook-alert-close-hover') {
         @include hook-alert-close-hover;
     }
 }
@@ -96,7 +98,7 @@
 .uk-alert-primary {
     background: var(--alert-primary-background);
     color: var(--alert-primary-color);
-    @if mixin-exists(hook-alert-primary) {
+    @if meta.mixin-exists('hook-alert-primary') {
         @include hook-alert-primary;
     }
 }
@@ -108,7 +110,7 @@
 .uk-alert-success {
     background: var(--alert-success-background);
     color: var(--alert-success-color);
-    @if mixin-exists(hook-alert-success) {
+    @if meta.mixin-exists('hook-alert-success') {
         @include hook-alert-success;
     }
 }
@@ -120,7 +122,7 @@
 .uk-alert-warning {
     background: var(--alert-warning-background);
     color: var(--alert-warning-color);
-    @if mixin-exists(hook-alert-warning) {
+    @if meta.mixin-exists('hook-alert-warning') {
         @include hook-alert-warning;
     }
 }
@@ -132,7 +134,7 @@
 .uk-alert-danger {
     background: var(--alert-danger-background);
     color: var(--alert-danger-color);
-    @if mixin-exists(hook-alert-danger) {
+    @if meta.mixin-exists('hook-alert-danger') {
         @include hook-alert-danger;
     }
 }
@@ -149,10 +151,10 @@
     opacity: 1;
     overflow: hidden;
     transition: max-height var(--transition-duration) var(--ease-in-out-circ),
-        opacity var(--transition-duration) var(--ease-in-out-circ),
-        padding-top var(--transition-duration) var(--ease-in-out-circ),
-        padding-bottom var(--transition-duration) var(--ease-in-out-circ),
-        margin-bottom var(--transition-duration) var(--ease-in-out-circ);
+    opacity var(--transition-duration) var(--ease-in-out-circ),
+    padding-top var(--transition-duration) var(--ease-in-out-circ),
+    padding-bottom var(--transition-duration) var(--ease-in-out-circ),
+    margin-bottom var(--transition-duration) var(--ease-in-out-circ);
 }
 
 .uk-alert-motion-leave-active {
@@ -167,7 +169,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-alert-misc) {
+@if meta.mixin-exists('hook-alert-misc') {
     @include hook-alert-misc;
 }
 
@@ -184,11 +186,11 @@
     --alert-close-top: var(--alert-padding);
     --alert-close-right: var(--alert-padding);
     --alert-primary-background: #{$alert-primary-background};
-    --alert-primary-color: var(--global-primary-background);
+    --alert-primary-color: var(--global-primary-color);
     --alert-success-background: #{$alert-success-background};
-    --alert-success-color: var(--global-success-background);
+    --alert-success-color: var(--global-success-color);
     --alert-warning-background: #{$alert-warning-background};
-    --alert-warning-color: var(--global-warning-background);
+    --alert-warning-color: var(--global-warning-color);
     --alert-danger-background: #{$alert-danger-background};
-    --alert-danger-color: var(--global-danger-background);
+    --alert-danger-color: var(--global-danger-color);
 }

package/{dist/esm/components/Align/index.scss → styles/align.scss}

@@ -7,11 +7,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -132,7 +134,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-align-misc) {
+@if meta.mixin-exists('hook-align-misc') {
     @include hook-align-misc;
 }
 

package/{dist/cjs/styles → styles}/animation.scss

@@ -22,11 +22,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+@use 'sass:string';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -252,7 +255,7 @@
 @keyframes uk-fade-top-small {
     0% {
         opacity: 0;
-        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+        transform: translateY(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
@@ -284,7 +287,7 @@
 @keyframes uk-fade-left-small {
     0% {
         opacity: 0;
-        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+        transform: translateX(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
@@ -316,7 +319,7 @@
 @keyframes uk-fade-top-medium {
     0% {
         opacity: 0;
-        transform: translateY(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
+        transform: translateY(string.unquote('calc(var(--animation-slide-medium-translate) * -1)'));
     }
 
     100% {
@@ -348,7 +351,7 @@
 @keyframes uk-fade-left-medium {
     0% {
         opacity: 0;
-        transform: translateX(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
+        transform: translateX(string.unquote('calc(var(--animation-slide-medium-translate) * -1)'));
     }
 
     100% {
@@ -461,7 +464,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-animation-misc) {
+@if meta.mixin-exists('hook-animation-misc') {
     @include hook-animation-misc;
 }