@broxus/react-uikit 0.2.2 → 0.3.0

package/dist/cjs/components/Navbar/index.d.ts

@@ -1,15 +1,15 @@
 import type * as React from 'react';
-import { Center } from '../Navbar/Center';
-import { Container } from '../Navbar/Container';
-import { type NavbarProps } from '../Navbar/Navbar';
-import { Item } from '../Navbar/Item';
-import { Left } from '../Navbar/Left';
-import { Nav } from '../Navbar/Nav';
-import { Right } from '../Navbar/Right';
-import { Toggle } from '../Navbar/Toggle';
+import { Center } from '../../components/Navbar/Center';
+import { Container } from '../../components/Navbar/Container';
+import { type NavbarProps } from '../../components/Navbar/Navbar';
+import { Item } from '../../components/Navbar/Item';
+import { Left } from '../../components/Navbar/Left';
+import { Nav } from '../../components/Navbar/Nav';
+import { Right } from '../../components/Navbar/Right';
+import { Toggle } from '../../components/Navbar/Toggle';
 import './index.scss';
 export type { NavbarProps };
-export interface Navbar extends React.FunctionComponent<NavbarProps> {
+export interface Navbar extends React.MemoExoticComponent<React.FunctionComponent<NavbarProps>> {
     Center: typeof Center;
     Container: typeof Container;
     Item: typeof Item;

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

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navbar = void 0;
-const Center_1 = require("../Navbar/Center");
-const Container_1 = require("../Navbar/Container");
-const Navbar_1 = require("../Navbar/Navbar");
-const Item_1 = require("../Navbar/Item");
-const Left_1 = require("../Navbar/Left");
-const Nav_1 = require("../Navbar/Nav");
-const Right_1 = require("../Navbar/Right");
-const Toggle_1 = require("../Navbar/Toggle");
+const Center_1 = require("../../components/Navbar/Center");
+const Container_1 = require("../../components/Navbar/Container");
+const Navbar_1 = require("../../components/Navbar/Navbar");
+const Item_1 = require("../../components/Navbar/Item");
+const Left_1 = require("../../components/Navbar/Left");
+const Nav_1 = require("../../components/Navbar/Nav");
+const Right_1 = require("../../components/Navbar/Right");
+const Toggle_1 = require("../../components/Navbar/Toggle");
 require("./index.scss");
 exports.Navbar = Navbar_1.Navbar;
 exports.Navbar.Center = Center_1.Center;

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

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Progress = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../ConfrigProvider");
+const ConfrigProvider_1 = require("../../components/ConfrigProvider");
 require("./index.scss");
 exports.Progress = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();

package/dist/cjs/components/Section/index.d.ts

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

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

@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Section = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Component_1 = require("../Component");
-const ConfrigProvider_1 = require("../ConfrigProvider");
+const Component_1 = require("../../components/Component");
+const ConfrigProvider_1 = require("../../components/ConfrigProvider");
 require("./index.scss");
 const defaultElement = 'section';
 exports.Section = React.memo((props) => {

package/dist/cjs/components/Spinner/index.d.ts

@@ -4,4 +4,4 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
     prefixCls?: string;
     ratio?: number;
 }
-export declare function Spinner(props: SpinnerProps): JSX.Element;
+export declare const Spinner: React.MemoExoticComponent<(props: SpinnerProps) => JSX.Element>;

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

@@ -29,17 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../ConfrigProvider");
-const Icon_1 = require("../Icon");
+const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const Icon_1 = require("../../components/Icon");
 require("./index.scss");
-function Spinner(props) {
+exports.Spinner = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
     const { className, prefixCls = config.prefixCls, ratio, ...restProps } = props;
-    return (React.createElement("span", { className: (0, classnames_1.default)([
-            `${prefixCls || config.prefixCls}-spinner`,
-            `${prefixCls || config.prefixCls}-icon`,
-        ], className), ...restProps },
-        React.createElement("svg", { ...Icon_1.defaultSvgProps, ...(0, Icon_1.getSize)(20, 20, ratio), viewBox: "0 0 30 30" },
-            React.createElement("circle", { fill: "none", stroke: "currentColor", cx: 15, cy: 15, r: 14 }))));
-}
-exports.Spinner = Spinner;
+    return (React.createElement("span", { className: (0, classnames_1.default)([`${prefixCls || config.prefixCls}-spinner`, `${prefixCls || config.prefixCls}-icon`], className), ...restProps },
+        React.createElement("svg", { ...Icon_1.defaultSvgProps, ...(0, Icon_1.getSize)(20, 20, ratio), viewBox: "0 0 20 20" },
+            React.createElement("circle", { fill: "none", stroke: "currentColor", cx: 10, cy: 10, r: 9 }))));
+});

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

@@ -30,8 +30,8 @@ exports.Tabs = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const rc_tabs_1 = __importDefault(require("rc-tabs"));
-const ConfrigProvider_1 = require("../ConfrigProvider");
-const Icon_1 = require("../Icon");
+const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const Icon_1 = require("../../components/Icon");
 const utils_1 = require("../../utils");
 require("./index.scss");
 exports.Tabs = React.memo((props) => {

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

@@ -6,6 +6,7 @@
 // Modifiers:       `uk-tabs-bottom`
 //                  `uk-tabs-left`
 //                  `uk-tabs-right`
+//                  `uk-tabs-large`
 //
 // States:          `uk-active`
 //                  `uk-disabled`
@@ -555,6 +556,18 @@
 .uk-tabs-rtl.uk-tabs-right .uk-tabs-content-holder { order: 1; }
 
 
+/* Size modifier
+ ========================================================================== */
+
+.uk-tabs-large .uk-tabs-tab {
+    padding: var(--tabs-large-tab-padding-vertical) var(--tabs-large-tab-padding-horizontal);
+}
+
+.uk-tabs-card-large .uk-tabs-tab {
+    padding: var(--tabs-card-large-tab-padding-vertical) var(--tabs-card-large-tab-padding-horizontal);
+}
+
+
 // Dropdown
 // ========================================================================
 
@@ -672,6 +685,8 @@
     --tabs-margin-vertical: #{$tabs-margin-vertical};
     --tabs-tab-padding-horizontal: #{$tabs-tab-padding-horizontal};
     --tabs-tab-padding-vertical: #{$tabs-tab-padding-vertical};
+    --tabs-large-tab-padding-horizontal: #{$tabs-large-tab-padding-horizontal};
+    --tabs-large-tab-padding-vertical: #{$tabs-large-tab-padding-vertical};
     --tabs-tab-font-size: var(--global-font-size);
     --tabs-tab-color: var(--global-color);
     --tabs-tab-hover-color: var(--global-primary-background);
@@ -693,6 +708,8 @@
     --tabs-card-gutter: var(--global-xsmall-gutter);
     --tabs-card-tab-padding-horizontal: #{$tabs-card-tab-padding-horizontal};
     --tabs-card-tab-padding-vertical: #{$tabs-card-tab-padding-vertical};
+    --tabs-card-large-tab-padding-horizontal: #{$tabs-card-tab-padding-horizontal};
+    --tabs-card-large-tab-padding-vertical: #{$tabs-card-tab-padding-vertical};
     --tabs-card-tab-active-background: var(--global-background);
     --tabs-dropdown-background: var(--dropdown-background);
     --tabs-dropdown-border-radius: var(--global-border-radius);

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type PolymorphicProps } from '../Component';
+import { type PolymorphicProps } from '../../components/Component';
 import { type BreakpointsConfig } from '../../types';
 export type TextAlign = 'left' | 'right' | 'center' | 'justify';
 export type TextOwnProps = {

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

@@ -29,20 +29,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Component_1 = require("../Component");
-const ConfrigProvider_1 = require("../ConfrigProvider");
+const Component_1 = require("../../components/Component");
+const ConfrigProvider_1 = require("../../components/ConfrigProvider");
 const utils_1 = require("../../utils");
 const defaultElement = 'p';
 exports.Text = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
     const { align, className, color, column, decoration, dropcap, italic, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'text'), [config, prefixCls]);
-    const alignClassName = React.useMemo(() => typeof align === 'string'
+    const alignClassName = React.useMemo(() => (typeof align === 'string'
         ? `${rootCls}-${align}`
-        : (0, utils_1.getBreakpointsConfigClasses)(prefixCls || config.prefixCls, 'align', align), [align, config.prefixCls, prefixCls, rootCls]);
-    const columnClassName = React.useMemo(() => typeof column === 'number'
+        : (0, utils_1.getBreakpointsConfigClasses)(prefixCls || config.prefixCls, 'align', align)), [align, config.prefixCls, prefixCls, rootCls]);
+    const columnClassName = React.useMemo(() => (typeof column === 'number'
         ? `${prefixCls || config.prefixCls}-column-1-${column}`
-        : (0, utils_1.getBreakpointsConfigClasses)(prefixCls || config.prefixCls, 'column-1', column), [column, config.prefixCls, prefixCls]);
+        : (0, utils_1.getBreakpointsConfigClasses)(prefixCls || config.prefixCls, 'column-1', column)), [column, config.prefixCls, prefixCls]);
     return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(columnClassName, alignClassName, {
             [`${prefixCls || config.prefixCls}-dropcap`]: dropcap,
             [`${rootCls}-${color}`]: color !== undefined,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type PolymorphicProps } from '../Component';
+import { type PolymorphicProps } from '../../components/Component';
 import './index.scss';
 export type TileOwnProps = {
     prefixCls?: string;

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

@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tile = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Component_1 = require("../Component");
-const ConfrigProvider_1 = require("../ConfrigProvider");
+const Component_1 = require("../../components/Component");
+const ConfrigProvider_1 = require("../../components/ConfrigProvider");
 require("./index.scss");
 const defaultElement = 'div';
 exports.Tile = React.memo((props) => {

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

@@ -16,13 +16,11 @@
 //
 // ========================================================================
 
-
 // Variables
 // ========================================================================
 
 @import '../../styles/variables.scss';
 
-
 /* ========================================================================
    Component: Tile
  ========================================================================== */
@@ -30,8 +28,8 @@
 .uk-tile {
     box-sizing: border-box;
     display: flow-root;
-    position: relative;
     padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
+    position: relative;
     @if mixin-exists(hook-tile) {
         @include hook-tile;
     }
@@ -40,8 +38,8 @@
 /* Phone landscape and bigger */
 @media (min-width: $breakpoint-small) {
     .uk-tile {
-        padding-right: var(--tile-padding-horizontal-s);
         padding-left: var(--tile-padding-horizontal-s);
+        padding-right: var(--tile-padding-horizontal-s);
     }
 }
 
@@ -60,7 +58,6 @@
     margin-bottom: 0;
 }
 
-
 /* Size modifiers
  ========================================================================== */
 
@@ -69,8 +66,8 @@
  */
 
 .uk-tile-xsmall {
-    padding-top: var(--tile-xsmall-padding-vertical);
     padding-bottom: var(--tile-xsmall-padding-vertical);
+    padding-top: var(--tile-xsmall-padding-vertical);
 }
 
 /*
@@ -78,8 +75,8 @@
  */
 
 .uk-tile-small {
-    padding-top: var(--tile-small-padding-vertical);
     padding-bottom: var(--tile-small-padding-vertical);
+    padding-top: var(--tile-small-padding-vertical);
 }
 
 /*
@@ -87,37 +84,35 @@
  */
 
 .uk-tile-large {
-    padding-top: var(--tile-large-padding-vertical);
     padding-bottom: var(--tile-large-padding-vertical);
+    padding-top: var(--tile-large-padding-vertical);
 }
 
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
     .uk-tile-large {
-        padding-top: var(--tile-large-padding-vertical-m);
         padding-bottom: var(--tile-large-padding-vertical-m);
+        padding-top: var(--tile-large-padding-vertical-m);
     }
 }
 
-
 /*
  * XLarge
  */
 
 .uk-tile-xlarge {
-    padding-top: var(--tile-xlarge-padding-vertical);
     padding-bottom: var(--tile-xlarge-padding-vertical);
+    padding-top: var(--tile-xlarge-padding-vertical);
 }
 
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
     .uk-tile-xlarge {
-        padding-top: var(--tile-xlarge-padding-vertical-m);
         padding-bottom: var(--tile-xlarge-padding-vertical-m);
+        padding-top: var(--tile-xlarge-padding-vertical-m);
     }
 }
 
-
 /* Style modifiers
  ========================================================================== */
 
@@ -185,7 +180,6 @@
     }
 }
 
-
 /*
  * Secondary
  */
@@ -216,7 +210,6 @@
     }
 }
 
