@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,699 @@
+// Name:            Tab
+// Description:     Component to create a tabbed navigation
+//
+// Component:       `uk-tabs`
+//
+// Modifiers:       `uk-tabs-bottom`
+//                  `uk-tabs-left`
+//                  `uk-tabs-right`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Tabs
+ ========================================================================== */
+
+.uk-tabs {
+    display: flex;
+    overflow: hidden;
+}
+
+/*
+ * Nav
+ */
+
+.uk-tabs-nav {
+    align-items: center;
+    display: flex;
+    flex: none;
+    position: relative;
+    @if mixin-exists(hook-tabs) {
+        @include hook-tabs;
+    }
+}
+
+.uk-tabs-nav-wrap {
+    align-self: stretch;
+    display: flex;
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    transform: translate(0);
+    white-space: nowrap;
+}
+
+.uk-tabs-nav-wrap::before,
+.uk-tabs-nav-wrap::after {
+    content: '';
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: opacity var(--transition-duration);
+    z-index: 1;
+}
+
+/*
+ * List
+ */
+
+.uk-tabs-nav-list {
+    display: flex;
+    position: relative;
+    transition: transform var(--transition-duration);
+}
+
+/*
+ * Operations
+ */
+
+.uk-tabs-nav-operations {
+    align-self: stretch;
+    display: flex;
+}
+
+.uk-tabs-nav-operations-hidden {
+    pointer-events: none;
+    position: absolute;
+    visibility: hidden;
+}
+
+.uk-tabs-nav-more {
+    --icon-size: var(--tabs-nav-more-font-size);
+
+    background: transparent;
+    border: 0;
+    font-size: var(--tabs-nav-more-font-size);
+    padding: var(--tabs-tab-padding-vertical) var(--tabs-tab-padding-horizontal);
+    position: relative;
+}
+
+.uk-tabs-nav-more::after {
+    bottom: 0;
+    content: '';
+    height: 5px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    transform: translateY(100%);
+}
+
+.uk-tabs-nav-more .uk-icon * {
+    width: 100%;
+}
+
+.uk-tabs-nav-add {
+    background: var(--tabs-card-tab-background);
+    border: var(--tabs-card-tab-border-width) var(--tabs-card-tab-border-style) var(--tabs-card-tab-border);
+    cursor: pointer;
+    min-width: var(--tabs-card-height);
+    outline: 0 none;
+    padding: 0 var(--small-padding);
+    transition: all var(--transition-duration) var(--ease-in-out);
+}
+
+.uk-tabs-nav-add:hover {
+    color: var(--tabs-tab-hover-color);
+}
+
+.uk-tabs-nav-add:active,
+.uk-tabs-nav-add:focus {
+    color: var(--tabs-tab-active-color);
+}
+
+.uk-tabs-extra-content {
+    flex: none;
+}
+
+.uk-tabs-centered .uk-tabs-nav-wrap:not([class*='uk-tabs-nav-wrap-ping']) {
+    justify-content: center;
+}
+
+
+/* Items
+ ========================================================================== */
+
+.uk-tabs-tab {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: var(--tabs-tab-color);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: var(--tabs-tab-font-size);
+    outline: none;
+    padding: var(--tabs-tab-padding-vertical) var(--tabs-tab-padding-horizontal);
+    position: relative;
+    @if mixin-exists(hook-tabs-tab) {
+        @include hook-tabs-tab;
+    }
+}
+
+/* Hover + Focus */
+.uk-tabs-tab:not(.uk-tabs-tab-disabled):hover,
+.uk-tabs-tab:not(.uk-tabs-tab-disabled):focus {
+    color: var(--tabs-tab-hover-color);
+    @if mixin-exists(hook-tabs-tab-hover) {
+        @include hook-tabs-tab-hover;
+    }
+}
+
+/* Active */
+.uk-tabs-tab-active:not(.uk-tabs-tab-disabled) {
+    color: var(--tabs-tab-active-color);
+    @if mixin-exists(hook-tabs-tab-active) {
+        @include hook-tabs-tab-active;
+    }
+}
+
+/* Disabled */
+.uk-tabs-tab-disabled {
+    color: var(--tabs-tab-disabled-color);
+    cursor: not-allowed;
+    @if mixin-exists(hook-tabs-tab-disabled) {
+        @include hook-tabs-tab-disabled;
+    }
+}
+
+/*
+ * Gutter
+ */
+
+.uk-tabs-tab + .uk-tabs-tab {
+    margin: 0 0 0 var(--tabs-margin-horizontal);
+}
+
+/*
+ * Remove
+ */
+
+.uk-tabs-tab-remove {
+    --icon-size: var(--tabs-tab-remove-font-size);
+
+    align-items: center;
+    background: transparent;
+    border: none;
+    color: var(--tabs-tab-remove-color);
+    cursor: pointer;
+    display: flex;
+    flex: none;
+    font-size: var(--tabs-tab-remove-font-size);
+    margin-left: var(--tabs-card-gutter);
+    margin-right: calc(var(--tabs-card-gutter) * -1);
+    outline: none;
+    transition: all var(--transition-duration);
+}
+
+.uk-tabs-tab-remove:hover {
+    color: var(--tabs-tab-remove-hover-color);
+}
+
+.uk-tabs-tab-remove:focus,
+.uk-tabs-tab-remove:active {
+    color: var(--tabs-tab-remove-active-color);
+}
+
+
+/* Card modifier
+ ========================================================================== */
+
+.uk-tabs-card .uk-tabs-tab {
+    background: var(--tabs-card-tab-background);
+    border: var(--tabs-card-tab-border-width) var(--tabs-card-tab-border-style) var(--tabs-card-tab-border);
+    margin: 0;
+    padding: var(--tabs-card-tab-padding-vertical) var(--tabs-card-tab-padding-horizontal);
+    transition: all var(--transition-duration) var(--ease-in-out);
+}
+
+.uk-tabs-card .uk-tabs-tab-active {
+    background-color: var(--tabs-card-tab-active-background);
+    color: var(--tabs-card-tab-active-color);
+}
+
+.uk-tabs-card .uk-tabs-ink-bar {
+    visibility: hidden;
+}
+
+
+/* Position modifier
+ ========================================================================== */
+
+/*
+ * Bottom + Top
+ */
+
+.uk-tabs-bottom,
+.uk-tabs-top {
+    flex-direction: column;
+
+    .uk-tabs-nav::before {
+        border-bottom: var(--global-border-width) var(--global-border-style) var(--global-border);
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+    }
+
+    .uk-tabs-nav-add {
+        margin: 0 0 0 var(--tabs-margin-horizontal);
+    }
+
+    .uk-tabs-ink-bar {
+        height: var(--tabs-ink-bar-height);
+    }
+
+    .uk-tabs-ink-bar-animated {
+        transition: width var(--transition-duration), left var(--transition-duration), right var(--transition-duration);
+    }
+
+    &.uk-tabs-card {
+        .uk-tabs-tab + .uk-tabs-tab {
+            margin-left: var(--tabs-card-gutter);
+        }
+
+        .uk-tabs-nav-add {
+            margin: 0 0 0 var(--tabs-card-gutter);
+        }
+    }
+}
+
+/*
+ * Bottom
+ */
+
+.uk-tabs-bottom {
+    .uk-tabs-nav {
+        margin-top: var(--tabs-margin-vertical);
+        order: 1;
+    }
+
+    .uk-tabs-nav::before {
+        top: 0;
+    }
+
+    .uk-tabs-ink-bar {
+        top: 0;
+    }
+
+    &.uk-tabs-card {
+        .uk-tabs-tab {
+            border-radius: 0 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius);
+        }
+
+        .uk-tabs-tab-active {
+            border-top-color: var(--tabs-card-tab-active-background);
+        }
+    }
+
+    .uk-tabs-nav-add {
+        border-radius: 0 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius);
+    }
+
+    .uk-tabs-content-holder {
+        order: 0;
+    }
+
+    @if mixin-exists(hook-tabs-bottom) {
+        @include hook-tabs-bottom;
+    }
+}
+
+.uk-tabs-bottom .uk-tabs-tab {
+    @if mixin-exists(hook-tabs-bottom-tab) {
+        @include hook-tabs-bottom-tab;
+    }
+}
+
+/*
+ * Top
+ */
+
+.uk-tabs-top {
+    .uk-tabs-nav {
+        margin-bottom: var(--tabs-margin-vertical);
+    }
+
+    .uk-tabs-nav::before {
+        bottom: 0;
+    }
+
+    .uk-tabs-ink-bar {
+        bottom: 0;
+    }
+
+    &.uk-tabs-card {
+        .uk-tabs-tab {
+            border-radius: var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0 0;
+        }
+
+        .uk-tabs-tab-active {
+            border-bottom-color: var(--tabs-card-tab-active-background);
+        }
+    }
+
+    .uk-tabs-nav-add {
+        border-radius: var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0 0;
+    }
+
+    @if mixin-exists(hook-tabs-top) {
+        @include hook-tabs-top;
+    }
+}
+
+.uk-tabs-top .uk-tabs-tab {
+    @if mixin-exists(hook-tabs-top-tab) {
+        @include hook-tabs-top-tab;
+    }
+}
+
+
+/*
+ * Left + Right
+ */
+
+.uk-tabs-left,
+.uk-tabs-right {
+    .uk-tabs-nav {
+        flex-direction: column;
+        min-width: 50px;
+    }
+
+    .uk-tabs-nav-wrap {
+        flex-direction: column;
+    }
+
+    .uk-tabs-tab {
+        text-align: center;
+    }
+
+    .uk-tabs-tab + .uk-tabs-tab {
+        margin: var(--tabs-margin-vertical) 0 0 0;
+    }
+
+    .uk-tabs-ink-bar {
+        width: var(--tabs-ink-bar-width);
+    }
+
+    .uk-tabs-ink-bar-animated {
+        transition: height var(--transition-duration), top var(--transition-duration);
+    }
+
+    &.uk-tabs-card {
+        .uk-tabs-tab + .uk-tabs-tab {
+            margin-top: var(--tabs-card-gutter);
+        }
+    }
+
+    .uk-tabs-nav-add {
+        margin: var(--tabs-card-gutter) 0 0 0;
+    }
+
+    .uk-tabs-nav-list,
+    .uk-tabs-nav-operations {
+        flex: 1 0 auto; // fix safari scroll problem
+        flex-direction: column;
+    }
+}
+
+/*
+ * Left
+ */
+
+.uk-tabs-left {
+    .uk-tabs-content-holder {
+        border-left: var(--global-border-width) var(--global-border-style) var(--global-border);
+        margin-left: calc(var(--global-border-width) * -1);
+    }
+
+    .uk-tabs-content > .uk-tabs-tabpane {
+        padding-left: var(--tabs-margin-horizontal);
+    }
+
+    .uk-tabs-ink-bar {
+        right: 0;
+    }
+
+    &.uk-tabs-card {
+        .uk-tabs-tab {
+            border-radius: var(--tabs-card-tab-border-radius) 0 0 var(--tabs-card-tab-border-radius);
+        }
+
+        .uk-tabs-tab-active {
+            border-right-color: var(--tabs-card-tab-active-background);
+        }
+    }
+
+    .uk-tabs-nav-add {
+        border-radius: var(--tabs-card-tab-border-radius) 0 0 var(--tabs-card-tab-border-radius);
+    }
+
+    @if mixin-exists(hook-tabs-left) {
+        @include hook-tabs-left;
+    }
+}
+
+.uk-tabs-left .uk-tabs-tab {
+    @if mixin-exists(hook-tabs-left-tab) {
+        @include hook-tabs-left-tab;
+    }
+}
+
+/*
+ * Right
+ */
+
+.uk-tabs-right {
+    .uk-tabs-nav {
+        order: 1;
+    }
+
+    .uk-tabs-content-holder {
+        border-right: var(--global-border-width) var(--global-border-style) var(--global-border);
+        margin-right: calc(var(--global-border-width) * -1);
+    }
+
+    .uk-tabs-content > .uk-tabs-tabpane {
+        padding-right: var(--tabs-margin-horizontal);
+    }
+
+    .uk-tabs-ink-bar {
+        left: 0;
+    }
+
+    &.uk-tabs-card {
+        .uk-tabs-tab {
+            border-radius: 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0;
+        }
+
+        .uk-tabs-tab-active {
+            border-left-color: var(--tabs-card-tab-active-background);
+        }
+    }
+
+    .uk-tabs-nav-add {
+        border-radius: 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0;
+    }
+
+    @if mixin-exists(hook-tabs-right) {
+        @include hook-tabs-right;
+    }
+}
+
+.uk-tabs-right .uk-tabs-tab {
+    @if mixin-exists(hook-tabs-right-tab) {
+        @include hook-tabs-right-tab;
+    }
+}
+
+
+/* Right to Left Direction
+ ========================================================================== */
+
+.uk-tabs-rtl { direction: rtl; }
+
+.uk-tabs-rtl .uk-tabs-tab-remove {
+    margin-left: calc(var(--tabs-card-gutter) * -1);
+    margin-right: var(--tabs-card-gutter);
+}
+
+.uk-tabs-rtl.uk-tabs-bottom .uk-tabs-tab,
+.uk-tabs-rtl.uk-tabs-top .uk-tabs-tab {
+    margin: 0 0 0 var(--tabs-margin-horizontal);
+
+    &:last-of-type {
+        margin-left: 0;
+    }
+
+    .uk-tabs-tab-remove {
+        margin-left: calc(var(--tabs-card-tab-padding-horizontal) * -1);
+        margin-right: var(--tabs-card-tab-padding-horizontal);
+    }
+}
+
+.uk-tabs-rtl.uk-tabs-left .uk-tabs-nav { order: 1; }
+.uk-tabs-rtl.uk-tabs-left .uk-tabs-content-holder { order: 0; }
+
+.uk-tabs-rtl.uk-tabs-right .uk-tabs-nav { order: 0; }
+.uk-tabs-rtl.uk-tabs-right .uk-tabs-content-holder { order: 1; }
+
+
+// Dropdown
+// ========================================================================
+
+.uk-tabs-dropdown {
+    box-sizing: border-box;
+    display: block;
+    left: -9999px;
+    line-height: normal;
+    margin: 0;
+    outline: none;
+    padding: 0;
+    position: absolute;
+    top: -9999px;
+    z-index: calc(var(--global-z-index) + 50);
+}
+
+.uk-tabs-dropdown-hidden {
+    display: none;
+}
+
+.uk-tabs-dropdown-menu {
+    background-clip: padding-box;
+    background-color: var(--tabs-dropdown-background);
+    border-radius: var(--tabs-dropdown-border-radius);
+    box-shadow: none;
+    list-style-type: none;
+    margin: 0;
+    max-height: 200px;
+    outline: none;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0;
+    text-align: left;
+}
+
+.uk-tabs-dropdown-menu-item {
+    align-items: center;
+    color: var(--tabs-dropdown-item-color);
+    cursor: pointer;
+    display: flex;
+    font-weight: normal;
+    margin: 0;
+    min-width: 120px;
+    overflow: hidden;
+    padding: var(--tabs-dropdown-item-padding-vertical) var(--tabs-dropdown-item-padding-horizontal);
+    text-overflow: ellipsis;
+    transition: all var(--transition-duration);
+    white-space: nowrap;
+}
+
+.uk-tabs-dropdown-menu-item-disabled,
+.uk-tabs-dropdown-menu-item-disabled:hover {
+    background: transparent;
+    color: var(--tabs-dropdown-item-disabled-color);
+    cursor: not-allowed;
+}
+
+.uk-tabs-dropdown-menu-item:hover {
+    background-color: var(--tabs-dropdown-item-hover-background);
+    color: var(--tabs-dropdown-item-hover-color);
+}
+
+.uk-tabs-dropdown-menu-item > span {
+    flex: 1;
+    white-space: nowrap;
+}
+
+.uk-tabs-dropdown-menu-item-remove {
+    background: transparent;
+    border: 0;
+    color: var(--tabs-tab-remove-color);
+    cursor: pointer;
+    flex: none;
+    font-size: var(--tabs-tab-remove-font-size);
+    margin-left: var(--tabs-card-gutter);
+}
+
+.uk-tabs-dropdown-menu-item-remove:hover {
+    color: var(--tabs-tab-remove-hover-color);
+}
+
+.uk-tabs-dropdown-rtl { direction: rtl; }
+.uk-tabs-dropdown-rtl .uk-tabs-dropdown-menu-item {
+    text-align: right;
+}
+
+
+
+// Ink Bar
+// ========================================================================
+
+.uk-tabs-ink-bar {
+    background: var(--tabs-ink-bar-color);
+    pointer-events: none;
+    position: absolute;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-tabs-misc) {
+    @include hook-tabs-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --tabs-margin-horizontal: #{$tabs-margin-horizontal};
+    --tabs-margin-vertical: #{$tabs-margin-vertical};
+    --tabs-tab-padding-horizontal: #{$tabs-tab-padding-horizontal};
+    --tabs-tab-padding-vertical: #{$tabs-tab-padding-vertical};
+    --tabs-tab-font-size: var(--global-font-size);
+    --tabs-tab-color: var(--global-color);
+    --tabs-tab-hover-color: var(--global-primary-background);
+    --tabs-tab-active-color: var(--global-primary-background);
+    --tabs-tab-disabled-color: var(--global-muted-color);
+    --tabs-tab-remove-color: var(--global-muted-color);
+    --tabs-tab-remove-font-size: var(--global-small-font-size);
+    --tabs-tab-remove-hover-color: var(--global-danger-background);
+    --tabs-tab-remove-active-color: var(--global-danger-background);
+    --tabs-nav-more-font-size: var(--global-small-font-size);
+    --tabs-ink-bar-color: var(--global-primary-background);
+    --tabs-ink-bar-height: #{$tabs-ink-bar-height};
+    --tabs-ink-bar-width: #{$tabs-ink-bar-width};
+    --tabs-card-tab-background: var(--global-muted-background);
+    --tabs-card-tab-border-width: var(--global-border-width);
+    --tabs-card-tab-border-style: var(--global-border-style);
+    --tabs-card-tab-border: var(--global-border);
+    --tabs-card-tab-border-radius: var(--global-border-radius);
+    --tabs-card-gutter: var(--global-xsmall-gutter);
+    --tabs-card-tab-padding-horizontal: #{$tabs-card-tab-padding-horizontal};
+    --tabs-card-tab-padding-vertical: #{$tabs-card-tab-padding-vertical};
+    --tabs-card-tab-active-background: var(--global-background);
+    --tabs-dropdown-background: var(--dropdown-background);
+    --tabs-dropdown-border-radius: var(--global-border-radius);
+    --tabs-dropdown-item-color: var(--tabs-tab-color);
+    --tabs-dropdown-item-hover-color: var(--global-inverse-color);
+    --tabs-dropdown-item-disabled-color: var(--tabs-tab-disabled-color);
+    --tabs-dropdown-item-hover-background: var(--global-primary-background);
+    --tabs-dropdown-item-padding-horizontal: var(--tabs-tab-padding-horizontal);
+    --tabs-dropdown-item-padding-vertical: var(--tabs-tab-padding-vertical);
+
+    // Inverse
+    --inverse-tabs-tab-color: var(--inverse-global-muted-color);
+    --inverse-tabs-tab-hover-color: var(--inverse-global-color);
+    --inverse-tabs-tab-active-color: var(--inverse-global-emphasis-color);
+    --inverse-tabs-tab-disabled-color: var(--inverse-global-muted-color);
+}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { BreakpointsConfig } from '../../types';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type TextAlign = 'left' | 'right' | 'center' | 'justify';
+export declare type TextOwnProps = {
+    align?: TextAlign | BreakpointsConfig<TextAlign>;
+    className?: string;
+    color?: 'meta' | 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
+    column?: number | BreakpointsConfig<number>;
+    decoration?: 'none';
+    dropcap?: boolean;
+    italic?: boolean;
+    size?: 'default' | 'small' | 'medium' | 'large' | 'lead';
+    transform?: 'capitalize' | 'uppercase' | 'lowercase';
+    verticalAlign?: 'top' | 'middle' | 'bottom' | 'baseline';
+    weight?: 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'lighter' | 'bolder';
+    wrap?: 'truncate' | 'break' | 'nowrap';
+};
+export declare type TextProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, TextOwnProps>;
+declare const defaultElement = "p";
+export declare function Text<E extends React.ElementType = typeof defaultElement>(props: TextProps<E>): JSX.Element;
+export {};