@broxus/react-uikit 0.1.0

package/dist/esm/components/Drop/placements.js

@@ -0,0 +1,44 @@
+const autoAdjustOverflow = {
+    adjustX: 1,
+    adjustY: 1,
+};
+const targetOffset = [0, 0];
+const placements = {
+    'bottom-center': {
+        offset: [0, 4],
+        overflow: autoAdjustOverflow,
+        points: ['tc', 'bc'],
+        targetOffset,
+    },
+    'bottom-left': {
+        offset: [0, 4],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'bl'],
+        targetOffset,
+    },
+    'bottom-right': {
+        offset: [0, 4],
+        overflow: autoAdjustOverflow,
+        points: ['tr', 'br'],
+        targetOffset,
+    },
+    'top-center': {
+        offset: [0, -4],
+        overflow: autoAdjustOverflow,
+        points: ['bc', 'tc'],
+        targetOffset,
+    },
+    'top-left': {
+        offset: [0, -4],
+        overflow: autoAdjustOverflow,
+        points: ['bl', 'tl'],
+        targetOffset,
+    },
+    'top-right': {
+        offset: [0, -4],
+        overflow: autoAdjustOverflow,
+        points: ['br', 'tr'],
+        targetOffset,
+    },
+};
+export default placements;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { DropProps } from '../Drop';
+import './index.scss';
+export declare type DropdownProps = DropProps;
+export declare const Dropdown: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<unknown>>;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Drop } from '../Drop';
+import './index.scss';
+export const Dropdown = React.forwardRef((props, ref) => {
+    const { children, ...restProps } = props;
+    return (React.createElement(Drop, { ref: ref, ...restProps, prefixCls: "uk-dropdown" }, children));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Dropdown.displayName = 'Dropdown';
+}

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

@@ -0,0 +1,203 @@
+// Name:            Dropdown
+// Description:     Component to create dropdown menus
+//
+// Component:       `uk-dropdown`
+//
+// Adopted:         `uk-dropdown-nav`
+//
+// Modifiers:       `uk-dropdown-placement-top-*`
+//                  `uk-dropdown-placement-bottom-*`
+//                  `uk-dropdown-stack`
+//                  `uk-dropdown-grid`
+//
+// States:          `uk-dropdown-hidden`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Dropdown
+ ========================================================================== */
+
+/*
+ * 1. Set position
+ * 2. Set a default width
+ * 3. Style
+ */
+
+.uk-dropdown {
+    background: var(--dropdown-background); /* 3 */
+    box-sizing: border-box; /* 2 */
+    color: var(--dropdown-color); /* 3 */
+    min-width: var(--dropdown-min-width); /* 2 */
+    padding: var(--dropdown-padding); /* 3 */
+    position: absolute; /* 1 */
+    z-index: var(--dropdown-z-index); /* 1 */
+    @if mixin-exists(hook-dropdown) {
+        @include hook-dropdown;
+    }
+}
+
+/* Hide */
+.uk-dropdown-hidden { display: none; }
+
+
+/* Position Animation
+ ========================================================================== */
+
+[class*='uk-dropdown-placement-bottom'] {
+    &.uk-slide-up-enter.uk-slide-up-enter-active,
+    &.uk-slide-up-appear.uk-slide-up-appear-active {
+        animation-name: uk-slide-up-in;
+    }
+
+    &.uk-slide-up-leave.uk-slide-up-leave-active {
+        animation-name: uk-slide-up-out;
+    }
+}
+
+[class*='uk-dropdown-placement-top'] {
+    &.uk-slide-up-enter.uk-slide-up-enter-active,
+    &.uk-slide-up-appear.uk-slide-up-appear-active {
+        animation-name: uk-slide-down-in;
+    }
+
+    &.uk-slide-up-leave.uk-slide-up-leave-active {
+        animation-name: uk-slide-down-out;
+    }
+}
+
+
+/* Nav
+ * Adopts `uk-nav`
+ ========================================================================== */
+
+.uk-dropdown-nav {
+    white-space: nowrap;
+    @if mixin-exists(hook-dropdown-nav) {
+        @include hook-dropdown-nav;
+    }
+}
+
+/*
+ * Items
+ */
+
+.uk-dropdown-nav > li > a {
+    color: var(--dropdown-nav-item-color);
+    @if mixin-exists(hook-dropdown-nav-item) {
+        @include hook-dropdown-nav-item;
+    }
+}
+
+/* Hover + Focus + Active */
+.uk-dropdown-nav > li > a:hover,
+.uk-dropdown-nav > li > a:focus,
+.uk-dropdown-nav > li.uk-active > a {
+    color: var(--dropdown-nav-item-hover-color);
+    @if mixin-exists(hook-dropdown-nav-item-hover) {
+        @include hook-dropdown-nav-item-hover;
+    }
+}
+
+/*
+ * Header
+ */
+
+.uk-dropdown-nav .uk-nav-header {
+    color: var(--dropdown-nav-header-color);
+    @if mixin-exists(hook-dropdown-nav-header) {
+        @include hook-dropdown-nav-header;
+    }
+}
+
+/*
+ * Divider
+ */
+
+.uk-dropdown-nav .uk-nav-divider {
+    border-top: var(--dropdown-nav-divider-border-width) solid var(--dropdown-nav-divider-border);
+    @if mixin-exists(hook-dropdown-nav-divider) {
+        @include hook-dropdown-nav-divider;
+    }
+}
+
+/*
+ * Sublists
+ */
+
+// noinspection Stylelint
+.uk-dropdown-nav .uk-nav-sub a {
+    color: var(--dropdown-nav-sublist-item-color);
+}
+
+.uk-dropdown-nav .uk-nav-sub a:hover,
+.uk-dropdown-nav .uk-nav-sub a:focus,
+.uk-dropdown-nav .uk-nav-sub li.uk-active > a {
+    color: var(--dropdown-nav-sublist-item-hover-color);
+}
+
+// Color mode
+@if $dropdown-color-mode == dark {
+    .uk-dropdown {
+        @extend .uk-dark !optional;
+    }
+}
+
+@if $dropdown-color-mode == light {
+    .uk-dropdown {
+        @extend .uk-light !optional;
+    }
+}
+
+
+/* Grid modifiers
+ ========================================================================== */
+
+.uk-dropdown-stack .uk-dropdown-grid > * {
+    width: 100% !important;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-dropdown-misc) {
+    @include hook-dropdown-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --dropdown-z-index: #{$dropdown-z-index};
+    --dropdown-min-width: #{$dropdown-min-width};
+    --dropdown-padding: #{$dropdown-padding};
+    --dropdown-background: var(--global-muted-background);
+    --dropdown-color: var(--global-color);
+    --dropdown-margin: var(--global-small-margin);
+    --dropdown-nav-item-color: var(--global-muted-color);
+    --dropdown-nav-item-hover-color: var(--global-color);
+    --dropdown-nav-header-color: var(--global-emphasis-color);
+    --dropdown-nav-divider-border-width: var(--global-border-width);
+    --dropdown-nav-divider-border: var(--global-border);
+    --dropdown-nav-sublist-item-color: var(--global-muted-color);
+    --dropdown-nav-sublist-item-hover-color: var(--global-color);
+
+    // Inverse
+    --inverse-dropdown-background: var(--inverse-global-muted-background);
+    --inverse-dropdown-color: var(--inverse-global-color);
+    --inverse-dropdown-nav-item-color: var(--inverse-global-muted-color);
+    --inverse-dropdown-nav-item-hover-color: var(--inverse-global-color);
+    --inverse-dropdown-nav-header-color: var(--inverse-global-emphasis-color);
+    --inverse-dropdown-nav-divider-border: var(--inverse-global-border);
+    --inverse-dropdown-nav-sublist-item-color: var(--inverse-global-muted-color);
+    --inverse-dropdown-nav-sublist-item-hover-color: var(--inverse-global-color);
+}

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { BreakpointsConfig } from '../../types';
+import type { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export declare type FlexAlignContent = 'stretch' | 'between' | 'around' | 'top' | 'middle' | 'bottom';
+export declare type FlexAlignItems = 'stretch' | 'top' | 'middle' | 'bottom';
+export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export declare type FlexJustifyContent = 'left' | 'center' | 'right' | 'between' | 'around';
+export declare type FlexItemDimensions = 'none' | 'auto' | 'fill' | '1';
+export declare type FlexBreakpoint = {
+    alignContent?: FlexAlignContent;
+    alignItems?: FlexAlignItems;
+    flexDirection?: FlexDirection;
+    flexWrap?: FlexWrap;
+    itemDimensions?: FlexItemDimensions;
+    justifyContent?: FlexJustifyContent;
+};
+export declare type FlexBreakpointsConfig = BreakpointsConfig<FlexBreakpoint>;
+export declare type FlexOwnProps = FlexBreakpoint & FlexBreakpointsConfig & {
+    inline?: boolean;
+};
+export declare type FlexProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, FlexOwnProps>;
+declare const defaultElement = "div";
+export declare function Flex<E extends React.ElementType = typeof defaultElement>(props: FlexProps<E>): JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import './index.scss';
+const defaultElement = 'div';
+export function Flex(props) {
+    const { alignContent, alignItems, className, flexDirection, flexWrap, inline, itemDimensions, justifyContent, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames({
+            'uk-flex': !inline,
+            'uk-flex-inline': inline,
+            [`uk-flex-${alignItems}`]: alignItems !== undefined,
+            [`uk-flex-${flexDirection}`]: flexDirection !== undefined,
+            [`uk-flex-${flexWrap}`]: flexWrap !== undefined,
+            [`uk-flex-wrap-${alignContent}`]: flexWrap !== undefined && alignContent !== undefined,
+            [`uk-flex-${justifyContent}`]: justifyContent !== undefined,
+            [`uk-flex-${itemDimensions}`]: itemDimensions !== undefined,
+        }, className), component: defaultElement, ...restProps }));
+}

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