-
 /*
  * Tertiary
  */
@@ -247,7 +240,6 @@
     }
 }
 
-
 // Hooks
 // ========================================================================
 
@@ -255,7 +247,6 @@
     @include hook-tile-misc;
 }
 
-
 // Vars
 // ========================================================================
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type PolymorphicProps } from '../Component';
-import { type WidthBreakpointsConfig, type WidthSize } from '../Width/types';
+import { type PolymorphicProps } from '../../components/Component';
+import { type WidthBreakpointsConfig, type WidthSize } from '../../components/Width/types';
 export interface WidthOwnProps extends WidthBreakpointsConfig {
     prefixCls?: string;
     size?: WidthSize;

package/dist/cjs/components/Width/Width.js

@@ -29,9 +29,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Width = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Component_1 = require("../Component");
-const utils_1 = require("../Width/utils");
-const ConfrigProvider_1 = require("../ConfrigProvider");
+const Component_1 = require("../../components/Component");
+const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const utils_1 = require("../../components/Width/utils");
 const defaultElement = 'div';
 exports.Width = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();

package/dist/cjs/components/Width/index.d.ts

@@ -1,4 +1,4 @@
 import './index.scss';
-export * from '../Width/Width';
-export * from '../Width/types';
-export * from '../Width/utils';
+export * from '../../components/Width/Width';
+export * from '../../components/Width/types';
+export * from '../../components/Width/utils';

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

@@ -15,6 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 require("./index.scss");
-__exportStar(require("../Width/Width"), exports);
-__exportStar(require("../Width/types"), exports);
-__exportStar(require("../Width/utils"), exports);
+__exportStar(require("../../components/Width/Width"), exports);
+__exportStar(require("../../components/Width/types"), exports);
+__exportStar(require("../../components/Width/utils"), exports);

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

@@ -1,4 +1,4 @@
-import { type ChildWidthBreakpointsConfig, type ChildWidthSize, type WidthBreakpointsConfig, type WidthSize } from '../Width/types';
+import { type ChildWidthBreakpointsConfig, type ChildWidthSize, type WidthBreakpointsConfig, type WidthSize } from '../../components/Width/types';
 export declare function getWidthClassname(value: WidthSize, prefixCls?: string): string;
 export declare function getWidthClassname(config: WidthBreakpointsConfig, prefixCl?: string): string;
 export declare function getChildWidthClassname(value: ChildWidthSize, prefixCls?: string): string;

package/dist/cjs/components/Width/utils.js

@@ -20,9 +20,7 @@ function getChildWidthClassname(valueOrConfig, prefixCls = 'uk') {
         return `${prefixCls}-child-width-1-${valueOrConfig}`;
     }
     if (typeof valueOrConfig === 'object' && !Array.isArray(valueOrConfig)) {
-        return Object.entries(valueOrConfig).map(([key, value]) => `${getChildWidthClassname(value)}${key !== 'default'
-            ? `@${key}`
-            : ''}`);
+        return Object.entries(valueOrConfig).map(([key, value]) => `${getChildWidthClassname(value)}${key !== 'default' ? `@${key}` : ''}`);
     }
     return undefined;
 }

