@broxus/react-uikit 0.5.0 → 0.5.1

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

@@ -18,4 +18,4 @@ export type TextOwnProps = {
     wrap?: 'truncate' | 'break' | 'nowrap';
 };
 export type TextProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TextOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TextOwnProps>;
-export declare const Text: React.MemoExoticComponent<(<E extends React.ElementType<any> = "p">(props: TextProps<E>) => React.JSX.Element)>;
+export declare const Text: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: TextProps<E>) => React.JSX.Element)>;

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

@@ -32,7 +32,7 @@ const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const utils_1 = require("../../utils");
-const defaultElement = 'p';
+const defaultElement = 'span';
 exports.Text = React.memo((props) => {
     const config = (0, ConfigProvider_1.useConfig)();
     const { align, className, color, column, decoration, dropcap, italic, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;

package/dist/cjs/index.d.ts

@@ -22,6 +22,7 @@ export * from './components/Tile';
 export * from './components/Card';
 export * from './components/Nav';
 export * from './components/Navbar';
+export * from './components/Subnav';
 export * from './components/Breadcrumb';
 export * from './components/Tabs';
 export * from './components/Dotnav';

package/dist/cjs/index.js

@@ -38,6 +38,7 @@ __exportStar(require("./components/Tile"), exports);
 __exportStar(require("./components/Card"), exports);
 __exportStar(require("./components/Nav"), exports);
 __exportStar(require("./components/Navbar"), exports);
+__exportStar(require("./components/Subnav"), exports);
 __exportStar(require("./components/Breadcrumb"), exports);
 __exportStar(require("./components/Tabs"), exports);
 __exportStar(require("./components/Dotnav"), exports);

package/dist/cjs/styles/_import.components.scss

@@ -43,7 +43,7 @@
 // Navs
 @import 'nav.scss';
 @import 'navbar.scss'; // After: Card, Grid, Nav, Icon, Search
-// @import 'subnav.scss';
+@import 'subnav.scss';
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';

package/dist/cjs/styles/_import.scss

@@ -59,7 +59,7 @@
 // Navs
 @import 'nav.scss';
 @import 'navbar.scss'; // After: Card, Grid, Nav, Icon, Search
-// @import 'subnav.scss';
+@import 'subnav.scss';
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';

package/dist/cjs/styles/subnav.scss

@@ -1,258 +1 @@
-// Name:            Subnav
-// Description:     Component to create a sub navigation
-//
-// Component:       `uk-subnav`
-//
-// Modifiers:       `uk-subnav-divider`
-//                  `uk-subnav-pill`
-//
-// States:          `uk-active`
-//                  `uk-first-column`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import 'variables.scss';
-
-
-/* ========================================================================
-   Component: Subnav
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Center items vertically if they have a different height
- * 3. Gutter
- * 4. Reset list
- */
-
-.uk-subnav {
-    /* 2 */
-    align-items: center;
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 3 */
-    margin-left: calc(var(--subnav-margin-horizontal) * -1);
-
-    /* 4 */
-    padding: 0;
-    @if mixin-exists(hook-subnav) {
-        @include hook-subnav;
-    }
-}
-
-/*
- * 1. Space is allocated solely based on content dimensions: 0 0 auto
- * 2. Gutter
- * 3. Create position context for dropdowns
- */
-
-.uk-subnav > * {
-    /* 1 */
-    flex: none;
-
-    /* 2 */
-    padding-left: var(--subnav-margin-horizontal);
-
-    /* 3 */
-    position: relative;
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Items must target `a` elements to exclude other elements (e.g. dropdowns)
- * Using `:first-child` instead of `a` to support `span` elements for text
- * 1. Center content vertically, e.g. an icon
- * 2. Imitate white space gap when using flexbox
- * 3. Style
- */
-
-.uk-subnav > * > :first-child {
-    align-items: center;
-
-    /* 3 */
-    color: var(--subnav-item-color);
-
-    /* 2 */
-    column-gap: 0.25em;
-
-    /* 1 */
-    display: flex;
-    @if mixin-exists(hook-subnav-item) {
-        @include hook-subnav-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-subnav > * > a:hover,
-.uk-subnav > * > a:focus {
-    color: var(--subnav-item-hover-color);
-    outline: none;
-    text-decoration: var(--subnav-item-hover-text-decoration);
-    @if mixin-exists(hook-subnav-item-hover) {
-        @include hook-subnav-item-hover;
-    }
-}
-
-/* Active */
-.uk-subnav > .uk-active > a {
-    color: var(--subnav-item-active-color);
-    @if mixin-exists(hook-subnav-item-active) {
-        @include hook-subnav-item-active;
-    }
-}
-
-
-/* Divider modifier
- ========================================================================== */
-
-/*
- * Set gutter
- */
-
-.uk-subnav-divider {
-    margin-left: calc((var(--subnav-divider-margin-horizontal) * 2 + var(--subnav-divider-border-width)) * -1);
-}
-
-/*
- * Align items and divider vertically
- */
-
-.uk-subnav-divider > * {
-    align-items: center;
-    display: flex;
-}
-
-/*
- * Divider
- * 1. `nth-child` makes it also work without JS if it's only one row
- */
-
-.uk-subnav-divider > ::before {
-    border-left: var(--subnav-divider-border-width) solid transparent;
-    content: '';
-    height: var(--subnav-divider-border-height);
-    margin-left: calc(var(--subnav-divider-margin-horizontal) - var(subnav-margin-horizontal));
-    margin-right: var(--subnav-divider-margin-horizontal);
-}
-
-/* 1 */
-.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
-    border-left-color: var(--subnav-divider-border);
-    @if mixin-exists(hook-subnav-divider) {
-        @include hook-subnav-divider;
-    }
-}
-
-
-/* Pill modifier
- ========================================================================== */
-
-.uk-subnav-pill > * > :first-child {
-    background: var(--subnav-pill-item-background);
-    color: var(--subnav-pill-item-color);
-    padding: var(--subnav-pill-item-padding-vertical) var(--subnav-pill-item-padding-horizontal);
-    @if mixin-exists(hook-subnav-pill-item) {
-        @include hook-subnav-pill-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-subnav-pill > * > a:hover,
-.uk-subnav-pill > * > a:focus {
-    background-color: var(--subnav-pill-item-hover-background);
-    color: var(--subnav-pill-item-hover-color);
-    @if mixin-exists(hook-subnav-pill-item-hover) {
-        @include hook-subnav-pill-item-hover;
-    }
-}
-
-/* OnClick */
-.uk-subnav-pill > * > a:active {
-    background-color: var(--subnav-pill-item-onclick-background);
-    color: var(--subnav-pill-item-onclick-color);
-    @if mixin-exists(hook-subnav-pill-item-onclick) {
-        @include hook-subnav-pill-item-onclick;
-    }
-}
-
-/* Active */
-.uk-subnav-pill > .uk-active > a {
-    background-color: var(--subnav-pill-item-active-background);
-    color: var(--subnav-pill-item-active-color);
-    @if mixin-exists(hook-subnav-pill-item-active) {
-        @include hook-subnav-pill-item-active;
-    }
-}
-
-
-/* Disabled
- * The same for all style modifiers
- ========================================================================== */
-
-.uk-subnav > .uk-disabled > a {
-    color: var(--subnav-item-disabled-color);
-    @if mixin-exists(hook-subnav-item-disabled) {
-        @include hook-subnav-item-disabled;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-subnav-misc) {
-    @include hook-subnav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --subnav-margin-horizontal: #{$subnav-margin-horizontal};
-    --subnav-item-color: var(--global-muted-color);
-    --subnav-item-hover-color: var(--global-color);
-    --subnav-item-hover-text-decoration: #{$subnav-item-hover-text-decoration};
-    --subnav-item-active-color: var(--global-emphasis-color);
-    --subnav-divider-margin-horizontal: #{$subnav-margin-horizontal};
-    --subnav-divider-border-height: #{$subnav-divider-border-height};
-    --subnav-divider-border-width: var(--global-border-width);
-    --subnav-divider-border: var(--global-border);
-    --subnav-pill-item-padding-vertical: #{$subnav-pill-item-padding-vertical};
-    --subnav-pill-item-padding-horizontal: #{$subnav-pill-item-padding-horizontal};
-    --subnav-pill-item-background: #{$subnav-pill-item-background};
-    --subnav-pill-item-color: #{$subnav-item-color};
-    --subnav-pill-item-hover-background: var(--global-muted-background);
-    --subnav-pill-item-hover-color: var(--global-color);
-    --subnav-pill-item-onclick-background: #{$subnav-pill-item-hover-background};
-    --subnav-pill-item-onclick-color: #{$subnav-pill-item-hover-color};
-    --subnav-pill-item-active-background: var(--global-primary-background);
-    --subnav-pill-item-active-color: var(--global-inverse-color);
-    --subnav-item-disabled-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-subnav-item-color: var(--inverse-global-muted-color);
-    --inverse-subnav-item-hover-color: var(--inverse-global-color);
-    --inverse-subnav-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-subnav-divider-border: var(--inverse-global-border);
-    --inverse-subnav-pill-item-background: #{$inverse-subnav-pill-item-background};
-    --inverse-subnav-pill-item-color: var(--inverse-global-muted-color);
-    --inverse-subnav-pill-item-hover-background: var(--inverse-global-muted-background);
-    --inverse-subnav-pill-item-hover-color: var(--inverse-global-color);
-    --inverse-subnav-pill-item-onclick-background: #{$inverse-subnav-pill-item-hover-background};
-    --inverse-subnav-pill-item-onclick-color: #{$inverse-subnav-pill-item-hover-color};
-    --inverse-subnav-pill-item-active-background: var(--inverse-global-primary-background);
-    --inverse-subnav-pill-item-active-color: var(--inverse-global-inverse-color);
-    --inverse-subnav-item-disabled-color: var(--inverse-global-muted-color);
-}
+@import '../components/Subnav/index.scss';