@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,256 @@
+// Name:            Heading
+// Description:     Styles for headings
+//
+// Component:       `uk-heading-primary`
+//                  `uk-heading-hero`
+//                  `uk-heading-divider`
+//                  `uk-heading-bullet`
+//                  `uk-heading-line`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Heading
+ ========================================================================== */
+
+.uk-heading-small {
+    font-size: var(--heading-small-font-size);
+    line-height: var(--heading-small-line-height);
+    @if mixin-exists(hook-heading-small) {
+        @include hook-heading-small;
+    }
+}
+
+.uk-heading-medium {
+    font-size: var(--heading-medium-font-size);
+    line-height: var(--heading-medium-line-height);
+    @if mixin-exists(hook-heading-medium) {
+        @include hook-heading-medium;
+    }
+}
+
+.uk-heading-large {
+    font-size: var(--heading-large-font-size);
+    line-height: var(--heading-large-line-height);
+    @if mixin-exists(hook-heading-large) {
+        @include hook-heading-large;
+    }
+}
+
+.uk-heading-xlarge {
+    font-size: var(--heading-xlarge-font-size);
+    line-height: var(--heading-xlarge-line-height);
+    @if mixin-exists(hook-heading-xlarge) {
+        @include hook-heading-xlarge;
+    }
+}
+
+.uk-heading-2xlarge {
+    font-size: var(--heading-2xlarge-font-size);
+    line-height: var(--heading-2xlarge-line-height);
+    @if mixin-exists(hook-heading-2xlarge) {
+        @include hook-heading-2xlarge;
+    }
+}
+
+/* Tablet Landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-heading-small {
+        font-size: var(--heading-small-font-size-m);
+    }
+
+    .uk-heading-medium {
+        font-size: var(--heading-medium-font-size-m);
+    }
+
+    .uk-heading-large {
+        font-size: var(--heading-large-font-size-m);
+    }
+
+    .uk-heading-xlarge {
+        font-size: var(--heading-xlarge-font-size-m);
+    }
+
+    .uk-heading-2xlarge {
+        font-size: var(--heading-2xlarge-font-size-m);
+    }
+}
+
+/* Laptop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-heading-medium {
+        font-size: var(--heading-medium-font-size-l);
+    }
+
+    .uk-heading-large {
+        font-size: var(--heading-large-font-size-l);
+    }
+
+    .uk-heading-xlarge {
+        font-size: var(--heading-xlarge-font-size-l);
+    }
+
+    .uk-heading-2xlarge {
+        font-size: var(--heading-2xlarge-font-size-l);
+    }
+}
+
+
+/* Divider
+ ========================================================================== */
+
+.uk-heading-divider {
+    border-bottom: var(--heading-divider-border-width) solid var(--heading-divider-border);
+    padding-bottom: var(--heading-divider-padding-bottom);
+    @if mixin-exists(hook-heading-divider) {
+        @include hook-heading-divider;
+    }
+}
+
+
+/* Bullet
+ ========================================================================== */
+
+.uk-heading-bullet {
+    position: relative;
+}
+
+/*
+ * 1. Using `inline-block` to make it work with text alignment
+ * 2. Center vertically
+ * 3. Style
+ */
+
+.uk-heading-bullet::before {
+    border-left: var(--heading-bullet-border-width) solid var(--heading-bullet-border);
+    content: '';
+
+    /* 1 */
+    display: inline-block;
+
+    /* 3 */
+    height: var(--heading-bullet-height);
+    margin-right: var(--heading-bullet-margin-right);
+
+    /* 2 */
+    position: relative;
+    top: var(--heading-bullet-top);
+    vertical-align: middle;
+    @if mixin-exists(hook-heading-bullet) {
+        @include hook-heading-bullet;
+    }
+}
+
+
+/* Line
+ ========================================================================== */
+
+/*
+ * Clip the child element
+ */
+
+.uk-heading-line {
+    overflow: hidden;
+}
+
+/*
+ * Extra markup is needed to make it work with text align
+ */
+
+.uk-heading-line > * {
+    display: inline-block;
+    position: relative;
+}
+
+/*
+ * 1. Center vertically
+ * 2. Make the element as large as possible. It's clipped by the container.
+ * 3. Style
+ */
+
+.uk-heading-line > ::before,
+.uk-heading-line > ::after {
+    /* 3 */
+    border-bottom: var(--heading-line-border-width) solid var(--heading-line-border);
+    content: '';
+
+    /* 1 */
+    position: absolute;
+    top: calc(var(--heading-line-top) - (var(--heading-line-height) / 2));
+
+    /* 2 */
+    width: var(--heading-line-width);
+    @if mixin-exists(hook-heading-line) {
+        @include hook-heading-line;
+    }
+}
+
+.uk-heading-line > ::before {
+    margin-right: var(--heading-line-margin-horizontal);
+    right: 100%;
+}
+
+.uk-heading-line > ::after {
+    left: 100%;
+    margin-left: var(--heading-line-margin-horizontal);
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-heading-misc) {
+    @include hook-heading-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --heading-medium-font-size-l: #{$heading-medium-font-size-l};
+    --heading-large-font-size-l: #{$heading-large-font-size-l};
+    --heading-xlarge-font-size-l: #{$heading-xlarge-font-size-l};
+    --heading-2xlarge-font-size-l: #{$heading-2xlarge-font-size-l};
+    --heading-small-font-size-m: #{$heading-small-font-size-m};
+    --heading-medium-font-size-m: #{$heading-medium-font-size-m};
+    --heading-large-font-size-m: var(--heading-medium-font-size-l);
+    --heading-xlarge-font-size-m: var(--heading-large-font-size-l);
+    --heading-2xlarge-font-size-m: var(--heading-xlarge-font-size-l);
+    --heading-small-font-size: #{$heading-small-font-size};
+    --heading-medium-font-size: #{$heading-medium-font-size};
+    --heading-large-font-size: #{$heading-large-font-size};
+    --heading-xlarge-font-size: var(--heading-large-font-size-m);
+    --heading-2xlarge-font-size: var(--heading-xlarge-font-size-m);
+    --heading-small-line-height: #{$heading-small-line-height};
+    --heading-medium-line-height: #{$heading-medium-line-height};
+    --heading-large-line-height: #{$heading-large-line-height};
+    --heading-xlarge-line-height: #{$heading-xlarge-line-height};
+    --heading-2xlarge-line-height: #{$heading-2xlarge-line-height};
+    --heading-divider-padding-bottom: #{$heading-divider-padding-bottom};
+    --heading-divider-border-width: #{$heading-divider-border-width};
+    --heading-divider-border: var(--global-border);
+    --heading-bullet-top: #{$heading-bullet-top};
+    --heading-bullet-height: #{$heading-bullet-height};
+    --heading-bullet-margin-right: #{$heading-bullet-margin-right};
+    --heading-bullet-border-width: #{$heading-bullet-border-width};
+    --heading-bullet-border: var(--global-border);
+    --heading-line-top: #{$heading-line-top};
+    --heading-line-height: var(--heading-line-border-width);
+    --heading-line-width: #{$heading-line-width};
+    --heading-line-border-width: #{$heading-line-border-width};
+    --heading-line-border: var(--global-border);
+    --heading-line-margin-horizontal: #{$heading-line-margin-horizontal};
+
+    // Inverse
+    --inverse-heading-divider-border: var(--inverse-global-border);
+    --inverse-heading-bullet-border: var(--inverse-global-border);
+    --inverse-heading-line-border: var(--inverse-global-border);
+}

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