package/dist/cjs/styles/variables.scss

@@ -1520,7 +1520,7 @@ $sortable-empty-height:                         50px !default;
 // Spinner
 // ========================================================================
 
-$spinner-size:                                  30px !default;
+$spinner-size:                                  20px !default;
 $spinner-stroke-width:                          2 !default;
 $spinner-radius:                                floor(($spinner-size - $spinner-stroke-width) * 0.5) !default; // Minus stroke width to prevent overflow clipping
 $spinner-circumference:                         round(2 * 3.141 * $spinner-radius) !default;
@@ -1580,8 +1580,10 @@ $inverse-subnav-item-disabled-color:            $inverse-global-muted-color !def
 
 $tabs-margin-horizontal:                        20px !default;
 $tabs-margin-vertical:                          10px !default;
-$tabs-tab-padding-horizontal:                   10px !default;
-$tabs-tab-padding-vertical:                     5px !default;
+$tabs-tab-padding-horizontal:                   15px !default;
+$tabs-tab-padding-vertical:                     10px !default;
+$tabs-large-tab-padding-horizontal:             25px !default;
+$tabs-large-tab-padding-vertical:               20px !default;
 $tabs-tab-font-size:                            $global-font-size !default;
 $tabs-tab-color:                                $global-color !default;
 $tabs-tab-hover-color:                          $global-primary-background !default;
@@ -1600,8 +1602,10 @@ $tabs-card-tab-border-width:                    $global-border-width !default;
 $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:              10px !default;
-$tabs-card-tab-padding-vertical:                5px !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-gutter:                              $global-xsmall-gutter !default;
 $tabs-dropdown-background:                      $dropdown-background !default;