@broxus/react-uikit 0.1.0

package/dist/esm/components/Article/Meta.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+const defaultElement = 'p';
+export function Meta(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(`${prefixCls}-meta`, className), component: defaultElement, ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Meta.displayName = 'Article.Meta';
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+const defaultElement = 'h1';
+export function Title(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(`${prefixCls}-title`, className), component: defaultElement, ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Title.displayName = 'Article.Title';
+}

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

@@ -0,0 +1,7 @@
+import { Article as InternalArticle } from './Article';
+import { Meta } from './Meta';
+import { Title } from './Title';
+import './index.scss';
+export const Article = InternalArticle;
+Article.Meta = Meta;
+Article.Title = Title;

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+import './index.scss';
+const defaultElement = 'span';
+export function Badge(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-badge`, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+export function Breadcrumb(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-breadcrumb`, ...restProps } = props;
+    return (React.createElement("ul", { className: classNames(prefixCls, className), ...restProps }));
+}

package/dist/esm/components/Breadcrumb/Item.d.ts

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

package/dist/esm/components/Breadcrumb/Item.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+export function Item(props) {
+    const config = useConfig();
+    const { className, disabled, ...restProps } = props;
+    return (React.createElement("li", { className: classNames(className, {
+            [`${config.prefixCls}-disabled`]: disabled,
+        }), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Item.displayName = 'Breadcrumb.Item';
+}

package/dist/esm/components/Breadcrumb/index.d.ts

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

package/dist/esm/components/Breadcrumb/index.js

@@ -0,0 +1,5 @@
+import { Breadcrumb as InnerBreadcrumb } from './Breadcrumb';
+import { Item } from './Item';
+import './index.scss';
+export const Breadcrumb = InnerBreadcrumb;
+Breadcrumb.Item = Item;

package/dist/esm/components/Breadcrumb/index.scss

@@ -0,0 +1,127 @@
+// Name:            Breadcrumb
+// Description:     Component to create a breadcrumb navigation
+//
+// Component:       `uk-breadcrumb`
+//
+// States:          `uk-disabled`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Breadcrumb
+ ========================================================================== */
+
+/*
+ * Reset list
+ */
+
+.uk-breadcrumb {
+    list-style: none;
+    padding: 0;
+    @if mixin-exists(hook-breadcrumb) {
+        @include hook-breadcrumb;
+    }
+}
+
+/*
+ * 1. Doesn't generate any box and replaced by child boxes
+ */
+
+.uk-breadcrumb > * {
+    display: contents;
+}
+
+
+/* Items
+ ========================================================================== */
+
+.uk-breadcrumb > * > * {
+    color: var(--breadcrumb-item-color);
+    font-size: var(--breadcrumb-item-font-size);
+    @if mixin-exists(hook-breadcrumb-item) {
+        @include hook-breadcrumb-item;
+    }
+}
+
+/* Hover + Focus */
+.uk-breadcrumb > * > :hover,
+.uk-breadcrumb > * > :focus {
+    color: var(--breadcrumb-item-hover-color);
+    text-decoration: var(--breadcrumb-item-hover-text-decoration);
+    @if mixin-exists(hook-breadcrumb-item-hover) {
+        @include hook-breadcrumb-item-hover;
+    }
+}
+
+/* Disabled */
+.uk-breadcrumb > .uk-disabled > * {
+    @if mixin-exists(hook-breadcrumb-item-disabled) {
+        @include hook-breadcrumb-item-disabled;
+    }
+}
+
+/* Active */
+.uk-breadcrumb > :last-child > span,
+.uk-breadcrumb > :last-child > a:not([href]) {
+    color: var(--breadcrumb-item-active-color);
+    @if mixin-exists(hook-breadcrumb-item-active) {
+        @include hook-breadcrumb-item-active;
+    }
+}
+
+/*
+ * Divider
+ * `nth-child` makes it also work without JS if it's only one row
+ * 1. Remove space between inline block elements.
+ * 2. Style
+ */
+
+.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
+    color: var(--breadcrumb-divider-color); /* 2 */
+    content: var(--breadcrumb-divider);
+    display: inline-block;
+    font-size: var(--breadcrumb-divider-font-size); /* 2 */
+
+    /* 1 */
+    margin: 0 var(--breadcrumb-divider-margin-horizontal) 0 calc(var(--breadcrumb-divider-margin-horizontal) - 4px);
+    @if mixin-exists(hook-breadcrumb-divider) {
+        @include hook-breadcrumb-divider;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-breadcrumb-misc) {
+    @include hook-breadcrumb-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --breadcrumb-item-font-size: var(--global-small-font-size);
+    --breadcrumb-item-color: var(--global-muted-color);
+    --breadcrumb-item-hover-color: var(--global-color);
+    --breadcrumb-item-hover-text-decoration: #{$breadcrumb-item-hover-text-decoration};
+    --breadcrumb-item-active-color: var(--global-color);
+    --breadcrumb-divider: #{$breadcrumb-divider};
+    --breadcrumb-divider-margin-horizontal: #{$breadcrumb-divider-margin-horizontal};
+    --breadcrumb-divider-font-size: var(--breadcrumb-item-font-size);
+    --breadcrumb-divider-color: var(--global-muted-color);
+
+    // Inverse
+    --inverse-breadcrumb-item-color: var(--inverse-global-muted-color);
+    --inverse-breadcrumb-item-hover-color: var(--inverse-global-color);
+    --inverse-breadcrumb-item-active-color: var(--inverse-global-color);
+    --inverse-breadcrumb-divider-color: var(--inverse-global-muted-color);
+}

package/dist/esm/components/Button/Button.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface AnchorButtonProps extends Omit<React.AnchorHTMLAttributes<any>, 'onClick'> {
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+}
+export interface NativeButtonProps extends Omit<React.ButtonHTMLAttributes<any>, 'type' | 'onClick'> {
+    htmlType?: 'button' | 'reset' | 'submit';
+    onClick?: React.MouseEventHandler<HTMLElement>;
+}
+export interface ButtonProps extends Partial<AnchorButtonProps>, Partial<NativeButtonProps> {
+    ghost?: boolean;
+    prefixCls?: string;
+    shape?: 'circle' | 'round';
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'text';
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<unknown>>;

package/dist/esm/components/Button/Button.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+import { Link } from '../Link';
+/* eslint-disable react/prop-types */
+export const Button = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const { children, ghost, htmlType = 'button', prefixCls = `${config.prefixCls}-button`, shape, size, type, ...restProps } = props;
+    const buttonRef = ref || React.useRef(null);
+    const onClick = event => {
+        if (restProps.disabled) {
+            event.preventDefault();
+            return;
+        }
+        restProps.onClick?.(event);
+    };
+    const className = classNames(prefixCls, {
+        [`${prefixCls}-${type}`]: type !== undefined,
+        [`${prefixCls}-ghost`]: ghost !== undefined,
+        [`${prefixCls}-${size}`]: size !== undefined,
+        [`${prefixCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
+    }, restProps.className);
+    if (restProps.href !== undefined) {
+        return (React.createElement(Link, { ref: buttonRef, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
+    }
+    return (React.createElement("button", { ref: buttonRef, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Button.displayName = 'Button';
+}

package/dist/esm/components/Button/Group.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
+}
+export declare function Group(props: ButtonGroupProps): JSX.Element;
+export declare namespace Group {
+    var displayName: string;
+}

package/dist/esm/components/Button/Group.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+export function Group(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-button-group`, ...restProps } = props;
+    return (React.createElement("div", { className: classNames(prefixCls, className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Group.displayName = 'Button.Group';
+}

package/dist/esm/components/Button/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Group } from './Group';
+import type { ButtonProps } from './Button';
+import './index.scss';
+export type { ButtonProps };
+export interface CompoundedButton extends React.ForwardRefExoticComponent<ButtonProps> {
+    Group: typeof Group;
+}
+export declare const Button: CompoundedButton;

package/dist/esm/components/Button/index.js

@@ -0,0 +1,5 @@
+import { Button as InternalButton } from './Button';
+import { Group } from './Group';
+import './index.scss';
+export const Button = InternalButton;
+Button.Group = Group;