@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,189 @@
+// Name:            Accordion
+// Description:     Component to create accordions
+//
+// Component:       `uk-accordion`
+//
+// Sub-objects:     `uk-accordion-header`
+//                  `uk-accordion-content`
+//                  `uk-accordion-content-box`
+//                  `uk-accordion-extra`
+//
+// States:          `uk-accordion-item-active`
+//                  `uk-accordion-item-disabled`
+//                  `uk-accordion-header-collapsible-only`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Accordion
+ ========================================================================== */
+
+.uk-accordion {
+    list-style: none;
+    padding: 0;
+    @if mixin-exists(hook-accordion) {
+        @include hook-accordion;
+    }
+}
+
+
+/* Item
+ ========================================================================== */
+
+.uk-accordion > :nth-child(n+2) {
+    margin-top: var(--accordion-item-margin-top);
+    @if mixin-exists(hook-accordion-item) {
+        @include hook-accordion-item;
+    }
+}
+
+
+/* Header
+ ========================================================================== */
+
+.uk-accordion-header {
+    align-items: center;
+    color: var(--accordion-header-color);
+    cursor: pointer;
+    display: flex;
+    font-size: var(--accordion-header-font-size);
+    line-height: var(--accordion-header-line-height);
+    @if mixin-exists(hook-accordion-header) {
+        @include hook-accordion-header;
+    }
+
+    .uk-icon {
+        --icon-size: var(--accordion-icon-size);
+
+        margin-right: var(--accordion-icon-margin-right);
+    }
+}
+
+.uk-accordion-header-collapsible-only {
+    cursor: default;
+    @if mixin-exists(hook-accordion-header-collapsible-only) {
+        @include hook-accordion-header-collapsible-only;
+    }
+
+    .uk-accordion-header-text {
+        cursor: pointer;
+    }
+}
+
+/* Hover + Focus */
+.uk-accordion-header:hover,
+.uk-accordion-header:focus {
+    outline: none;
+    text-decoration: none;
+    @if mixin-exists(hook-accordion-header-hover) {
+        @include hook-accordion-header-hover;
+    }
+
+    &:not(.uk-accordion-item-disabled) {
+        color: var(--accordion-header-hover-color);
+    }
+}
+
+
+/* Disabled item
+ ========================================================================== */
+
+.uk-accordion-item-disabled {
+    color: var(--accordion-item-disabled-color);
+    cursor: not-allowed;
+    opacity: 0.7;
+    @if mixin-exists(hook-accordion-item-disable) {
+        @include hook-accordion-item-disable;
+    }
+
+    .uk-accordion-header {
+        cursor: not-allowed;
+    }
+}
+
+
+/* Content
+ ========================================================================== */
+
+.uk-accordion-content {
+    display: flow-root;
+    overflow: hidden;
+    @if mixin-exists(hook-accordion-content) {
+        @include hook-accordion-content;
+    }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-accordion-content > :last-child { margin-bottom: 0; }
+
+.uk-accordion-content-box {
+    margin-top: var(--accordion-content-margin-top);
+    @if mixin-exists(hook-accordion-content-box) {
+        @include hook-accordion-content-box;
+    }
+}
+
+
+/* Header extra
+ ========================================================================== */
+
+.uk-accordion-extra {
+    margin-left: auto;
+    margin-right: var(--accordion-extra-margin-horizontal);
+    @if mixin-exists(hook-accordion-extra) {
+        @include hook-accordion-extra;
+    }
+}
+
+
+// Right to Left Direction
+// ========================================================================
+
+[dir='rtl'] .uk-accordion,
+.uk-accordion.uk-accordion-rtl {
+    .uk-accordion-extra {
+        margin-left: var(--accordion-extra-margin-horizontal);
+        margin-right: auto;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-accordion-misc) {
+    @include hook-accordion-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --accordion-item-margin-top: var(--global-margin);
+    --accordion-item-disabled-color: var(--global-muted-color);
+    --accordion-header-font-size: var(--global-medium-font-size);
+    --accordion-header-line-height: #{$accordion-title-line-height};
+    --accordion-header-color: var(--global-emphasis-color);
+    --accordion-header-hover-color: var(--global-color);
+    --accordion-extra-margin-horizontal: var(--global-small-margin);
+    --accordion-content-margin-top: var(--global-margin);
+    --accordion-icon-margin-right: var(--global-small-margin);
+    --accordion-icon-color: var(--global-color);
+    --accordion-icon-size: #{$accordion-icon-size};
+
+    // Inverse
+    --inverse-accordion-header-color: var(--inverse-global-emphasis-color);
+    --inverse-accordion-header-hover-color: var(--inverse-global-color);
+    --inverse-accordion-item-disabled-color: var(--inverse-global-emphasis-color);
+}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { MotionEndEventHandler } from 'rc-motion';
+import './index.scss';
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    closable?: boolean;
+    closeIcon?: React.ReactNode;
+    prefixCls?: string;
+    severity?: 'primary' | 'success' | 'warning' | 'danger';
+    onClose?: () => void;
+    onClosed?: MotionEndEventHandler;
+}
+export declare type AlertRef = {
+    close: () => void;
+};
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<AlertRef>>;

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import CSSMotion from 'rc-motion';
+import { Close } from '../Close';
+import { useConfig } from '../ConfrigProvider';
+import './index.scss';
+export const Alert = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const { children, className, closable = true, closeIcon, prefixCls = `${config.prefixCls}-alert`, style, severity, onClose, onClosed, ...restProps } = props;
+    const [closed, setClosed] = React.useState(false);
+    const close = () => {
+        onClose?.();
+        setClosed(true);
+    };
+    React.useImperativeHandle(ref, () => ({
+        close,
+    }), []);
+    return (React.createElement(CSSMotion, { visible: !closed, motionName: `${prefixCls}-motion`, motionAppear: false, motionEnter: false, onLeaveStart: node => ({
+            maxHeight: node.offsetHeight,
+        }), onLeaveEnd: onClosed }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: classNames(prefixCls, {
+            [`${prefixCls}-${severity}`]: severity !== undefined,
+        }, className, motionClassName), "data-show": !closed, role: "alert", style: { ...style, ...motionStyle }, ...restProps },
+        closable && (React.isValidElement(closeIcon) ? (React.cloneElement(closeIcon, {
+            className: `${prefixCls}-close`,
+            onClick: close,
+        })) : (React.createElement(Close, { className: `${prefixCls}-close`, onClick: close }))),
+        children))));
+});

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