@@ -0,0 +1,5 @@
+import type { IconProps } from './Icon';
+export declare function Button(props: IconProps): JSX.Element;
+export declare namespace Button {
+    var displayName: string;
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Icon } from './Icon';
+export function Button(props) {
+    return (React.createElement(Icon, { component: "button", role: "button", type: "button", ...props }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Button.displayName = 'Icon.Button';
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type IconOwnProps = {
+    icon: string;
+    material?: boolean;
+    mode?: 'button' | 'image' | 'link';
+    prefixCls?: string;
+    round?: boolean;
+};
+export declare type IconProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, IconOwnProps>;
+declare const defaultElement = "span";
+export declare function Icon<E extends React.ElementType = typeof defaultElement>(props: IconProps<E>): JSX.Element | null;
+export {};

package/dist/esm/components/Icon/Icon.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+const defaultElement = 'span';
+export function Icon(props) {
+    const config = useConfig();
+    const { children, className, icon, material = true, mode, prefixCls = `${config.prefixCls}-icon`, round, type, ...restProps } = props;
+    if (!icon) {
+        return null;
+    }
+    return (React.createElement(Component, { className: classNames(prefixCls, {
+            [`${prefixCls}-button`]: type === 'button',
+            [`${prefixCls}-material`]: material,
+            [`${prefixCls}-round`]: material && round,
+            [`${prefixCls}-${mode}`]: mode !== undefined,
+        }, className), component: defaultElement, ...restProps }, material ? React.createElement("i", null, icon) : children));
+}

package/dist/esm/components/Icon/Link.d.ts

@@ -0,0 +1,5 @@
+import type { IconProps } from './Icon';
+export declare function Link(props: IconProps): JSX.Element;
+export declare namespace Link {
+    var displayName: string;
+}

package/dist/esm/components/Icon/Link.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Icon } from './Icon';
+export function Link(props) {
+    return (React.createElement(Icon, { component: "a", ...props, role: "button", type: "link" }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Link.displayName = 'Icon.Link';
+}

package/dist/esm/components/Icon/default-svg-props.d.ts

@@ -0,0 +1,5 @@
+export declare const defaultProps: {
+    fill: string;
+    viewBox: string;
+    xmlns: string;
+};

package/dist/esm/components/Icon/default-svg-props.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+    fill: 'none',
+    viewBox: '0 0 20 20',
+    xmlns: 'http://www.w3.org/2000/svg',
+};

package/dist/esm/components/Icon/get-size.d.ts

@@ -0,0 +1,4 @@
+export declare function getSize(height: number, width: number, ratio?: number): {
+    height: number;
+    width: number;
+};

package/dist/esm/components/Icon/get-size.js

@@ -0,0 +1,6 @@
+export function getSize(height, width, ratio = 1) {
+    return {
+        height: height * ratio,
+        width: width * ratio,
+    };
+}

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

@@ -0,0 +1,13 @@
+import { Button } from './Button';
+import { Link } from './Link';
+import type { PolymorphicComponent } from '../Component';
+import type { IconOwnProps, IconProps } from './Icon';
+import './index.scss';
+export * from './default-svg-props';
+export * from './get-size';
+export type { IconProps, IconOwnProps };
+export declare type CompoundedIcon = PolymorphicComponent<IconOwnProps> & {
+    Button: typeof Button;
+    Link: typeof Link;
+};
+export declare const Icon: CompoundedIcon;

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

@@ -0,0 +1,9 @@
+import { Button } from './Button';
+import { Icon as InternalIcon } from './Icon';
+import { Link } from './Link';
+import './index.scss';
+export * from './default-svg-props';
+export * from './get-size';
+export const Icon = InternalIcon;
+Icon.Button = Button;
+Icon.Link = Link;

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

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

package/dist/esm/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/esm/components/Iconnav/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 { children, className, isActive, ...restProps } = props;
+    return (React.createElement("li", { className: classNames({
+            [`${config}-active`]: isActive,
+        }, className), ...restProps }, children));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Item.displayName = 'Iconnav.Item';
+}

package/dist/esm/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;