@broxus/react-uikit 0.2.2 → 0.3.1

package/dist/esm/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/esm/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/esm/components/Text/index.js

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Component } from '../Component';
-import { useConfig } from '../ConfrigProvider';
+import { Component } from '../../components/Component';
+import { useConfig } from '../../components/ConfrigProvider';
 import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'p';
 export const Text = React.memo((props) => {
     const config = 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}`
-        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'align', align), [align, config.prefixCls, prefixCls, rootCls]);
-    const columnClassName = React.useMemo(() => typeof column === 'number'
+        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'align', align)), [align, config.prefixCls, prefixCls, rootCls]);
+    const columnClassName = React.useMemo(() => (typeof column === 'number'
         ? `${prefixCls || config.prefixCls}-column-1-${column}`
-        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'column-1', column), [column, config.prefixCls, prefixCls]);
+        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'column-1', column)), [column, config.prefixCls, prefixCls]);
     return (React.createElement(Component, { className: classNames(columnClassName, alignClassName, {
             [`${prefixCls || config.prefixCls}-dropcap`]: dropcap,
             [`${rootCls}-${color}`]: color !== undefined,

package/dist/esm/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/esm/components/Tile/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Component } from '../Component';
-import { useConfig } from '../ConfrigProvider';
+import { Component } from '../../components/Component';
+import { useConfig } from '../../components/ConfrigProvider';
 import './index.scss';
 const defaultElement = 'div';
 export const Tile = React.memo((props) => {

package/dist/esm/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/esm/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/esm/components/Width/Width.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Component } from '../Component';
-import { getWidthClassname } from '../Width/utils';
-import { useConfig } from '../ConfrigProvider';
+import { Component } from '../../components/Component';
+import { useConfig } from '../../components/ConfrigProvider';
+import { getWidthClassname } from '../../components/Width/utils';
 const defaultElement = 'div';
 export const Width = React.memo((props) => {
     const config = useConfig();

package/dist/esm/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/esm/components/Width/index.js

@@ -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/esm/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/esm/components/Width/utils.js

@@ -16,9 +16,7 @@ export 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/esm/styles/animation.scss

@@ -35,8 +35,8 @@
 
 [class*='uk-animation-'] {
     animation-duration: var(--animation-duration);
-    animation-timing-function: var(--ease-out);
     animation-fill-mode: both;
+    animation-timing-function: var(--ease-out);
 }
 
 
@@ -48,8 +48,8 @@
  */
 
 .uk-animation-fade {
-    animation-name: uk-fade;
     animation-duration: var(--animation-fade-duration);
+    animation-name: uk-fade;
     animation-timing-function: linear;
 }
 
@@ -102,8 +102,8 @@
  */
 
 .uk-animation-kenburns {
-    animation-name: uk-scale-kenburns;
     animation-duration: var(--animation-kenburns-duration);
+    animation-name: uk-scale-kenburns;
 }
 
 /*
@@ -121,8 +121,8 @@
  */
 
 .uk-animation-stroke {
-    animation-name: uk-stroke;
     animation-duration: var(--animation-stroke-duration);
+    animation-name: uk-stroke;
     stroke-dasharray: var(--uk-animation-stroke);
 }
 
@@ -131,8 +131,8 @@
  ========================================================================== */
 
 .uk-animation-reverse {
-    animation-timing-function: var(--ease-in);
     animation-direction: reverse;
+    animation-timing-function: var(--ease-in);
 }
 
 
@@ -187,13 +187,13 @@
 
 @keyframes uk-fade-top {
     0% {
-        transform: translateY(-100%);
         opacity: 0;
+        transform: translateY(-100%);
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -203,13 +203,13 @@
 
 @keyframes uk-fade-bottom {
     0% {
-        transform: translateY(100%);
         opacity: 0;
+        transform: translateY(100%);
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -219,13 +219,13 @@
 
 @keyframes uk-fade-left {
     0% {
-        transform: translateX(-100%);
         opacity: 0;
+        transform: translateX(-100%);
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -235,13 +235,13 @@
 
 @keyframes uk-fade-right {
     0% {
-        transform: translateX(100%);
         opacity: 0;
+        transform: translateX(100%);
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -251,13 +251,13 @@
 
 @keyframes uk-fade-top-small {
     0% {
-        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
         opacity: 0;
+        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -267,13 +267,13 @@
 
 @keyframes uk-fade-bottom-small {
     0% {
-        transform: translateY(var(--animation-slide-small-translate));
         opacity: 0;
+        transform: translateY(var(--animation-slide-small-translate));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -283,13 +283,13 @@
 
 @keyframes uk-fade-left-small {
     0% {
-        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
         opacity: 0;
+        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -299,13 +299,13 @@
 
 @keyframes uk-fade-right-small {
     0% {
-        transform: translateX(var(--animation-slide-small-translate));
         opacity: 0;
+        transform: translateX(var(--animation-slide-small-translate));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -315,13 +315,13 @@
 
 @keyframes uk-fade-top-medium {
     0% {
-        transform: translateY(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
         opacity: 0;
+        transform: translateY(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -331,13 +331,13 @@
 
 @keyframes uk-fade-bottom-medium {
     0% {
-        transform: translateY(var(--animation-slide-medium-translate));
         opacity: 0;
+        transform: translateY(var(--animation-slide-medium-translate));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -347,13 +347,13 @@
 
 @keyframes uk-fade-left-medium {
     0% {
-        transform: translateX(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
         opacity: 0;
+        transform: translateX(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -363,13 +363,13 @@
 
 @keyframes uk-fade-right-medium {
     0% {
-        transform: translateX(var(--animation-slide-medium-translate));
         opacity: 0;
+        transform: translateX(var(--animation-slide-medium-translate));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -379,13 +379,13 @@
 
 @keyframes uk-fade-scale-02 {
     0% {
-        transform: scale(0.2);
         opacity: 0;
+        transform: scale(0.2);
     }
 
     100% {
-        transform: scale(1);
         opacity: 1;
+        transform: scale(1);
     }
 }
 
@@ -395,13 +395,13 @@
 
 @keyframes uk-fade-scale-18 {
     0% {
-        transform: scale(1.8);
         opacity: 0;
+        transform: scale(1.8);
     }
 
     100% {
-        transform: scale(1);
         opacity: 1;
+        transform: scale(1);
     }
 }
 

package/dist/esm/styles/column.scss

@@ -143,7 +143,7 @@
     --column-gutter: var(--global-gutter);
     --column-gutter-l: var(--global-medium-gutter);
     --column-divider-rule-color: var(--global-border);
-    --column-divider-rule-width: $column-divider-rule-width;
+    --column-divider-rule-width: #{$column-divider-rule-width};
 
     // Inverse
     --inverse-column-divider-rule-color: var(--inverse-global-border);

package/dist/esm/styles/marker.scss

@@ -46,41 +46,12 @@
     @include hook-marker-misc;
 }
 
-// @mixin hook-marker() {}
-// @mixin hook-marker-hover() {}
-// @mixin hook-marker-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@mixin hook-inverse() {
-    .uk-marker {
-        background: var(--inverse-marker-background);
-        color: var(--inverse-marker-color);
-        @if mixin-exists(hook-inverse-marker) {
-            @include hook-inverse-marker;
-        }
-    }
-
-    .uk-marker:hover,
-    .uk-marker:focus {
-        color: var(--inverse-marker-hover-color);
-        @if mixin-exists(hook-inverse-marker-hover) {
-            @include hook-inverse-marker-hover;
-        }
-    }
-}
-
-// @mixin hook-inverse-marker() {}
-// @mixin hook-inverse-marker-hover() {}
-
 
 // Vars
 // ========================================================================
 
 :root {
-    --marker-padding: $marker-padding;
+    --marker-padding: #{$marker-padding};
     --marker-background: var(--global-secondary-background);
     --marker-color: var(--global-inverse-color);
     --marker-hover-color: var(--global-inverse-color);