@broxus/react-uikit 0.14.0 → 0.15.0

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

@@ -124,28 +124,55 @@
  */
 
 .uk-section-default {
+    --uk-inverse: #{$section-default-color-mode};
     background: var(--section-default-background);
     @if mixin-exists(hook-section-default) {
         @include hook-section-default;
     }
 }
 
+@if $section-default-color-mode == light {
+    .uk-section-default:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $section-default-color-mode == dark {
+    .uk-section-default:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
 /*
  * Muted
  */
 
 .uk-section-muted {
+    --uk-inverse: #{$section-muted-color-mode};
     background: var(--section-muted-background);
     @if mixin-exists(hook-section-muted) {
         @include hook-section-muted;
     }
 }
 
+@if $section-muted-color-mode == light {
+    .uk-section-muted:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $section-muted-color-mode == dark {
+    .uk-section-muted:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
 /*
  * Primary
  */
 
 .uk-section-primary {
+    --uk-inverse: #{$section-primary-color-mode};
     background: var(--section-primary-background);
     @if mixin-exists(hook-section-primary) {
         @include hook-section-primary;
@@ -169,6 +196,7 @@
  */
 
 .uk-section-secondary {
+    --uk-inverse: #{$section-secondary-color-mode};
     background: var(--section-secondary-background);
     @if mixin-exists(hook-section-secondary) {
         @include hook-section-secondary;
@@ -192,6 +220,7 @@
  */
 
 .uk-section-tertiary {
+    --uk-inverse: #{$section-tertiary-color-mode};
     background: var(--section-tertiary-background);
     @if mixin-exists(hook-section-tertiary) {
         @include hook-section-tertiary;

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

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = void 0;
+exports.Spinner = Spinner;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
@@ -39,4 +39,3 @@ function Spinner(props) {
         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: 13, style: { strokeWidth: `${(2 / (ratio ?? 1)).toFixed(6)}px` } }))));
 }
-exports.Spinner = Spinner;

package/dist/cjs/components/Subnav/Item.js

@@ -23,12 +23,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = void 0;
+exports.Item = Item;
 const React = __importStar(require("react"));
 function Item(props) {
     return React.createElement("li", { ...props });
 }
-exports.Item = Item;
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Subnav.Item';
 }

package/dist/cjs/components/Subnav/Subnav.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Subnav = void 0;
+exports.Subnav = Subnav;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
@@ -38,4 +38,3 @@ function Subnav(props) {
             [`${rootCls}-${type}`]: type !== undefined,
         }, className), ...restProps, "data-uk-margin": "" }));
 }
-exports.Subnav = Subnav;

package/dist/cjs/components/Tabs/hooks/useAnimateConfig.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAnimateConfig = void 0;
+exports.useAnimateConfig = useAnimateConfig;
 const utils_1 = require("../../../utils");
 const motion = {
     motionAppear: false,
@@ -38,4 +38,3 @@ function useAnimateConfig(prefixCls, animated = {
     }
     return mergedAnimated;
 }
-exports.useAnimateConfig = useAnimateConfig;

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

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
+exports.Tabs = Tabs;
 const classnames_1 = __importDefault(require("classnames"));
 const rc_tabs_1 = __importDefault(require("rc-tabs"));
 const React = __importStar(require("react"));
@@ -62,4 +62,3 @@ function Tabs(props) {
             ...more,
         }, prefixCls: rootCls }));
 }
-exports.Tabs = Tabs;

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

@@ -1,6 +1,7 @@
 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/cjs/components/Text/index.js

@@ -26,12 +26,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
+exports.Text = Text;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const utils_1 = require("../../utils");
+require("./index.scss");
 const defaultElement = 'span';
 function Text(props) {
     const config = (0, ConfigProvider_1.useConfig)();
@@ -56,4 +57,3 @@ function Text(props) {
             [`${rootCls}-italic`]: italic,
         }, className), component: defaultElement, ...restProps }));
 }
-exports.Text = Text;

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

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tile = void 0;
+exports.Tile = Tile;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
@@ -43,4 +43,3 @@ function Tile(props) {
             [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
         }, className), component: defaultElement, ...restProps }));
 }
-exports.Tile = Tile;

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

@@ -124,6 +124,7 @@
  */
 
 .uk-tile-default {
+    --uk-inverse: #{$tile-default-color-mode};
     background: var(--tile-default-background);
     @if mixin-exists(hook-tile-default) {
         @include hook-tile-default;
@@ -136,11 +137,25 @@
     }
 }
 
