@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,265 @@
+// Name:            Icon
+// Description:     Component to create icons
+//
+// Component:       `uk-icon`
+//
+// Modifiers:       `uk-icon-image`
+//                  `uk-icon-link`
+//                  `uk-icon-button`
+//
+// States:          `uk-preserve`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Icon
+ ========================================================================== */
+
+/*
+ * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
+ * 1. Remove margins in Chrome, Safari and Opera.
+ * 2. Remove borders for `button`.
+ * 3. Remove border-radius in Chrome.
+ * 4. Address `overflow` set to `hidden` in IE.
+ * 5. Correct `font` properties and `color` not being inherited for `button`.
+ * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 7. Remove default `button` padding and background color
+ * 8. Style
+ * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
+ * 10. Let the container fit the height of the icon
+ */
+
+.uk-icon {
+    background-color: transparent; /* 7 */
+    border: none; /* 2 */
+    border-radius: 0; /* 3 */
+    color: inherit;
+    display: inline-block; /* 8 */
+    fill: currentColor; /* 9 */
+    font: inherit; /* 5 */
+    line-height: 0; /* 10 */
+    margin: 0; /* 1 */
+    overflow: visible; /* 4 */
+    padding: 0; /* 7 */
+    text-transform: none; /* 6 */
+}
+
+/* Required for `button`. */
+button.uk-icon:not(:disabled) {
+    cursor: pointer;
+}
+
+/*
+ * Remove the inner border and padding in Firefox.
+ */
+
+.uk-icon::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * Set the fill and stroke color of all SVG elements to the current text color
+ */
+
+.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) {
+    fill: currentColor;
+}
+
+.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) {
+    stroke: currentColor;
+}
+
+/*
+ * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+ */
+
+.uk-icon > * {
+    transform: translate(0, 0);
+}
+
+
+/* Image modifier
+ ========================================================================== */
+
+/*
+ * Display images in icon dimensions
+ */
+
+.uk-icon-image {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: var(--icon-image-size);
+    vertical-align: middle;
+    width: var(--icon-image-size);
+}
+
+
+/* Material UI icons modifier
+ ========================================================================== */
+
+.uk-icon-material {
+    &:not(.uk-icon-button) {
+        height: var(--icon-size, 20px);
+        min-width: var(--icon-size, 20px);
+        width: var(--icon-size, 20px);
+    }
+
+    i {
+        direction: ltr;
+        display: inline-block;
+
+        // noinspection Stylelint,CssNoGenericFontName
+        font-family: 'Material Icons Outlined';
+
+        /* Support for IE. */
+        font-feature-settings: 'liga';
+        font-size: var(--icon-size, 20px);
+
+        /* Support for all WebKit browsers. */
+        -webkit-font-smoothing: antialiased;
+
+        /* Support for Firefox. */
+        -moz-osx-font-smoothing: grayscale;
+        font-style: normal;
+        font-weight: normal;
+        letter-spacing: normal;
+        line-height: 1;
+        text-decoration: none;
+
+        /* Support for Safari and Chrome. */
+        text-rendering: optimizeLegibility;
+        text-transform: none;
+        vertical-align: middle;
+        white-space: nowrap;
+        word-wrap: normal;
+
+        &.uk-icon-round {
+            // noinspection Stylelint,CssNoGenericFontName
+            font-family: 'Material Icons Round';
+        }
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Link
+ */
+
+.uk-icon-link {
+    color: var(--icon-link-color);
+    @if mixin-exists(hook-icon-link) {
+        @include hook-icon-link;
+    }
+}
+
+.uk-icon-link:hover,
+.uk-icon-link:focus {
+    color: var(--icon-link-hover-color);
+    outline: none;
+    text-decoration: none;
+    @if mixin-exists(hook-icon-link-hover) {
+        @include hook-icon-link-hover;
+    }
+}
+
+/* OnClick + Active */
+.uk-icon-link:active,
+.uk-active > .uk-icon-link {
+    color: var(--icon-link-active-color);
+    @if mixin-exists(hook-icon-link-active) {
+        @include hook-icon-link-active;
+    }
+}
+
+/*
+ * Button
+ * 1. Center icon vertically and horizontally
+ */
+
+.uk-icon-button {
+    align-items: center; /* 1 */
+    background: var(--icon-button-background);
+    border-radius: var(--icon-button-border-radius);
+    box-sizing: border-box;
+    color: var(--icon-button-color);
+    display: inline-flex; /* 1 */
+    height: var(--icon-button-size);
+    justify-content: center; /* 1 */
+    vertical-align: middle;
+    width: var(--icon-button-size);
+    @if mixin-exists(hook-icon-button) {
+        @include hook-icon-button;
+    }
+}
+
+/* Hover + Focus */
+.uk-icon-button:hover,
+.uk-icon-button:focus {
+    background-color: var(--icon-button-hover-background);
+    color: var(--icon-button-hover-color);
+    outline: none;
+    text-decoration: none;
+    @if mixin-exists(hook-icon-button-hover) {
+        @include hook-icon-button-hover;
+    }
+}
+
+/* OnClick + Active */
+.uk-icon-button:active,
+.uk-active > .uk-icon-button {
+    background-color: var(--icon-button-active-background);
+    color: var(--icon-button-active-color);
+    @if mixin-exists(hook-icon-button-active) {
+        @include hook-icon-button-active;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-icon-misc) {
+    @include hook-icon-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --icon-image-size: #{$icon-image-size};
+    --icon-link-color: var(--global-muted-color);
+    --icon-link-hover-color: var(--global-color);
+    --icon-link-active-color: #{$icon-link-active-color};
+    --icon-button-size: #{$icon-button-size};
+    --icon-button-border-radius: #{$icon-button-border-radius};
+    --icon-button-background: var(--global-muted-background);
+    --icon-button-color: var(--global-muted-color);
+    --icon-button-hover-background: #{$icon-button-hover-background};
+    --icon-button-hover-color: var(--global-color);
+    --icon-button-active-background: #{$icon-button-active-background};
+    --icon-button-active-color: var(--global-color);
+
+    // Inverse
+    --inverse-icon-link-color: var(--inverse-global-muted-color);
+    --inverse-icon-link-hover-color: var(--inverse-global-color);
+    --inverse-icon-link-active-color: var(--inverse-global-color);
+    --inverse-icon-button-background: var(--inverse-global-muted-background);
+    --inverse-icon-button-color: var(--inverse-global-muted-color);
+    --inverse-icon-button-hover-background: #{$inverse-icon-button-hover-background};
+    --inverse-icon-button-hover-color: var(--inverse-global-color);
+    --inverse-icon-button-active-background: #{$inverse-icon-button-active-background};
+    --inverse-icon-button-active-color: var(--inverse-global-color);
+}

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface IconnavProps extends React.HTMLAttributes<HTMLUListElement> {
+    prefixCls?: string;
+    vertical?: boolean;
+}
+export declare function Iconnav(props: IconnavProps): JSX.Element;

package/dist/cjs/components/Iconnav/Iconnav.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Iconnav = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+function Iconnav(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = `${config.prefixCls}-iconnav`, vertical, ...restProps } = props;
+    return (React.createElement("ul", { className: (0, classnames_1.default)(prefixCls, {
+            [`${prefixCls}-vertical`]: vertical,
+        }, className), ...restProps }));
+}
+exports.Iconnav = Iconnav;

package/dist/cjs/components/Iconnav/Item.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface IconnavItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    isActive?: boolean;
+    prefixCls?: string;
+}
+export declare function Item(props: IconnavItemProps): JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}

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

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+function Item(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { children, className, isActive, ...restProps } = props;
+    return (React.createElement("li", { className: (0, classnames_1.default)({
+            [`${config}-active`]: isActive,
+        }, className), ...restProps }, children));
+}
+exports.Item = Item;
+if (process.env.NODE_ENV !== 'production') {
+    Item.displayName = 'Iconnav.Item';
+}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Item } from './Item';
+import type { IconnavProps } from './Iconnav';
+import './index.scss';
+export type { IconnavProps };
+export interface CompoundedIconnav extends React.FunctionComponent<IconnavProps> {
+    Item: typeof Item;
+}
+export declare const Iconnav: CompoundedIconnav;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Iconnav = void 0;
+const Iconnav_1 = require("./Iconnav");
+const Item_1 = require("./Item");
+require("./index.scss");
+exports.Iconnav = Iconnav_1.Iconnav;
+exports.Iconnav.Item = Item_1.Item;

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