@@ -0,0 +1,324 @@
+// Name:            Flex
+// Description:     Utilities for layouts based on flexbox
+//
+// Component:       `uk-flex-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Flex
+ ========================================================================== */
+
+.uk-flex { display: flex; }
+
+.uk-flex-inline { display: inline-flex; }
+
+/*
+ * Remove pseudo elements created by micro clearfix as precaution
+ */
+
+.uk-flex::before,
+.uk-flex::after,
+.uk-flex-inline::before,
+.uk-flex-inline::after { display: none; }
+
+
+/* Alignment
+ ========================================================================== */
+
+/*
+ * Align items along the main axis of the current line of the flex container
+ * Row: Horizontal
+ */
+
+// Default
+.uk-flex-left { justify-content: flex-start; }
+
+.uk-flex-center { justify-content: center; }
+
+.uk-flex-right { justify-content: flex-end; }
+
+.uk-flex-between { justify-content: space-between; }
+
+.uk-flex-around { justify-content: space-around; }
+
+
+/* Phone landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-small) {
+    .uk-flex-left\@s { justify-content: flex-start; }
+
+    .uk-flex-center\@s { justify-content: center; }
+
+    .uk-flex-right\@s { justify-content: flex-end; }
+
+    .uk-flex-between\@s { justify-content: space-between; }
+
+    .uk-flex-around\@s { justify-content: space-around; }
+}
+
+/* Tablet landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-medium) {
+    .uk-flex-left\@m { justify-content: flex-start; }
+
+    .uk-flex-center\@m { justify-content: center; }
+
+    .uk-flex-right\@m { justify-content: flex-end; }
+
+    .uk-flex-between\@m { justify-content: space-between; }
+
+    .uk-flex-around\@m { justify-content: space-around; }
+}
+
+/* Desktop and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-large) {
+    .uk-flex-left\@l { justify-content: flex-start; }
+
+    .uk-flex-center\@l { justify-content: center; }
+
+    .uk-flex-right\@l { justify-content: flex-end; }
+
+    .uk-flex-between\@l { justify-content: space-between; }
+
+    .uk-flex-around\@l { justify-content: space-around; }
+}
+
+/* Large screen and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-xlarge) {
+    .uk-flex-left\@xl { justify-content: flex-start; }
+
+    .uk-flex-center\@xl { justify-content: center; }
+
+    .uk-flex-right\@xl { justify-content: flex-end; }
+
+    .uk-flex-between\@xl { justify-content: space-between; }
+
+    .uk-flex-around\@xl { justify-content: space-around; }
+}
+
+/*
+ * Align items in the cross axis of the current line of the flex container
+ * Row: Vertical
+ */
+
+// Default
+.uk-flex-stretch { align-items: stretch; }
+
+.uk-flex-top { align-items: flex-start; }
+
+.uk-flex-middle { align-items: center; }
+
+.uk-flex-bottom { align-items: flex-end; }
+
+
+/* Direction
+ ========================================================================== */
+
+// Default
+.uk-flex-row { flex-direction: row; }
+
+.uk-flex-row-reverse { flex-direction: row-reverse; }
+
+.uk-flex-column { flex-direction: column; }
+
+.uk-flex-column-reverse { flex-direction: column-reverse; }
+
+
+/* Wrap
+ ========================================================================== */
+
+// Default
+.uk-flex-nowrap { flex-wrap: nowrap; }
+
+.uk-flex-wrap { flex-wrap: wrap; }
+
+.uk-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+
+/*
+ * Aligns items within the flex container when there is extra space in the cross-axis
+ * Only works if there is more than one line of flex items
+ */
+
+// Default
+.uk-flex-wrap-stretch { align-content: stretch; }
+
+.uk-flex-wrap-top { align-content: flex-start; }
+
+.uk-flex-wrap-middle { align-content: center; }
+
+.uk-flex-wrap-bottom { align-content: flex-end; }
+
+.uk-flex-wrap-between { align-content: space-between; }
+
+.uk-flex-wrap-around { align-content: space-around; }
+
+
+/* Item ordering
+ ========================================================================== */
+
+/*
+ * Default is 0
+ */
+
+.uk-flex-first { order: -1; }
+
+.uk-flex-last { order: 99; }
+
+
+/* Phone landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-small) {
+    .uk-flex-first\@s { order: -1; }
+
+    .uk-flex-last\@s { order: 99; }
+
+    .uk-flex-nowrap\@s { flex-wrap: nowrap; }
+
+    .uk-flex-wrap\@s { flex-wrap: wrap; }
+
+    .uk-flex-wrap-reverse\@s { flex-wrap: wrap-reverse; }
+
+    .uk-flex-wrap-stretch\@s { align-content: stretch; }
+
+    .uk-flex-wrap-top\@s { align-content: flex-start; }
+
+    .uk-flex-wrap-middle\@s { align-content: center; }
+
+    .uk-flex-wrap-bottom\@s { align-content: flex-end; }
+
+    .uk-flex-wrap-between\@s { align-content: space-between; }
+
+    .uk-flex-wrap-around\@s { align-content: space-around; }
+}
+
+/* Tablet landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-medium) {
+    .uk-flex-first\@m { order: -1; }
+
+    .uk-flex-last\@m { order: 99; }
+
+    .uk-flex-nowrap\@m { flex-wrap: nowrap; }
+
+    .uk-flex-wrap\@m { flex-wrap: wrap; }
+
+    .uk-flex-wrap-reverse\@m { flex-wrap: wrap-reverse; }
+
+    .uk-flex-wrap-stretch\@m { align-content: stretch; }
+
+    .uk-flex-wrap-top\@m { align-content: flex-start; }
+
+    .uk-flex-wrap-middle\@m { align-content: center; }
+
+    .uk-flex-wrap-bottom\@m { align-content: flex-end; }
+
+    .uk-flex-wrap-between\@m { align-content: space-between; }
+
+    .uk-flex-wrap-around\@m { align-content: space-around; }
+}
+
+/* Desktop and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-large) {
+    .uk-flex-first\@l { order: -1; }
+
+    .uk-flex-last\@l { order: 99; }
+
+    .uk-flex-nowrap\@l { flex-wrap: nowrap; }
+
+    .uk-flex-wrap\@l { flex-wrap: wrap; }
+
+    .uk-flex-wrap-reverse\@l { flex-wrap: wrap-reverse; }
+
+    .uk-flex-wrap-stretch\@l { align-content: stretch; }
+
+    .uk-flex-wrap-top\@l { align-content: flex-start; }
+
+    .uk-flex-wrap-middle\@l { align-content: center; }
+
+    .uk-flex-wrap-bottom\@l { align-content: flex-end; }
+
+    .uk-flex-wrap-between\@l { align-content: space-between; }
+
+    .uk-flex-wrap-around\@l { align-content: space-around; }
+}
+
+/* Large screen and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-xlarge) {
+    .uk-flex-first\@xl { order: -1; }
+
+    .uk-flex-last\@xl { order: 99; }
+
+    .uk-flex-nowrap\@xl { flex-wrap: nowrap; }
+
+    .uk-flex-wrap\@xl { flex-wrap: wrap; }
+
+    .uk-flex-wrap-reverse\@xl { flex-wrap: wrap-reverse; }
+
+    .uk-flex-wrap-stretch\@xl { align-content: stretch; }
+
+    .uk-flex-wrap-top\@xl { align-content: flex-start; }
+
+    .uk-flex-wrap-middle\@xl { align-content: center; }
+
+    .uk-flex-wrap-bottom\@xl { align-content: flex-end; }
+
+    .uk-flex-wrap-between\@xl { align-content: space-between; }
+
+    .uk-flex-wrap-around\@xl { align-content: space-around; }
+}
+
+
+/* Item dimensions
+ ========================================================================== */
+
+/*
+ * Initial: 0 1 auto
+ * Content dimensions, but shrinks
+ */
+
+/*
+ * No Flex: 0 0 auto
+ * Content dimensions
+ */
+
+.uk-flex-none { flex: none; }
+
+/*
+ * Relative Flex: 1 1 auto
+ * Space is allocated considering content
+ */
+
+.uk-flex-auto { flex: auto; }
+
+/*
+ * Absolute Flex: 1 1 0%
+ * Space is allocated solely based on flex
+ */
+
+.uk-flex-1 { flex: 1; }
+
+/*
+ * Fill Flex: 1 0 auto
+ */
+
+.uk-flex-fill { flex: 1 0 auto; }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-flex-misc) {
+    @include hook-flex-misc;
+}