@@ -0,0 +1,194 @@
+// Name:            Alert
+// Description:     Component to create alert messages
+//
+// Component:       `uk-alert`
+//
+// Adopted:         `uk-alert-close`
+//                  `uk-alert-motion`
+//
+// Modifiers:       `uk-alert-primary`
+//                  `uk-alert-success`
+//                  `uk-alert-warning`
+//                  `uk-alert-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Alert
+ ========================================================================== */
+
+.uk-alert {
+    background: var(--alert-background);
+    color: var(--alert-color);
+    margin-bottom: var(--alert-margin-vertical);
+    padding: var(--alert-padding);
+    padding-right: var(--alert-padding-right);
+    position: relative;
+    @if mixin-exists(hook-alert) {
+        @include hook-alert;
+    }
+}
+
+/* Add margin if adjacent element */
+* + .uk-alert {
+    margin-top: var(--alert-margin-vertical);
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-alert > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+
+.uk-alert-close {
+    position: absolute;
+    right: var(--alert-close-right);
+    top: var(--alert-close-top);
+    @if mixin-exists(hook-alert-close) {
+        @include hook-alert-close;
+    }
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-alert-close:first-child + * {
+    margin-top: 0;
+}
+
+/*
+ * Hover + Focus
+ */
+
+.uk-alert-close:hover,
+.uk-alert-close:focus {
+    --close-hover-color: initial;
+
+    opacity: 0.8;
+    @if mixin-exists(hook-alert-close-hover) {
+        @include hook-alert-close-hover;
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Primary
+ */
+
+.uk-alert-primary {
+    background: var(--alert-primary-background);
+    color: var(--alert-primary-color);
+    @if mixin-exists(hook-alert-primary) {
+        @include hook-alert-primary;
+    }
+}
+
+/*
+ * Success
+ */
+
+.uk-alert-success {
+    background: var(--alert-success-background);
+    color: var(--alert-success-color);
+    @if mixin-exists(hook-alert-success) {
+        @include hook-alert-success;
+    }
+}
+
+/*
+ * Warning
+ */
+
+.uk-alert-warning {
+    background: var(--alert-warning-background);
+    color: var(--alert-warning-color);
+    @if mixin-exists(hook-alert-warning) {
+        @include hook-alert-warning;
+    }
+}
+
+/*
+ * Danger
+ */
+
+.uk-alert-danger {
+    background: var(--alert-danger-background);
+    color: var(--alert-danger-color);
+    @if mixin-exists(hook-alert-danger) {
+        @include hook-alert-danger;
+    }
+}
+
+
+/* Motion
+ ========================================================================== */
+
+.uk-alert-motion {
+    transition: height var(--transition-duration), opacity var(--transition-duration);
+}
+
+.uk-alert-motion-leave {
+    opacity: 1;
+    overflow: hidden;
+    transition: max-height var(--transition-duration) var(--ease-in-out-circ),
+        opacity var(--transition-duration) var(--ease-in-out-circ),
+        padding-top var(--transition-duration) var(--ease-in-out-circ),
+        padding-bottom var(--transition-duration) var(--ease-in-out-circ),
+        margin-bottom var(--transition-duration) var(--ease-in-out-circ);
+}
+
+.uk-alert-motion-leave-active {
+    margin-bottom: 0 !important;
+    max-height: 0;
+    opacity: 0;
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-alert-misc) {
+    @include hook-alert-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --alert-margin-vertical: var(--global-margin);
+    --alert-padding: var(--global-small-gutter);
+    --alert-padding-right: calc(var(--alert-padding) + 15px);
+    --alert-background: var(--global-muted-background);
+    --alert-color: var(--global-color);
+    --alert-close-top: var(--alert-padding);
+    --alert-close-right: var(--alert-padding);
+    --alert-primary-background: #{$alert-primary-background};
+    --alert-primary-color: var(--global-primary-background);
+    --alert-success-background: #{$alert-success-background};
+    --alert-success-color: var(--global-success-background);
+    --alert-warning-background: #{$alert-warning-background};
+    --alert-warning-color: var(--global-warning-background);
+    --alert-danger-background: #{$alert-danger-background};
+    --alert-danger-color: var(--global-danger-background);
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { Direction } from '../../types';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type AlignOwnProps = {
+    direction?: Direction;
+    prefixCls?: string;
+    side?: 'left' | 'right';
+};
+export declare type AlignProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, AlignOwnProps>;
+declare const defaultElement = "div";
+export declare function Align<E extends React.ElementType = typeof defaultElement>(props: AlignProps<E>): JSX.Element;
+export {};

package/dist/esm/components/Align/Align.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+const defaultElement = 'div';
+export function Align(props) {
+    const config = useConfig();
+    const { direction, prefixCls = `${config.prefixCls}-align`, side = direction === 'rtl' ? 'right' : 'left', ...restProps } = props;
+    const isRtl = direction === 'rtl';
+    const invertedSide = side === 'left' ? 'right' : 'left';
+    return (React.createElement(Component, { className: classNames({
+            [`${prefixCls}-${isRtl ? invertedSide : side}`]: true,
+        }), component: defaultElement, ...restProps }));
+}

package/dist/esm/components/Align/Left.d.ts

@@ -0,0 +1,5 @@
+import type { AlignProps } from './Align';
+export declare function Left(props: Omit<AlignProps, 'side'>): JSX.Element;
+export declare namespace Left {
+    var displayName: string;
+}

package/dist/esm/components/Align/Left.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Align } from './Align';
+export function Left(props) {
+    return React.createElement(Align, { ...props, side: "left" });
+}
+if (process.env.NODE_ENV !== 'production') {
+    Left.displayName = 'Align.Left';
+}

package/dist/esm/components/Align/Right.d.ts

@@ -0,0 +1,5 @@
+import type { AlignProps } from './Align';
+export declare function Right(props: Omit<AlignProps, 'side'>): JSX.Element;
+export declare namespace Right {
+    var displayName: string;
+}

package/dist/esm/components/Align/Right.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Align } from './Align';
+export function Right(props) {
+    return React.createElement(Align, { ...props, side: "right" });
+}
+if (process.env.NODE_ENV !== 'production') {
+    Right.displayName = 'Align.Right';
+}

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

@@ -0,0 +1,10 @@
+import { PolymorphicComponent } from '../Component';
+import { AlignOwnProps } from './Align';
+import { Left } from './Left';
+import { Right } from './Right';
+import './index.scss';
+export declare type CompoundedAlign = PolymorphicComponent<AlignOwnProps> & {
+    Left: typeof Left;
+    Right: typeof Right;
+};
+export declare const Align: CompoundedAlign;

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

@@ -0,0 +1,7 @@
+import { Align as InternalAlign } from './Align';
+import { Left } from './Left';
+import { Right } from './Right';
+import './index.scss';
+export const Align = InternalAlign;
+Align.Left = Left;
+Align.Right = Right;

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

@@ -0,0 +1,147 @@
+// Name:            Align
+// Description:     Utilities to align embedded content
+//
+// Component:       `uk-align-left-*`
+//                  `uk-align-right-*`
+//                  `uk-align-center`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Align
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+[class*='uk-align'] {
+    display: block;
+    margin-bottom: var(--align-margin-vertical);
+}
+
+* + [class*='uk-align'] {
+    margin-top: var(--align-margin-vertical);
+}
+
+/*
+ * Center
+ */
+
+.uk-align-center {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/*
+ * Left/Right
+ */
+
+.uk-align-left {
+    float: left;
+    margin-right: var(--align-margin-horizontal);
+    margin-top: 0;
+}
+
+.uk-align-right {
+    float: right;
+    margin-left: var(--align-margin-horizontal);
+    margin-top: 0;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+    .uk-align-left\@s {
+        float: left;
+        margin-right: var(--align-margin-horizontal);
+        margin-top: 0;
+    }
+
+    .uk-align-right\@s {
+        float: right;
+        margin-left: var(--align-margin-horizontal);
+        margin-top: 0;
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-align-left\@m {
+        float: left;
+        margin-right: var(--align-margin-horizontal);
+        margin-top: 0;
+    }
+
+    .uk-align-right\@m {
+        float: right;
+        margin-left: var(--align-margin-horizontal);
+        margin-top: 0;
+    }
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-align-left\@l {
+        float: left;
+        margin-top: 0;
+    }
+
+    .uk-align-right\@l {
+        float: right;
+        margin-top: 0;
+    }
+
+    .uk-align-left,
+    .uk-align-left\@s,
+    .uk-align-left\@m,
+    .uk-align-left\@l {
+        margin-right: var(--align-margin-horizontal-l);
+    }
+
+    .uk-align-right,
+    .uk-align-right\@s,
+    .uk-align-right\@m,
+    .uk-align-right\@l {
+        margin-left: var(--align-margin-horizontal-l);
+    }
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+    .uk-align-left\@xl {
+        float: left;
+        margin-right: var(--align-margin-horizontal-l);
+        margin-top: 0;
+    }
+
+    .uk-align-right\@xl {
+        float: right;
+        margin-left: var(--align-margin-horizontal-l);
+        margin-top: 0;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-align-misc) {
+    @include hook-align-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --align-margin-horizontal: var(--global-gutter);
+    --align-margin-horizontal-l: var(--global-medium-gutter);
+    --align-margin-vertical: var(--global-gutter);
+}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ArticleProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
+}
+export declare function Article(props: ArticleProps): JSX.Element;

package/dist/esm/components/Article/Article.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+export function Article(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
+    return (React.createElement("article", { className: classNames(prefixCls, className), ...restProps }));
+}

package/dist/esm/components/Article/Meta.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type ArticleMetaOwnProps = {
+    prefixCls?: string;
+};
+export declare type ArticleMetaProps<E extends React.ElementType> = PolymorphicComponentProps<E, ArticleMetaOwnProps>;
+declare const defaultElement = "p";
+export declare function Meta<E extends React.ElementType = typeof defaultElement>(props: ArticleMetaProps<E>): JSX.Element;
+export declare namespace Meta {
+    var displayName: string;
+}
+export {};