+// Color Mode
+@if $tile-default-color-mode == light {
+    .uk-tile-primary:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $tile-default-color-mode == dark {
+    .uk-tile-primary:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
 /*
  * Muted
  */
 
 .uk-tile-muted {
+    --uk-inverse: #{$tile-muted-color-mode};
     background: var(--tile-muted-background);
     @if mixin-exists(hook-tile-muted) {
         @include hook-tile-muted;
@@ -153,11 +168,25 @@
     }
 }
 
+// Color Mode
+@if $tile-default-color-mode == light {
+    .uk-tile-primary:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $tile-default-color-mode == dark {
+    .uk-tile-primary:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
 /*
  * Primary
  */
 
 .uk-tile-primary {
+    --uk-inverse: #{$tile-primary-color-mode};
     background: var(--tile-primary-background);
     @if mixin-exists(hook-tile-primary) {
         @include hook-tile-primary;
@@ -188,6 +217,7 @@
  */
 
 .uk-tile-secondary {
+    --uk-inverse: #{$tile-secondary-color-mode};
     background: var(--tile-secondary-background);
     @if mixin-exists(hook-tile-secondary) {
         @include hook-tile-secondary;
@@ -218,6 +248,7 @@
  */
 
 .uk-tile-tertiary {
+    --uk-inverse: #{$tile-tertiary-color-mode};
     background: var(--tile-tertiary-background);
     @if mixin-exists(hook-tile-tertiary) {
         @include hook-tile-tertiary;

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

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Width = void 0;
+exports.Width = Width;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
@@ -44,4 +44,3 @@ function Width(props) {
             xl,
         }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
 }
-exports.Width = Width;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getChildWidthClassname = exports.getWidthClassname = void 0;
+exports.getWidthClassname = getWidthClassname;
+exports.getChildWidthClassname = getChildWidthClassname;
 const utils_1 = require("../../utils");
 function getWidthClassname(valueOrConfig, prefixCls = 'uk') {
     if (typeof valueOrConfig === 'string') {
@@ -11,7 +12,6 @@ function getWidthClassname(valueOrConfig, prefixCls = 'uk') {
     }
     return undefined;
 }
-exports.getWidthClassname = getWidthClassname;
 function getChildWidthClassname(valueOrConfig, prefixCls = 'uk') {
     if (typeof valueOrConfig === 'string' || typeof valueOrConfig === 'number') {
         if (typeof valueOrConfig === 'string' && ['auto', 'expand'].includes(valueOrConfig)) {
@@ -26,4 +26,3 @@ function getChildWidthClassname(valueOrConfig, prefixCls = 'uk') {
     }
     return undefined;
 }
-exports.getChildWidthClassname = getChildWidthClassname;

package/dist/cjs/hooks/useContext.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContext = void 0;
+exports.useContext = useContext;
 const React = __importStar(require("react"));
 function useContext(Context) {
     const context = React.useContext(Context);
@@ -32,4 +32,3 @@ function useContext(Context) {
     }
     return context;
 }
-exports.useContext = useContext;

package/dist/cjs/hooks/useForceUpdate.js

@@ -23,10 +23,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useForceUpdate = void 0;
+exports.useForceUpdate = useForceUpdate;
 const React = __importStar(require("react"));
 function useForceUpdate() {
     const [, forceUpdate] = React.useReducer(x => x + 1, 0);
     return forceUpdate;
 }
-exports.useForceUpdate = useForceUpdate;

package/dist/cjs/hooks/useMounted.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMounted = void 0;
+exports.useMounted = useMounted;
 const React = __importStar(require("react"));
 function useMounted() {
     const mounted = React.useRef(false);
@@ -35,4 +35,3 @@ function useMounted() {
     }, []);
     return mounted.current;
 }
-exports.useMounted = useMounted;

package/dist/cjs/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/Spinner';
 export * from './components/Alert';
 export * from './components/Badge';
 export * from './components/Label';
+export * from './components/Overlay';
 export * from './components/Article';
 export * from './components/Section';
 export * from './components/Container';
@@ -34,6 +35,7 @@ export * from './components/Modal';
 export * from './components/Drawer';
 export * from './components/Component';
 export * from './components/ConfigProvider';
+export * from './components/Inverse';
 export * from './components/Width';
 export * from './components/Text';
 export * from './components/Cover';

package/dist/cjs/index.js

@@ -30,6 +30,7 @@ __exportStar(require("./components/Spinner"), exports);
 __exportStar(require("./components/Alert"), exports);
 __exportStar(require("./components/Badge"), exports);
 __exportStar(require("./components/Label"), exports);
+__exportStar(require("./components/Overlay"), exports);
 __exportStar(require("./components/Article"), exports);
 __exportStar(require("./components/Section"), exports);
 __exportStar(require("./components/Container"), exports);
@@ -50,6 +51,7 @@ __exportStar(require("./components/Modal"), exports);
 __exportStar(require("./components/Drawer"), exports);
 __exportStar(require("./components/Component"), exports);
 __exportStar(require("./components/ConfigProvider"), exports);
+__exportStar(require("./components/Inverse"), exports);
 __exportStar(require("./components/Width"), exports);
 __exportStar(require("./components/Text"), exports);
 __exportStar(require("./components/Cover"), exports);

package/dist/cjs/styles/_import.scss

@@ -34,7 +34,7 @@
 @import 'badge.scss';
 @import 'label.scss';
 
-// @import 'overlay.scss'; // After: Icon
+@import 'overlay.scss'; // After: Icon
 @import 'article.scss'; // After: Subnav
 // @import 'comment.scss';
 // @import 'search.scss'; // After: Icon

package/dist/cjs/styles/inverse.scss

@@ -39,6 +39,14 @@
     }
 }
 
+* { --uk-inverse: initial; }
+
+.uk-light { --uk-inverse: light; }
+.uk-dark { --uk-inverse: dark; }
+
+.uk-inverse-light { --uk-inverse: light !important; }
+.uk-inverse-dark { --uk-inverse: dark !important; }
+
 
 // Vars
 // ========================================================================

package/dist/cjs/styles/mixins.scss

@@ -357,22 +357,27 @@
 @mixin hook-button-hover() {}
 @mixin hook-button-focus() {}
 @mixin hook-button-active() {}
+@mixin hook-button-disabled() {}
 @mixin hook-button-default() {}
 @mixin hook-button-default-hover() {}
 @mixin hook-button-default-active() {}
+@mixin hook-button-default-disabled() {}
 @mixin hook-button-primary() {}
 @mixin hook-button-primary-hover() {}
 @mixin hook-button-primary-active() {}
+@mixin hook-button-primary-disabled() {}
 @mixin hook-button-secondary() {}
 @mixin hook-button-secondary-hover() {}
 @mixin hook-button-secondary-active() {}
+@mixin hook-button-secondary-disabled() {}
 @mixin hook-button-tertiary() {}
 @mixin hook-button-tertiary-hover() {}
 @mixin hook-button-tertiary-active() {}
+@mixin hook-button-tertiary-disabled() {}
 @mixin hook-button-danger() {}
 @mixin hook-button-danger-hover() {}
 @mixin hook-button-danger-active() {}
-@mixin hook-button-disabled() {}
+@mixin hook-button-danger-disabled() {}
 @mixin hook-button-xsmall() {}
 @mixin hook-button-small() {}
 @mixin hook-button-medium() {}
@@ -847,7 +852,7 @@
 @mixin hook-inverse-component-divider() {
     .uk-divider-icon {
         @if mixin-exists(svg-fill) {
-            @include svg-fill($divider-icon-image-path, '#000', $inverse-divider-icon-color);
+            @include svg-fill($internal-divider-icon-image, '#000', $inverse-divider-icon-color);
         }
         @if mixin-exists(hook-inverse-divider-icon) {
             @include hook-inverse-divider-icon;
@@ -2072,9 +2077,12 @@
 @mixin hook-switch-checked-handle() {}
 @mixin hook-switch-disabled() {}
 @mixin hook-switch-misc() {}
-
-@mixin hook-switcher-misc() {}
-@mixin hook-inverse-component-switcher() {}
+@mixin hook-inverse-switch() {}
+@mixin hook-inverse-switch-handle() {}
+@mixin hook-inverse-switch-checked() {}
+@mixin hook-inverse-switch-checked-handle() {}
+@mixin hook-inverse-switch-disabled() {}
+@mixin hook-inverse-component-switch() {}
 
 @mixin hook-tabs() {}
 @mixin hook-tabs-tab() {}
@@ -2359,6 +2367,7 @@
     }
 }
 
+@mixin hook-inverse-misc() {}
 
 @mixin hook-inverse() {
     @include hook-inverse-component-base;
@@ -2391,7 +2400,7 @@
     @include hook-inverse-component-breadcrumb;
 
     @include hook-inverse-component-pagination;
-    @include hook-inverse-component-switcher;
+    @include hook-inverse-component-switch;
     @include hook-inverse-component-tabs;
     @include hook-inverse-component-table;
 
@@ -2402,4 +2411,6 @@
     @include hook-inverse-component-column;
     @include hook-inverse-component-utility;
     @include hook-inverse-component-marker;
+
+    @include hook-inverse-misc;
 }

package/dist/cjs/styles/overlay.scss

@@ -1,105 +1 @@
-// Name:            Overlay
-// Description:     Component to create content areas overlaying an image
-//
-// Component:       `uk-overlay`
-//
-// Adopted:         `uk-overlay-icon`
-//
-// Modifier:        `uk-overlay-default`
-//                  `uk-overlay-primary`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import 'variables.scss';
-
-
-/* ========================================================================
-   Component: Overlay
- ========================================================================== */
-
-.uk-overlay {
-    padding: var(--overlay-padding-vertical) var(--overlay-padding-horizontal);
-    @if mixin-exists(hook-overlay) {
-        @include hook-overlay;
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-overlay > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Icon
- ========================================================================== */
-
-.uk-overlay-icon {
-    @if mixin-exists(hook-overlay-icon) {
-        @include hook-overlay-icon;
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Default
- */
-
-.uk-overlay-default {
-    background: var(--overlay-default-background);
-    @if mixin-exists(hook-overlay-default) {
-        @include hook-overlay-default;
-    }
-}
-
-/*
- * Primary
- */
-
-.uk-overlay-primary {
-    background: var(--overlay-primary-background);
-    @if mixin-exists(hook-overlay-primary) {
-        @include hook-overlay-primary;
-    }
-}
-
-// Color Mode
-@if $overlay-primary-color-mode == light {
-    .uk-overlay-primary {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $overlay-primary-color-mode == dark {
-    .uk-overlay-primary {
-        @extend .uk-dark !optional;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-overlay-misc) {
-    @include hook-overlay-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --overlay-padding-horizontal: var(--global-gutter);
-    --overlay-padding-vertical: var(--global-gutter);
-    --overlay-default-background: #{$overlay-default-background};
-    --overlay-primary-background: #{$overlay-primary-background};
-}
+@import '../components/Overlay/index.scss';

package/dist/cjs/styles/variables.scss

@@ -521,6 +521,7 @@ $card-default-background:                                       $global-muted-ba
 $card-default-color:                                            $global-color !default;
 $card-default-title-color:                                      $global-emphasis-color !default;
 $card-default-hover-background:                                 darken($card-default-background, 5%) !default;
+$card-default-color-mode:                                       dark !default;
 $card-primary-background:                                       $global-primary-background !default;
 $card-primary-color:                                            $global-inverse-color !default;
 $card-primary-title-color:                                      $card-primary-color !default;
@@ -643,13 +644,13 @@ $divider-icon-line-top:                                         50% !default;
 $divider-icon-line-width:                                       100% !default;
 $divider-icon-line-border-width:                                $global-border-width !default;
 $divider-icon-line-border:                                      $global-border !default;
-$divider-icon-image-path:                                       'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
 $divider-small-width:                                           100px !default;
 $divider-small-border-width:                                    $global-border-width !default;
 $divider-small-border:                                          $global-border !default;
 $divider-vertical-height:                                       100px !default;
 $divider-vertical-border-width:                                 $global-border-width !default;
 $divider-vertical-border:                                       $global-border !default;
+$internal-divider-icon-image:                                   'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
 
 // Inverse
 $inverse-divider-icon-color:                                    $inverse-global-border !default;
@@ -1489,7 +1490,9 @@ $section-large-padding-vertical-m:                              $global-xlarge-m
 $section-xlarge-padding-vertical:                               $global-xlarge-margin !default;
 $section-xlarge-padding-vertical-m:                             ($global-large-margin + $global-xlarge-margin) !default;
 $section-default-background:                                    $global-background !default;
+$section-default-color-mode:                                    dark !default;
 $section-muted-background:                                      $global-muted-background !default;
+$section-muted-color-mode:                                      dark !default;
 $section-primary-background:                                    $global-primary-background !default;
 $section-primary-color-mode:                                    light !default;
 $section-secondary-background:                                  $global-secondary-background !default;
@@ -1746,7 +1749,9 @@ $tile-large-padding-vertical-m:                                 $global-xlarge-m
 $tile-xlarge-padding-vertical:                                  $global-xlarge-margin !default;
 $tile-xlarge-padding-vertical-m:                                ($global-large-margin + $global-xlarge-margin) !default;
 $tile-default-background:                                       $global-background !default;
+$tile-default-color-mode:                                       dark !default;
 $tile-muted-background:                                         $global-muted-background !default;
+$tile-muted-color-mode:                                         dark !default;
 $tile-primary-background:                                       $global-primary-background !default;
 $tile-primary-color-mode:                                       light !default;
 $tile-secondary-background:                                     $global-secondary-background !default;