package/dist/esm/components/Form/Controls.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare type ControlsProps = React.HTMLAttributes<HTMLDivElement>;
+export declare function Controls(props: ControlsProps): JSX.Element;
+export declare namespace Controls {
+    var displayName: string;
+}

package/dist/esm/components/Form/Controls.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function Controls(props) {
+    const { className, ...restProps } = props;
+    return (React.createElement("div", { className: classNames('uk-form-controls', className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Controls.displayName = 'Form.Controls';
+}

package/dist/esm/components/Form/ControlsText.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare type ControlsTextProps = React.HTMLAttributes<HTMLDivElement>;
+export declare function ControlsText(props: ControlsTextProps): JSX.Element;
+export declare namespace ControlsText {
+    var displayName: string;
+}

package/dist/esm/components/Form/ControlsText.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function ControlsText(props) {
+    const { className, ...restProps } = props;
+    return (React.createElement("div", { className: classNames('uk-form-controls-text', className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    ControlsText.displayName = 'Form.ControlsText';
+}

package/dist/esm/components/Form/Fieldset.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare type FieldsetProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+export declare function Fieldset(props: FieldsetProps): JSX.Element;
+export declare namespace Fieldset {
+    var displayName: string;
+}

package/dist/esm/components/Form/Fieldset.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function Fieldset(props) {
+    const { className, ...restProps } = props;
+    return (React.createElement("fieldset", { className: classNames('uk-fieldset', className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Fieldset.displayName = 'Form.Fieldset';
+}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export interface FormOwnProps {
+    layout?: 'stacked' | 'horizontal';
+}
+export declare type FormProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, FormOwnProps>;
+declare const defaultElement = "form";
+export declare function Form<E extends React.ElementType = typeof defaultElement>(props: FormProps<E>): JSX.Element;
+export {};