@broxus/react-uikit 0.1.0

package/dist/cjs/components/Align/Right.js

@@ -0,0 +1,35 @@
+"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.Right = void 0;
+const React = __importStar(require("react"));
+const Align_1 = require("./Align");
+function Right(props) {
+    return React.createElement(Align_1.Align, { ...props, side: "right" });
+}
+exports.Right = Right;
+if (process.env.NODE_ENV !== 'production') {
+    Right.displayName = 'Align.Right';
+}

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

@@ -0,0 +1,10 @@
+import { PolymorphicComponent } from '../Component';
+import { AlignOwnProps } from './Align';
+import { Left } from './Left';
+import { Right } from './Right';
+import './index.scss';
+export declare type CompoundedAlign = PolymorphicComponent<AlignOwnProps> & {
+    Left: typeof Left;
+    Right: typeof Right;
+};
+export declare const Align: CompoundedAlign;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Align = void 0;
+const Align_1 = require("./Align");
+const Left_1 = require("./Left");
+const Right_1 = require("./Right");
+require("./index.scss");
+exports.Align = Align_1.Align;
+exports.Align.Left = Left_1.Left;
+exports.Align.Right = Right_1.Right;

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

@@ -0,0 +1,147 @@
+// Name:            Align
+// Description:     Utilities to align embedded content
+//
+// Component:       `uk-align-left-*`
+//                  `uk-align-right-*`
+//                  `uk-align-center`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Align
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+[class*='uk-align'] {
+    display: block;
+    margin-bottom: var(--align-margin-vertical);
+}
+
+* + [class*='uk-align'] {
+    margin-top: var(--align-margin-vertical);
+}
+
+/*
+ * Center
+ */
+
+.uk-align-center {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/*
+ * Left/Right
+ */
+
+.uk-align-left {
+    float: left;
+    margin-right: var(--align-margin-horizontal);
+    margin-top: 0;
+}
+
+.uk-align-right {
+    float: right;
+    margin-left: var(--align-margin-horizontal);
+    margin-top: 0;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+    .uk-align-left\@s {
+        float: left;
+        margin-right: var(--align-margin-horizontal);
+        margin-top: 0;
+    }
+
+    .uk-align-right\@s {
+        float: right;
+        margin-left: var(--align-margin-horizontal);
+        margin-top: 0;
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-align-left\@m {
+        float: left;
+        margin-right: var(--align-margin-horizontal);
+        margin-top: 0;
+    }
+
+    .uk-align-right\@m {
+        float: right;
+        margin-left: var(--align-margin-horizontal);
+        margin-top: 0;
+    }
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-align-left\@l {
+        float: left;
+        margin-top: 0;
+    }
+
+    .uk-align-right\@l {
+        float: right;
+        margin-top: 0;
+    }
+
+    .uk-align-left,
+    .uk-align-left\@s,
+    .uk-align-left\@m,
+    .uk-align-left\@l {
+        margin-right: var(--align-margin-horizontal-l);
+    }
+
+    .uk-align-right,
+    .uk-align-right\@s,
+    .uk-align-right\@m,
+    .uk-align-right\@l {
+        margin-left: var(--align-margin-horizontal-l);
+    }
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+    .uk-align-left\@xl {
+        float: left;
+        margin-right: var(--align-margin-horizontal-l);
+        margin-top: 0;
+    }
+
+    .uk-align-right\@xl {
+        float: right;
+        margin-left: var(--align-margin-horizontal-l);
+        margin-top: 0;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-align-misc) {
+    @include hook-align-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --align-margin-horizontal: var(--global-gutter);
+    --align-margin-horizontal-l: var(--global-medium-gutter);
+    --align-margin-vertical: var(--global-gutter);
+}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ArticleProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
+}
+export declare function Article(props: ArticleProps): JSX.Element;

package/dist/cjs/components/Article/Article.js

@@ -0,0 +1,38 @@
+"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.Article = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+function Article(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
+    return (React.createElement("article", { className: (0, classnames_1.default)(prefixCls, className), ...restProps }));
+}
+exports.Article = Article;

package/dist/cjs/components/Article/Meta.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type ArticleMetaOwnProps = {
+    prefixCls?: string;
+};
+export declare type ArticleMetaProps<E extends React.ElementType> = PolymorphicComponentProps<E, ArticleMetaOwnProps>;
+declare const defaultElement = "p";
+export declare function Meta<E extends React.ElementType = typeof defaultElement>(props: ArticleMetaProps<E>): JSX.Element;
+export declare namespace Meta {
+    var displayName: string;
+}
+export {};

package/dist/cjs/components/Article/Meta.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.Meta = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
+const defaultElement = 'p';
+function Meta(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(`${prefixCls}-meta`, className), component: defaultElement, ...restProps }));
+}
+exports.Meta = Meta;
+if (process.env.NODE_ENV !== 'production') {
+    Meta.displayName = 'Article.Meta';
+}

package/dist/cjs/components/Article/Title.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type ArticleTitleOwnProps = {
+    prefixCls?: string;
+};
+export declare type ArticleTitleProps<E extends React.ElementType> = PolymorphicComponentProps<E, ArticleTitleOwnProps>;
+declare const defaultElement = "h1";
+export declare function Title<E extends React.ElementType = typeof defaultElement>(props: ArticleTitleProps<E>): JSX.Element;
+export declare namespace Title {
+    var displayName: string;
+}
+export {};

