@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,123 @@
+// Name:            Label
+// Description:     Component to indicate important notes
+//
+// Component:       `uk-label`
+//
+// Modifiers:       `uk-label-large`
+//                  `uk-label-success`
+//                  `uk-label-warning`
+//                  `uk-label-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Label
+ ========================================================================== */
+
+.uk-label {
+    background: var(--label-background);
+    border-radius: var(--label-border-radius);
+    color: var(--label-color);
+    display: inline-block;
+    font-size: var(--label-font-size);
+    line-height: var(--label-line-height);
+    padding: var(--label-padding-vertical) var(--label-padding-horizontal);
+    vertical-align: middle;
+    white-space: nowrap;
+    @if mixin-exists(hook-label) {
+        @include hook-label;
+    }
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+.uk-label-large {
+    font-size: var(--label-large-font-size);
+    line-height: var(--label-large-line-height);
+    padding: var(--label-large-padding-vertical) var(--label-large-padding-horizontal);
+}
+
+
+/* Color modifiers
+ ========================================================================== */
+
+/*
+ * Success
+ */
+
+.uk-label-success {
+    background-color: var(--label-success-background);
+    color: var(--label-success-color);
+    @if mixin-exists(hook-label-success) {
+        @include hook-label-success;
+    }
+}
+
+/*
+ * Warning
+ */
+
+.uk-label-warning {
+    background-color: var(--label-warning-background);
+    color: var(--label-warning-color);
+    @if mixin-exists(hook-label-warning) {
+        @include hook-label-warning;
+    }
+}
+
+/*
+ * Danger
+ */
+
+.uk-label-danger {
+    background-color: var(--label-danger-background);
+    color: var(--label-danger-color);
+    @if mixin-exists(hook-label-danger) {
+        @include hook-label-danger;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-label-misc) {
+    @include hook-label-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --label-padding-vertical: #{$label-padding-vertical};
+    --label-padding-horizontal: var(--global-small-margin);
+    --label-background: var(--global-primary-background);
+    --label-border-radius: #{$label-border-radius};
+    --label-line-height: var(--global-line-height);
+    --label-font-size: var(--global-small-font-size);
+    --label-large-padding-vertical: var(--global-xsmall-margin);
+    --label-large-padding-horizontal: var(--global-margin);
+    --label-large-line-height: var(--global-line-height);
+    --label-large-font-size: var(--global-small-font-size);
+    --label-color: var(--global-inverse-color);
+    --label-success-background: var(--global-success-background);
+    --label-success-color: var(--global-inverse-color);
+    --label-warning-background: var(--global-warning-background);
+    --label-warning-color: var(--global-inverse-color);
+    --label-danger-background: var(--global-danger-background);
+    --label-danger-color: var(--global-inverse-color);
+
+    // Inverse
+    --inverse-label-background: var(--inverse-global-primary-background);
+    --inverse-label-color: var(--inverse-global-inverse-color);
+}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export interface LinkOwnProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    prefixCls?: string;
+    type?: 'heading' | 'muted' | 'reset' | 'text' | 'toggle';
+}
+export declare type LinkProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, LinkOwnProps>;
+export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps<React.ElementType<any>>, string | number | symbol> & React.RefAttributes<unknown>>;

package/dist/cjs/components/Link/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.Link = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
+require("./index.scss");
+const defaultElement = 'a';
+exports.Link = React.forwardRef((props, ref) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { children, className, prefixCls = `${config.prefixCls}-link`, type, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { ref: ref, className: (0, classnames_1.default)({
+            [`${prefixCls}-${type}`]: type !== undefined,
+        }, className), component: defaultElement, ...restProps }, children));
+});

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

