@broxus/react-uikit 0.18.0 → 0.19.0

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

@@ -1,256 +0,0 @@
-// 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/Iconnav/index.scss

@@ -1,140 +0,0 @@
-// 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/esm/components/Link/index.scss

@@ -1,149 +0,0 @@
-// 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/esm/components/Modal/Modal.d.ts

@@ -1,12 +0,0 @@
-import { type DialogProps } from '@rc-component/dialog';
-import * as React from 'react';
-import { type Direction } from '../../types';
-import './index.scss';
-export interface ModalProps extends Omit<DialogProps, 'afterClose'> {
-    centered?: boolean;
-    direction?: Direction;
-    full?: boolean;
-    getContainer?: string | HTMLElement | (() => HTMLElement) | false;
-    onClosed?: VoidFunction;
-}
-export declare function Modal(props: ModalProps): React.JSX.Element;

package/dist/esm/components/Modal/Modal.js

@@ -1,41 +0,0 @@
-import { canUseDocElement } from '@broxus/js-utils';
-import Dialog from '@rc-component/dialog';
-import classNames from 'classnames';
-import * as React from 'react';
-import { Close } from '../../components/Close';
-import { useConfig } from '../../components/ConfigProvider';
-import { getMotionName } from '../../utils';
-import './index.scss';
-let mousePosition;
-const getClickPosition = (event) => {
-    mousePosition = {
-        x: event.pageX,
-        y: event.pageY,
-    };
-    setTimeout(() => {
-        mousePosition = null;
-    }, 100);
-};
-if (canUseDocElement()) {
-    document.documentElement.addEventListener('click', getClickPosition, true);
-}
-export function Modal(props) {
-    const config = useConfig();
-    const { centered, children, className, closable = true, closeIcon, focusTriggerAfterClose = true, full, prefixCls = config.prefixCls, visible, onClose, onClosed, ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'modal'), [config, prefixCls]);
-    const defaultMaskTransitionName = React.useMemo(() => getMotionName(prefixCls || config.prefixCls, 'fade'), [config.prefixCls, prefixCls]);
-    const defaultTransitionName = React.useMemo(() => getMotionName(prefixCls || config.prefixCls, 'zoom'), [config.prefixCls, prefixCls]);
-    return (React.createElement(Dialog, { className: classNames(className, {
-            [`${rootCls}-centered`]: centered && !full,
-            [`${rootCls}-full`]: full && !centered,
-        }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, onClose: onClose, afterClose: onClosed, classNames: {
-            section: classNames(`${rootCls}-content`, restProps.classNames?.section),
-            ...restProps.classNames,
-        }, closable: false, closeIcon: null },
-        closable
-            && (closeIcon || (React.createElement(Close, { className: classNames({
-                    [`${rootCls}-close-default`]: !full,
-                    [`${rootCls}-close-full`]: full,
-                }), component: "button", onClick: onClose }))),
-        children));
-}