package/dist/cjs/components/Article/Title.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.Title = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
+const defaultElement = 'h1';
+function Title(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(`${prefixCls}-title`, className), component: defaultElement, ...restProps }));
+}
+exports.Title = Title;
+if (process.env.NODE_ENV !== 'production') {
+    Title.displayName = 'Article.Title';
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Meta } from './Meta';
+import { Title } from './Title';
+import type { ArticleProps } from './Article';
+import type { ArticleMetaProps } from './Meta';
+import type { ArticleTitleProps } from './Title';
+import './index.scss';
+export type { ArticleProps, ArticleMetaProps, ArticleTitleProps };
+export interface CompoundedArticle extends React.FunctionComponent<ArticleProps> {
+    Meta: typeof Meta;
+    Title: typeof Title;
+}
+export declare const Article: CompoundedArticle;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Article = void 0;
+const Article_1 = require("./Article");
+const Meta_1 = require("./Meta");
+const Title_1 = require("./Title");
+require("./index.scss");
+exports.Article = Article_1.Article;
+exports.Article.Meta = Meta_1.Meta;
+exports.Article.Title = Title_1.Title;

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

@@ -0,0 +1,103 @@
+// Name:            Article
+// Description:     Component to create articles
+//
+// Component:       `uk-article`
+//
+// Sub-objects:     `uk-article-title`
+//                  `uk-article-meta`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Article
+ ========================================================================== */
+
+.uk-article {
+    display: flow-root;
+    @if mixin-exists(hook-article) {
+        @include hook-article;
+    }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-article > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Adjacent sibling
+ ========================================================================== */
+
+.uk-article + .uk-article {
+    margin-top: var(--article-margin-top);
+    @if mixin-exists(hook-article-adjacent) {
+        @include hook-article-adjacent;
+    }
+}
+
+
+/* Title
+ ========================================================================== */
+
+.uk-article-title {
+    font-size: var(--article-title-font-size);
+    line-height: var(--article-title-line-height);
+    @if mixin-exists(hook-article-title) {
+        @include hook-article-title;
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-article-title {
+        font-size: var(--article-title-font-size-m);
+    }
+}
+
+
+/* Meta
+ ========================================================================== */
+
+.uk-article-meta {
+    color: var(--article-meta-color);
+    font-size: var(--article-meta-font-size);
+    line-height: var(--article-meta-line-height);
+    @if mixin-exists(hook-article-meta) {
+        @include hook-article-meta;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-article-misc) {
+    @include hook-article-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --article-margin-top: var(--global-large-margin);
+    --article-title-font-size-m: var(--global-2xlarge-font-size);
+    --article-title-font-size: calc(var(--article-title-font-size-m) * 0.85);
+    --article-title-line-height: #{$article-title-line-height};
+    --article-meta-font-size: var(--global-small-font-size);
+    --article-meta-line-height: #{$article-meta-line-height};
+    --article-meta-color: var(--global-muted-color);
+
+    // Inverse
+    --inverse-article-meta-color: var(--inverse-global-muted-color);
+}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export declare type BadgeOwnProps = {
+    prefixCls?: string;
+};
+export declare type BadgeProps<E extends React.ElementType> = PolymorphicComponentProps<E, BadgeOwnProps>;
+declare const defaultElement = "span";
+export declare function Badge<E extends React.ElementType = typeof defaultElement>(props: BadgeProps<E>): JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+"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.Badge = 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 = 'span';
+function Badge(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = `${config.prefixCls}-badge`, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(prefixCls, className), component: defaultElement, ...restProps }));
+}
+exports.Badge = Badge;

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

@@ -0,0 +1,83 @@
+// Name:            Badge
+// Description:     Component to create notification badges
+//
+// Component:       `uk-badge`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Badge
+ ========================================================================== */
+
+/*
+ * 1. Style
+ * 2. Center child vertically and horizontally
+ */
+
+.uk-badge {
+    align-items: center; /* 2 */
+    background: var(--badge-background); /* 1 */
+    border-radius: var(--badge-border-radius);
+    box-sizing: border-box;
+    color: var(--badge-color); /* 1 */
+    display: inline-flex; /* 2 */
+    font-size: var(--badge-font-size); /* 1 */
+    height: var(--badge-size);
+    justify-content: center; /* 2 */
+    line-height: 0;
+    min-width: var(--badge-size);
+    padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
+    vertical-align: middle;
+    @if mixin-exists(hook-badge) {
+        @include hook-badge;
+    }
+}
+
+/*
+ * Required for `a`
+ */
+
+.uk-badge:hover,
+.uk-badge:focus {
+    color: var(--badge-hover-color);
+    outline: none;
+    text-decoration: none;
+    @if mixin-exists(hook-badge-hover) {
+        @include hook-badge-hover;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-badge-misc) {
+    @include hook-badge-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --badge-size: #{$badge-size};
+    --badge-padding-vertical: #{$badge-padding-vertical};
+    --badge-padding-horizontal: #{$badge-padding-horizontal};
+    --badge-border-radius: #{$badge-border-radius};
+    --badge-background: var(--global-primary-background);
+    --badge-color: var(--global-inverse-color);
+    --badge-font-size: var(--global-small-font-size);
+    --badge-hover-color: var(--global-inverse-color);
+
+    // Inverse
+    --inverse-badge-background: var(--inverse-global-primary-background);
+    --inverse-badge-color: var(--inverse-global-inverse-color);
+    --inverse-badge-hover-color: var(--inverse-global-inverse-color);
+}

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

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

package/dist/cjs/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,38 @@
+"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.Breadcrumb = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+function Breadcrumb(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = `${config.prefixCls}-breadcrumb`, ...restProps } = props;
+    return (React.createElement("ul", { className: (0, classnames_1.default)(prefixCls, className), ...restProps }));
+}
+exports.Breadcrumb = Breadcrumb;