@broxus/react-uikit 0.1.0

package/dist/esm/components/Card/Media.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    position: 'left' | 'top' | 'right' | 'bottom';
+    prefixCls?: string;
+}
+export declare function Media(props: CardMediaProps): JSX.Element;
+export declare namespace Media {
+    var displayName: string;
+}

package/dist/esm/components/Card/Media.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+export function Media(props) {
+    const config = useConfig();
+    const { className, position, prefixCls = `${config.prefixCls}-card-media`, ...restProps } = props;
+    return (React.createElement("div", { className: classNames({
+            [`${prefixCls}-${position}`]: position !== undefined,
+        }, className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Media.displayName = 'Card.Media';
+}

package/dist/esm/components/Card/Title.d.ts

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

package/dist/esm/components/Card/Title.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+const defaultElement = 'h1';
+export function Title(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-card-title`, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Title.displayName = 'Card.Title';
+}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Badge } from './Badge';
+import { Body } from './Body';
+import { Footer } from './Footer';
+import { Header } from './Header';
+import { Media } from './Media';
+import { Title } from './Title';
+import type { CardProps } from './Card';
+import './index.scss';
+export type { CardProps };
+export interface CompoundedCard extends React.FunctionComponent<CardProps> {
+    Badge: typeof Badge;
+    Body: typeof Body;
+    Footer: typeof Footer;
+    Header: typeof Header;
+    Media: typeof Media;
+    Title: typeof Title;
+}
+export declare const Card: CompoundedCard;

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

@@ -0,0 +1,15 @@
+import { Badge } from './Badge';
+import { Body } from './Body';
+import { Card as InternalCard } from './Card';
+import { Footer } from './Footer';
+import { Header } from './Header';
+import { Media } from './Media';
+import { Title } from './Title';
+import './index.scss';
+export const Card = InternalCard;
+Card.Badge = Badge;
+Card.Body = Body;
+Card.Footer = Footer;
+Card.Header = Header;
+Card.Media = Media;
+Card.Title = Title;

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

@@ -0,0 +1,503 @@
+// Name:            Card
+// Description:     Component to create boxed content containers
+//
+// Component:       `uk-card`
+//
+// Sub-objects:     `uk-card-body`
+//                  `uk-card-header`
+//                  `uk-card-footer`
+//                  `uk-card-media-*`
+//                  `uk-card-title`
+//                  `uk-card-badge`
+//
+// Modifiers:       `uk-card-hover`
+//                  `uk-card-default`
+//                  `uk-card-primary`
+//                  `uk-card-secondary`
+//                  `uk-card-tertiary`
+//                  `uk-card-small`
+//                  `uk-card-large`
+//
+// Uses:            `uk-grid-stack`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Card
+ ========================================================================== */
+
+.uk-card {
+    box-sizing: border-box;
+    position: relative;
+    @if mixin-exists(hook-card) {
+        @include hook-card;
+    }
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-card-body {
+    display: flow-root;
+    padding: var(--card-body-padding-vertical) var(--card-body-padding-horizontal);
+    @if mixin-exists(hook-card-body) {
+        @include hook-card-body;
+    }
+}
+
+.uk-card-header {
+    display: flow-root;
+    padding: var(--card-header-padding-vertical) var(--card-header-padding-horizontal);
+    @if mixin-exists(hook-card-header) {
+        @include hook-card-header;
+    }
+}
+
+.uk-card-footer {
+    display: flow-root;
+    padding: var(--card-footer-padding-vertical) var(--card-footer-padding-horizontal);
+    @if mixin-exists(hook-card-footer) {
+        @include hook-card-footer;
+    }
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-card-body {
+        padding: var(--card-body-padding-vertical-l) var(--card-body-padding-horizontal-l);
+    }
+
+    .uk-card-header {
+        padding: var(--card-header-padding-vertical-l) var(--card-header-padding-horizontal-l);
+    }
+
+    .uk-card-footer {
+        padding: var(--card-footer-padding-vertical-l) var(--card-footer-padding-horizontal-l);
+    }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-card-body > :last-child,
+.uk-card-header > :last-child,
+.uk-card-footer > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Media
+ ========================================================================== */
+
+/*
+ * Reserved alignment modifier to style the media element, e.g. with `border-radius`
+ * Implemented by the theme
+ */
+
+[class*='uk-card-media'] {
+    @if mixin-exists(hook-card-media) {
+        @include hook-card-media;
+    }
+}
+
+.uk-card-media-top,
+.uk-grid-stack > .uk-card-media-left,
+.uk-grid-stack > .uk-card-media-right {
+    @if mixin-exists(hook-card-media-top) {
+        @include hook-card-media-top;
+    }
+}
+
+.uk-card-media-bottom {
+    @if mixin-exists(hook-card-media-bottom) {
+        @include hook-card-media-bottom;
+    }
+}
+
+:not(.uk-grid-stack) > .uk-card-media-left {
+    @if mixin-exists(hook-card-media-left) {
+        @include hook-card-media-left;
+    }
+}
+
+:not(.uk-grid-stack) > .uk-card-media-right {
+    @if mixin-exists(hook-card-media-right) {
+        @include hook-card-media-right;
+    }
+}
+
+
+/* Title
+ ========================================================================== */
+
+.uk-card-title {
+    font-size: var(--card-title-font-size);
+    line-height: var(--card-title-line-height);
+    @if mixin-exists(hook-card-title) {
+        @include hook-card-title;
+    }
+}
+
+
+/* Badge
+ ========================================================================== */
+
+/*
+ * 1. Position
+ * 2. Size
+ * 3. Style
+ * 4. Center child vertically
+ */
+
+.uk-card-badge {
+    align-items: center; /* 4 */
+    background: var(--card-badge-background); /* 3 */
+    color: var(--card-badge-color); /* 3 */
+    display: flex; /* 4 */
+    font-size: var(--card-badge-font-size); /* 3 */
+    height: var(--card-badge-height); /* 2 */
+    justify-content: center; /* 4 */
+    line-height: 0; /* 4 */
+    padding: 0 var(--card-badge-padding-horizontal);
+    position: absolute; /* 1 */
+    right: var(--card-badge-right); /* 1 */
+    top: var(--card-badge-top); /* 1 */
+    z-index: 1; /* 1 */
+    @if mixin-exists(hook-card-badge) {
+        @include hook-card-badge;
+    }
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-card-badge:first-child + * {
+    margin-top: 0;
+}
+
+
+/* Hover modifier
+ ========================================================================== */
+
+.uk-card-hover:not(.uk-card-default, .uk-card-primary, .uk-card-secondary, .uk-card-tertiary):hover {
+    background: var(--card-hover-background);
+    @if mixin-exists(hook-card-hover) {
+        @include hook-card-hover;
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ * Note: Header and Footer are only implemented for the default style
+ */
+
+.uk-card-default {
+    background: var(--card-default-background);
+    color: var(--card-default-color);
+    @if mixin-exists(hook-card-default) {
+        @include hook-card-default;
+    }
+}
+
+.uk-card-default .uk-card-title {
+    color: var(--card-default-title-color);
+    @if mixin-exists(hook-card-default-title) {
+        @include hook-card-default-title;
+    }
+}
+
+.uk-card-default.uk-card-hover:hover {
+    background-color: var(--card-default-hover-background);
+    @if mixin-exists(hook-card-default-hover) {
+        @include hook-card-default-hover;
+    }
+}
+
+.uk-card-default .uk-card-header {
+    @if mixin-exists(hook-card-default-header) {
+        @include hook-card-default-header;
+    }
+}
+
+.uk-card-default .uk-card-footer {
+    @if mixin-exists(hook-card-default-footer) {
+        @include hook-card-default-footer;
+    }
+}
+
+/*
+ * Primary
+ */
+
+.uk-card-primary {
+    background: var(--card-primary-background);
+    color: var(--card-primary-color);
+    @if mixin-exists(hook-card-primary) {
+        @include hook-card-primary;
+    }
+}
+
+.uk-card-primary .uk-card-title {
+    color: var(--card-primary-title-color);
+    @if mixin-exists(hook-card-primary-title) {
+        @include hook-card-primary-title;
+    }
+}
+
+.uk-card-primary.uk-card-hover:hover {
+    background-color: var(--card-primary-hover-background);
+    @if mixin-exists(hook-card-primary-hover) {
+        @include hook-card-primary-hover;
+    }
+}
+
+// Color Mode
+@if $card-primary-color-mode == light {
+    .uk-card-primary.uk-card-body {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $card-primary-color-mode == light {
+    .uk-card-primary > :not([class*='uk-card-media']) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $card-primary-color-mode == dark {
+    .uk-card-primary.uk-card-body {
+        @extend .uk-dark !optional;
+    }
+}
+
+@if $card-primary-color-mode == dark {
+    .uk-card-primary > :not([class*='uk-card-media']) {
+        @extend .uk-dark !optional;
+    }
+}
+
+/*
+ * Secondary
+ */
+
+.uk-card-secondary {
+    background: var(--card-secondary-background);
+    color: var(--card-secondary-color);
+    @if mixin-exists(hook-card-secondary) {
+        @include hook-card-secondary;
+    }
+}
+
+.uk-card-secondary .uk-card-title {
+    color: var(--card-secondary-title-color);
+    @if mixin-exists(hook-card-secondary-title) {
+        @include hook-card-secondary-title;
+    }
+}
+
+.uk-card-secondary.uk-card-hover:hover {
+    background-color: var(--card-secondary-hover-background);
+    @if mixin-exists(hook-card-secondary-hover) {
+        @include hook-card-secondary-hover;
+    }
+}
+
+// Color Mode
+@if $card-secondary-color-mode == light {
+    .uk-card-secondary.uk-card-body {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $card-secondary-color-mode == light {
+    .uk-card-secondary > :not([class*='uk-card-media']) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $card-secondary-color-mode == dark {
+    .uk-card-secondary.uk-card-body {
+        @extend .uk-dark !optional;
+    }
+}
+
+@if $card-secondary-color-mode == dark {
+    .uk-card-secondary > :not([class*='uk-card-media']) {
+        @extend .uk-dark !optional;
+    }
+}
+
+/*
+ * Tertiary
+ */
+
+.uk-card-tertiary {
+    background: var(--card-tertiary-background);
+    color: var(--card-tertiary-color);
+    @if mixin-exists(hook-card-tertiary) {
+        @include hook-card-tertiary;
+    }
+}
+
+.uk-card-tertiary .uk-card-title {
+    color: var(--card-tertiary-title-color);
+    @if mixin-exists(hook-card-tertiary-title) {
+        @include hook-card-tertiary-title;
+    }
+}
+
+.uk-card-tertiary.uk-card-hover:hover {
+    background-color: var(--card-tertiary-hover-background);
+    @if mixin-exists(hook-card-tertiary-hover) {
+        @include hook-card-tertiary-hover;
+    }
+}
+
+// Color Mode
+@if $card-tertiary-color-mode == light {
+    .uk-card-tertiary.uk-card-body {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $card-tertiary-color-mode == light {
+    .uk-card-tertiary > :not([class*='uk-card-media']) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $card-tertiary-color-mode == dark {
+    .uk-card-tertiary.uk-card-body {
+        @extend .uk-dark !optional;
+    }
+}
+
+@if $card-tertiary-color-mode == dark {
+    .uk-card-tertiary > :not([class*='uk-card-media']) {
+        @extend .uk-dark !optional;
+    }
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-card-small.uk-card-body,
+.uk-card-small .uk-card-body {
+    padding: var(--card-small-body-padding-vertical) var(--card-small-body-padding-horizontal);
+}
+
+.uk-card-small .uk-card-header {
+    padding: var(--card-small-header-padding-vertical) var(--card-small-header-padding-horizontal);
+}
+
+.uk-card-small .uk-card-footer {
+    padding: var(--card-small-footer-padding-vertical) var(--card-small-footer-padding-horizontal);
+}
+
+/*
+ * Large
+ */
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-card-large.uk-card-body,
+    .uk-card-large .uk-card-body {
+        padding: var(--card-large-body-padding-vertical-l) var(--card-large-body-padding-horizontal-l);
+    }
+
+    .uk-card-large .uk-card-header {
+        padding: var(--card-large-header-padding-vertical-l) var(--card-large-header-padding-horizontal-l);
+    }
+
+    .uk-card-large .uk-card-footer {
+        padding: var(--card-large-footer-padding-vertical-l) var(--card-large-footer-padding-horizontal-l);
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-card-misc) {
+    @include hook-card-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --card-body-padding-horizontal: var(--global-gutter);
+    --card-body-padding-vertical: var(--global-gutter);
+    --card-body-padding-horizontal-l: var(--global-medium-gutter);
+    --card-body-padding-vertical-l: var(--global-medium-gutter);
+    --card-header-padding-horizontal: var(--global-gutter);
+    --card-header-padding-vertical: #{$card-header-padding-vertical};
+    --card-header-padding-horizontal-l: var(--global-medium-gutter);
+    --card-header-padding-vertical-l: #{$card-header-padding-vertical-l};
+    --card-footer-padding-horizontal: var(--global-gutter);
+    --card-footer-padding-vertical: #{$card-footer-padding-vertical};
+    --card-footer-padding-horizontal-l: var(--global-medium-gutter);
+    --card-footer-padding-vertical-l: #{$card-footer-padding-vertical-l};
+    --card-title-font-size: var(--global-large-font-size);
+    --card-title-line-height: #{$card-title-line-height};
+    --card-badge-top: var(--global-small-gutter);
+    --card-badge-right: var(--card-badge-top);
+    --card-badge-height: var(--badge-size);
+    --card-badge-padding-horizontal: var(--badge-padding-horizontal);
+    --card-badge-background: var(--badge-background);
+    --card-badge-color: var(--badge-color);
+    --card-badge-font-size: var(--badge-font-size);
+    --card-hover-background: var(--global-muted-background);
+    --card-default-background: var(--global-muted-background);
+    --card-default-color: var(--global-color);
+    --card-default-title-color: var(--global-emphasis-color);
+    --card-default-hover-background: #{$card-default-hover-background};
+    --card-primary-background: var(--global-primary-background);
+    --card-primary-color: var(--global-inverse-color);
+    --card-primary-title-color: var(--card-primary-color);
+    --card-primary-hover-background: #{$card-primary-hover-background};
+    --card-secondary-background: var(--global-secondary-background);
+    --card-secondary-color: var(--global-inverse-color);
+    --card-secondary-title-color: var(--card-secondary-color);
+    --card-secondary-hover-background: #{$card-secondary-hover-background};
+    --card-tertiary-background: var(--global-tertiary-background);
+    --card-tertiary-color: var(--global-inverse-color);
+    --card-tertiary-title-color: var(--card-tertiary-color);
+    --card-tertiary-hover-background: #{$card-tertiary-hover-background};
+    --card-small-body-padding-horizontal: var(--global-margin);
+    --card-small-body-padding-vertical: var(--global-margin);
+    --card-small-header-padding-horizontal: var(--global-margin);
+    --card-small-header-padding-vertical: #{$card-small-header-padding-vertical};
+    --card-small-footer-padding-horizontal: var(--global-margin);
+    --card-small-footer-padding-vertical: #{$card-small-footer-padding-vertical};
+    --card-large-body-padding-horizontal-l: var(--global-large-gutter);
+    --card-large-body-padding-vertical-l: var(--global-large-gutter);
+    --card-large-header-padding-horizontal-l: var(--global-large-gutter);
+    --card-large-header-padding-vertical-l: #{$card-large-header-padding-vertical-l};
+    --card-large-footer-padding-horizontal-l: var(--global-large-gutter);
+    --card-large-footer-padding-vertical-l: #{$card-large-footer-padding-vertical-l};
+
+    // Inverse
+    --inverse-card-badge-background: var(--inverse-global-primary-background);
+    --inverse-card-badge-color: var(--inverse-global-inverse-color);
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { IconProps } from '../Icon';
+export declare type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'> & {
+    prefixCls?: string;
+};
+declare const defaultElement = "button";
+export declare function Close<E extends React.ElementType = typeof defaultElement>(props: CloseProps<E>): JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+import { Icon } from '../Icon';
+const defaultElement = 'button';
+export function Close(props) {
+    const config = useConfig();
+    const { className, prefixCls = `${config.prefixCls}-close`, ...restProps } = props;
+    return (React.createElement(Icon, { "aria-hidden": "false", className: classNames(prefixCls, className), component: defaultElement, tabIndex: -1, ...restProps, icon: "close" }));
+}

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

@@ -0,0 +1,60 @@
+// Name:            Close
+// Description:     Component to create a close button
+//
+// Component:       `uk-close`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Close
+ ========================================================================== */
+
+/*
+ * Adopts `uk-icon`
+ */
+
+.uk-close {
+    background-color: transparent;
+    color: var(--close-color);
+    @if mixin-exists(hook-close) {
+        @include hook-close;
+    }
+}
+
+/* Hover + Focus */
+.uk-close:hover,
+.uk-close:focus {
+    color: var(--close-hover-color);
+    outline: none;
+    @if mixin-exists(hook-close-hover) {
+        @include hook-close-hover;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-close-misc) {
+    @include hook-close-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --close-color: var(--global-muted-color);
+    --close-hover-color: var(--global-color);
+
+    // Inverse
+    --inverse-close-color: var(--inverse-global-muted-color);
+    --inverse-close-hover-color: var(--inverse-global-color);
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare type ComponentOwnProps<E extends React.ElementType = React.ElementType> = {
+    component?: E;
+};
+export declare type ComponentProps<E extends React.ElementType> = ComponentOwnProps<E> & Omit<React.ComponentProps<E>, keyof ComponentOwnProps>;
+declare const defaultElement = "div";
+export declare const Component: <E extends React.ElementType = typeof defaultElement>(props: ComponentProps<E>) => React.ReactElement | null;
+export {};

package/dist/esm/components/Component/Component.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+const defaultElement = 'div';
+export const Component = React.forwardRef(({ component: El = defaultElement, ...props }, ref) => React.createElement(El, { ref: ref, ...props }));

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { ComponentProps } from './Component';
+export { Component } from './Component';
+export declare type PolymorphicComponentProps<E extends React.ElementType, P> = ComponentProps<E> & P;
+export declare type PolymorphicComponent<P, D extends React.ElementType = 'div'> = <E extends React.ElementType = D>(props: PolymorphicComponentProps<E, P>) => React.ReactElement | null;

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

@@ -0,0 +1 @@
+export { Component } from './Component';