@@ -0,0 +1,140 @@
+// Name:            Iconnav
+// Description:     Component to create icon navigations
+//
+// Component:       `uk-iconnav`
+//
+// Modifier:        `uk-iconnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Iconnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+
+.uk-iconnav {
+    display: flex;
+
+    /* 1 */
+    flex-wrap: wrap;
+    list-style: none;
+
+    /* 2 */
+    margin: 0 0 0 /* 3 */ calc(var(--iconnav-margin-horizontal) * -1);
+    padding: 0;
+    @if mixin-exists(hook-iconnav) {
+        @include hook-iconnav;
+    }
+}
+
+/*
+ * Space is allocated based on content dimensions, but shrinks: 0 1 auto
+ * 1. Gutter
+ */
+
+.uk-iconnav > * {
+    /* 1 */
+    padding-left: var(--iconnav-margin-horizontal);
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * 1. Prevent gap if child element is `inline-block`, e.g. an icon
+ * 2. Style
+ */
+
+.uk-iconnav > * > a {
+    /* 2 */
+    color: var(--iconnav-item-color);
+
+    /* 1 */
+    display: block;
+    @if mixin-exists(hook-iconnav-item) {
+        @include hook-iconnav-item;
+    }
+}
+
+/* Hover + Focus */
+.uk-iconnav > * > a:hover,
+.uk-iconnav > * > a:focus {
+    color: var(--iconnav-item-hover-color);
+    outline: none;
+    @if mixin-exists(hook-iconnav-item-hover) {
+        @include hook-iconnav-item-hover;
+    }
+}
+
+/* Active */
+.uk-iconnav > .uk-active > a {
+    color: var(--iconnav-item-active-color);
+    @if mixin-exists(hook-iconnav-item-active) {
+        @include hook-iconnav-item-active;
+    }
+}
+
+
+/* Modifier: 'uk-iconnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-iconnav-vertical {
+    /* 1 */
+    flex-direction: column;
+
+    /* 2 */
+    margin-left: 0;
+    margin-top: calc(var(--iconnav-margin-vertical) * -1);
+}
+
+/* 2 */
+.uk-iconnav-vertical > * {
+    padding-left: 0;
+    padding-top: var(--iconnav-margin-vertical);
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-iconnav-misc) {
+    @include hook-iconnav-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --iconnav-margin-horizontal: var(--global-small-margin);
+    --iconnav-margin-vertical: var(--iconnav-margin-horizontal);
+    --iconnav-item-color: var(--global-muted-color);
+    --iconnav-item-hover-color: var(--global-color);
+    --iconnav-item-active-color: var(--global-color);
+
+    // Inverse
+    --inverse-iconnav-item-color: var(--inverse-global-muted-color);
+    --inverse-iconnav-item-hover-color: var(--inverse-global-color);
+    --inverse-iconnav-item-active-color: var(--inverse-global-color);
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import './index.scss';
+export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+    large?: boolean;
+    prefixCls?: string;
+    type?: 'success' | 'warning' | 'danger';
+}
+export declare function Label(props: LabelProps): JSX.Element;

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

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+require("./index.scss");
+function Label(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, large, prefixCls = `${config.prefixCls}-label`, type, ...restProps } = props;
+    return (React.createElement("span", { className: (0, classnames_1.default)(prefixCls, {
+            [`${prefixCls}-${type}`]: type !== undefined,
+            [`${prefixCls}-large`]: large,
+        }, className), ...restProps }));
+}
+exports.Label = Label;