@broxus/react-uikit 0.1.0

package/dist/cjs/components/Accordion/Accordion.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const rc_collapse_1 = __importDefault(require("rc-collapse"));
+const utils_1 = require("../../utils");
+const ConfrigProvider_1 = require("../ConfrigProvider");
+function Accordion(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { direction, prefixCls = `${config.prefixCls}-accordion`, ...restProps } = props;
+    return (React.createElement(rc_collapse_1.default, { className: (0, classnames_1.default)({
+            [`${prefixCls}-rtl`]: direction === 'rtl',
+        }), openMotion: utils_1.collapseMotion, prefixCls: prefixCls, ...restProps }));
+}
+exports.Accordion = Accordion;

package/dist/cjs/components/Accordion/Item.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { CollapsePanelProps } from 'rc-collapse/lib/interface';
+export declare type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>>;
+export declare function Item(props: AccordionItemProps): JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}

package/dist/cjs/components/Accordion/Item.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const React = __importStar(require("react"));
+const rc_collapse_1 = require("rc-collapse");
+const Icon_1 = require("../Icon");
+function Item(props) {
+    const { expandIcon, ...restProps } = props;
+    const mergedExpandIcon = React.useMemo(() => (expandIcon || (({ isActive }) => (React.createElement(Icon_1.Icon, { icon: isActive ? 'expand_more' : 'chevron_right' })))), [expandIcon]);
+    return (React.createElement(rc_collapse_1.Panel, { expandIcon: mergedExpandIcon, ...restProps }));
+}
+exports.Item = Item;
+if (process.env.NODE_ENV !== 'production') {
+    Item.displayName = 'Accordion.Item';
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Item } from './Item';
+import type { AccordionProps } from './Accordion';
+import './index.scss';
+export interface CompoundedAccordion extends React.FunctionComponent<AccordionProps> {
+    Item: typeof Item;
+}
+export declare const Accordion: CompoundedAccordion;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const Accordion_1 = require("./Accordion");
+const Item_1 = require("./Item");
+require("./index.scss");
+exports.Accordion = Accordion_1.Accordion;
+exports.Accordion.Item = Item_1.Item;

package/dist/cjs/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/cjs/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/cjs/components/Alert/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const rc_motion_1 = __importDefault(require("rc-motion"));
+const Close_1 = require("../Close");
+const ConfrigProvider_1 = require("../ConfrigProvider");
+require("./index.scss");
+exports.Alert = React.forwardRef((props, ref) => {
+    const config = (0, ConfrigProvider_1.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(rc_motion_1.default, { visible: !closed, motionName: `${prefixCls}-motion`, motionAppear: false, motionEnter: false, onLeaveStart: node => ({
+            maxHeight: node.offsetHeight,
+        }), onLeaveEnd: onClosed }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: (0, classnames_1.default)(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_1.Close, { className: `${prefixCls}-close`, onClick: close }))),
+        children))));
+});

package/dist/cjs/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/cjs/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/cjs/components/Align/Align.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Align = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
+const defaultElement = 'div';
+function Align(props) {
+    const config = (0, ConfrigProvider_1.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_1.Component, { className: (0, classnames_1.default)({
+            [`${prefixCls}-${isRtl ? invertedSide : side}`]: true,
+        }), component: defaultElement, ...restProps }));
+}
+exports.Align = Align;

package/dist/cjs/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/cjs/components/Align/Left.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Left = void 0;
+const React = __importStar(require("react"));
+const Align_1 = require("./Align");
+function Left(props) {
+    return React.createElement(Align_1.Align, { ...props, side: "left" });
+}
+exports.Left = Left;
+if (process.env.NODE_ENV !== 'production') {
+    Left.displayName = 'Align.Left';
+}

package/dist/cjs/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;
+}