@@ -0,0 +1,149 @@
+// Name:            Link
+// Description:     Styles for links
+//
+// Component:       `uk-link-muted`
+//                  `uk-link-text`
+//                  `uk-link-heading`
+//                  `uk-link-reset`
+//
+// Sub-objects:     `uk-link-toggle`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Link
+ ========================================================================== */
+
+
+/* Muted
+ ========================================================================== */
+
+// noinspection Stylelint
+a.uk-link-muted,
+.uk-link-muted a {
+    color: var(--link-muted-color);
+    @if mixin-exists(hook-link-muted) {
+        @include hook-link-muted;
+    }
+}
+
+a.uk-link-muted:hover,
+.uk-link-muted a:hover,
+.uk-link-toggle:hover .uk-link-muted,
+.uk-link-toggle:focus .uk-link-muted {
+    color: var(--link-muted-hover-color);
+    @if mixin-exists(hook-link-muted-hover) {
+        @include hook-link-muted-hover;
+    }
+}
+
+
+/* Text
+ ========================================================================== */
+
+// noinspection Stylelint
+a.uk-link-text,
+.uk-link-text a {
+    color: inherit;
+    @if mixin-exists(hook-link-text) {
+        @include hook-link-text;
+    }
+}
+
+a.uk-link-text:hover,
+.uk-link-text a:hover,
+.uk-link-toggle:hover .uk-link-text,
+.uk-link-toggle:focus .uk-link-text {
+    color: var(--link-text-hover-color);
+    @if mixin-exists(hook-link-text-hover) {
+        @include hook-link-text-hover;
+    }
+}
+
+
+/* Heading
+ ========================================================================== */
+
+// noinspection Stylelint
+a.uk-link-heading,
+.uk-link-heading a {
+    color: inherit;
+    @if mixin-exists(hook-link-heading) {
+        @include hook-link-heading;
+    }
+}
+
+a.uk-link-heading:hover,
+.uk-link-heading a:hover,
+.uk-link-toggle:hover .uk-link-heading,
+.uk-link-toggle:focus .uk-link-heading {
+    color: var(--link-heading-hover-color);
+    text-decoration: var(--link-heading-hover-text-decoration);
+    @if mixin-exists(hook-link-heading-hover) {
+        @include hook-link-heading-hover;
+    }
+}
+
+
+/* Reset
+ ========================================================================== */
+
+/*
+ * `!important` needed to override inverse component
+ */
+
+// noinspection Stylelint
+a.uk-link-reset,
+.uk-link-reset a {
+    color: inherit !important;
+    text-decoration: none !important;
+    @if mixin-exists(hook-link-reset) {
+        @include hook-link-reset;
+    }
+}
+
+
+/* Toggle
+ ========================================================================== */
+
+.uk-link-toggle {
+    color: inherit !important;
+    text-decoration: none !important;
+}
+
+.uk-link-toggle:focus {
+    outline: none;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-link-misc) {
+    @include hook-link-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --link-muted-color: var(--global-muted-color);
+    --link-muted-hover-color: var(--global-color);
+    --link-text-hover-color: var(--global-muted-color);
+    --link-heading-hover-color: var(--global-primary-background);
+    --link-heading-hover-text-decoration: #{$link-heading-hover-text-decoration};
+
+    // Inverse
+    --inverse-link-muted-color: var(--inverse-global-muted-color);
+    --inverse-link-muted-hover-color: var(--inverse-global-color);
+    --inverse-link-text-hover-color: var(--inverse-global-muted-color);
+    --inverse-link-heading-hover-color: var(--inverse-global-primary-background);
+}

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare type Props = React.LiHTMLAttributes<HTMLLIElement>;
+export declare function Item(props: Props): JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,34 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const React = __importStar(require("react"));
+function Item(props) {
+    return React.createElement("li", { ...props });
+}
+exports.Item = Item;
+if (process.env.NODE_ENV !== 'production') {
+    Item.displayName = 'List.Item';
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
+    color?: 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary';
+    prefixCls?: string;
+    size?: 'large' | 'collapse';
+    type?: 'bullet' | 'disc' | 'divider' | 'striped' | 'circle' | 'square' | 'decimal' | 'hyphen';
+}
+export declare function List(props: ListProps): JSX.Element;

package/dist/cjs/components/List/List.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.List = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+function List(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, color, prefixCls = `${config.prefixCls}-list`, size, type, ...restProps } = props;
+    return (React.createElement("ul", { className: (0, classnames_1.default)(prefixCls, {
+            [`${prefixCls}-${color}`]: color !== undefined,
+            [`${prefixCls}-${size}`]: size !== undefined,
+            [`${prefixCls}-${type}`]: type !== undefined,
+        }, className), ...restProps }));
+}
+exports.List = List;

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

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

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

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