@broxus/react-uikit 0.18.0 → 0.19.0

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

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { Spinner } from '../../components/Spinner';
-import './index.scss';
 export const Switch = React.forwardRef((props, ref) => {
     const config = useConfig();
     const { className, direction = config.direction, loading, loadingIcon, prefixCls = config.prefixCls, ...restProps } = props;

package/dist/esm/components/Tabs/index.d.ts

@@ -1,6 +1,5 @@
 import { type TabsProps as RcTabsProps } from '@rc-component/tabs';
 import * as React from 'react';
-import './index.scss';
 export type TabsPosition = 'left' | 'right' | 'top' | 'bottom';
 export interface Tab {
     active?: boolean;

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

@@ -5,7 +5,6 @@ import { useConfig } from '../../components/ConfigProvider';
 import { Icon } from '../../components/Icon';
 import { useAnimateConfig } from '../../components/Tabs/hooks';
 import { getMotionName } from '../../utils';
-import './index.scss';
 export function Tabs(props) {
     const config = useConfig();
     const { addIcon, animated, centered, className, direction, hideAdd, items, more, prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;

package/dist/esm/components/Text/index.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type BreakpointsConfig } from '../../types';
-import './index.scss';
 export type TextAlign = 'left' | 'right' | 'center' | 'justify';
 export type TextOwnProps = {
     align?: TextAlign | BreakpointsConfig<TextAlign>;

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

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { getBreakpointsConfigClasses } from '../../utils';
-import './index.scss';
 const defaultElement = 'span';
 export function Text(props) {
     const config = useConfig();

package/dist/esm/components/Tile/index.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-import './index.scss';
 export type TileOwnProps = {
     kind?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
     prefixCls?: string;

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

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
-import './index.scss';
 const defaultElement = 'div';
 export function Tile(props) {
     const config = useConfig();

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type WidthBreakpointsConfig, type WidthSize } from '../../components/Width/types';
-import './index.scss';
-export interface WidthOwnProps extends WidthBreakpointsConfig {
+export interface WidthOwnProps extends Omit<WidthBreakpointsConfig, 'default'> {
     prefixCls?: string;
-    size?: WidthSize;
+    size?: WidthSize | WidthBreakpointsConfig;
 }
 export type WidthProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<WidthOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, WidthOwnProps>;
 declare const defaultElement = "div";

package/dist/esm/components/Width/Width.js

@@ -3,15 +3,9 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { getWidthClassname } from '../../components/Width/utils';
-import './index.scss';
 const defaultElement = 'div';
 export function Width(props) {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, size, s, m, l, xl, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(getWidthClassname(size, prefixCls || config.prefixCls), getWidthClassname({
-            l,
-            m,
-            s,
-            xl,
-        }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
+    return (React.createElement(Component, { className: classNames(getWidthClassname(size, prefixCls || config.prefixCls), getWidthClassname({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
 }

package/dist/esm/components/Width/utils.d.ts

@@ -1,3 +1,3 @@
 import { type ChildWidthBreakpointsConfig, type ChildWidthSize, type WidthBreakpointsConfig, type WidthSize } from '../../components/Width';
-export declare function getWidthClassname(valueOrConfig: WidthSize | WidthBreakpointsConfig, prefixCls?: string): string | undefined;
+export declare function getWidthClassname(valueOrConfig?: WidthSize | WidthBreakpointsConfig, prefixCls?: string): string | undefined;
 export declare function getChildWidthClassname(valueOrConfig: ChildWidthSize | ChildWidthBreakpointsConfig | undefined, prefixCls?: string): string | undefined;

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.18.0",
+    "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,36 +45,33 @@
         "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 -- --incremental\"",
-        "watch:styles": "npx chokidar \"src/**/*.scss\" -c \"npx yarn styles:esm:copy\"",
-        "dev": "npx yarn watch:js & npx yarn watch:styles",
+        "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.14",
+        "@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.1.0",
+        "@rc-component/picker": "^1.2.3",
         "@rc-component/resize-observer": "^1.0.0",
-        "@rc-component/select": "^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.1.0",
+        "@rc-component/trigger": "^3.2.0",
         "@rc-component/util": "^1.2.1",
         "classnames": "^2.5.1",
         "rc-motion": "npm:@rc-component/motion@^1.1.4",
@@ -82,11 +80,11 @@
         "rc-slider": "^11.1.8",
         "rc-util": "npm:@rc-component/util@^1.2.1",
         "shallowequal": "^1.1.0",
-        "uikit": "^3.23.1"
+        "uikit": "^3.23.5"
     },
     "peerDependencies": {
         "react": "^16.8.0 || ^17.x || ^18.x || ^19.x",
         "react-dom": "^16.8.0 || ^17.x || ^18.x || ^19.x"
     },
-    "gitHead": "671089ea81dba897bc0db5aff16d1819966956c1"
+    "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;
 }