@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,97 @@
+"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.Cover = void 0;
+const React = __importStar(require("react"));
+const js_utils_1 = require("@broxus/js-utils");
+const classnames_1 = __importDefault(require("classnames"));
+require("./index.scss");
+function Cover(props) {
+    const { automute = true, className, children, height, width, ...restProps } = props;
+    const container = React.useRef(null);
+    const coveringElement = React.useRef(null);
+    const resize = () => {
+        if (coveringElement.current == null || container.current == null) {
+            return;
+        }
+        const { current: el } = coveringElement;
+        const { current: wrapper } = container;
+        const { height: h, width: w } = js_utils_1.Dimensions.cover({
+            height: height
+                || el.naturalHeight
+                || el.videoHeight
+                || el.clientHeight,
+            width: width
+                || el.naturalWidth
+                || el.videoWidth
+                || el.clientWidth,
+        }, {
+            height: wrapper.offsetHeight + (wrapper.offsetHeight % 2 ? 1 : 0),
+            width: wrapper.offsetWidth + (wrapper.offsetWidth % 2 ? 1 : 0),
+        });
+        if (!h || !w) {
+            return;
+        }
+        el.style.height = `${h}px`;
+        el.style.width = `${w}px`;
+    };
+    const childrenWithCoverClass = React.Children.map(children, (child, idx) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+                ref: idx === 0 ? coveringElement : null,
+                // eslint-disable-next-line sort-keys
+                className: 'uk-cover',
+                onLoadedMetadata: () => {
+                    resize();
+                },
+                // eslint-disable-next-line sort-keys
+                onLoad: () => {
+                    if (automute) {
+                        try {
+                            coveringElement.current?.contentWindow?.postMessage('{"event": "command","method":"setVolume", "value":0}', '*');
+                        }
+                        catch (e) { }
+                    }
+                },
+            });
+        }
+        return child;
+    })?.pop();
+    React.useEffect(() => {
+        const debounced = (0, js_utils_1.debounce)(resize, 50);
+        window.addEventListener('resize', debounced);
+        window.addEventListener('orientationchange', debounced);
+        resize();
+        return () => {
+            window.removeEventListener('resize', debounced);
+            window.removeEventListener('orientationchange', debounced);
+        };
+    }, []);
+    return (React.createElement("div", { ref: container, className: (0, classnames_1.default)('uk-cover-container', className), ...restProps }, childrenWithCoverClass));
+}
+exports.Cover = Cover;

package/dist/cjs/components/Cover/index.scss

@@ -0,0 +1,60 @@
+// Name:            Cover
+// Description:     Utilities to let embedded content cover their container in a centered position
+//
+// Component:       `uk-cover`
+//
+// Sub-object:      `uk-cover-container`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Cover
+ ========================================================================== */
+
+/*
+ * Works with iframes and embedded content
+ * 1. Reset responsiveness for embedded content
+ * 2. Center object
+ * Note: Percent values on the `top` property only works if this element
+ *       is absolute positioned or if the container has a height
+ */
+
+.uk-cover {
+    left: 50%;
+
+    /* 1 */
+    max-width: none;
+
+    /* 2 */
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+iframe.uk-cover { pointer-events: none; }
+
+
+/* Container
+ ========================================================================== */
+
+/*
+ * 1. Parent container which clips resized object
+ * 2. Needed if the child is positioned absolute. See note above
+ */
+
+.uk-cover-container {
+    /* 1 */
+    overflow: hidden;
+
+    /* 2 */
+    position: relative;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-cover-misc) {
+    @include hook-cover-misc;
+}

package/dist/cjs/components/DescriptionList/Description.d.ts

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

package/dist/cjs/components/DescriptionList/Description.js

@@ -0,0 +1,34 @@
+"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.Description = void 0;
+const React = __importStar(require("react"));
+function Description(props) {
+    return React.createElement("dd", { ...props });
+}
+exports.Description = Description;
+if (process.env.NODE_ENV !== 'production') {
+    Description.displayName = 'DescriptionList.Description';
+}

package/dist/cjs/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
+    divided?: boolean;
+}
+export declare function DescriptionList(props: DescriptionListProps): JSX.Element;

package/dist/cjs/components/DescriptionList/DescriptionList.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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DescriptionList = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+function DescriptionList(props) {
+    const { className, divided, ...restProps } = props;
+    return (React.createElement("dl", { className: (0, classnames_1.default)('uk-description-list', {
+            'uk-description-list-divider': divided,
+        }, className), ...restProps }));
+}
+exports.DescriptionList = DescriptionList;

package/dist/cjs/components/DescriptionList/Term.d.ts

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

package/dist/cjs/components/DescriptionList/Term.js

@@ -0,0 +1,34 @@
+"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.Term = void 0;
+const React = __importStar(require("react"));
+function Term(props) {
+    return React.createElement("dt", { ...props });
+}
+exports.Term = Term;
+if (process.env.NODE_ENV !== 'production') {
+    Term.displayName = 'DescriptionList.Term';
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Description } from './Description';
+import { Term } from './Term';
+import type { DescriptionListProps } from './DescriptionList';
+import './index.scss';
+export type { DescriptionListProps };
+export interface CompoundedDescriptionList extends React.FunctionComponent<DescriptionListProps> {
+    Description: typeof Description;
+    Term: typeof Term;
+}
+export declare const DescriptionList: CompoundedDescriptionList;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DescriptionList = void 0;
+const DescriptionList_1 = require("./DescriptionList");
+const Description_1 = require("./Description");
+const Term_1 = require("./Term");
+require("./index.scss");
+exports.DescriptionList = DescriptionList_1.DescriptionList;
+exports.DescriptionList.Description = Description_1.Description;
+exports.DescriptionList.Term = Term_1.Term;

package/dist/cjs/components/DescriptionList/index.scss

@@ -0,0 +1,87 @@
+// Name:            Description list
+// Description:     Styles for description lists
+//
+// Component:       `uk-description-list`
+//
+// Modifiers:       `uk-description-list-divider`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Description list
+ ========================================================================== */
+
+/*
+ * Term
+ */
+
+.uk-description-list > dt {
+    color: var(--description-list-term-color);
+    @if mixin-exists(hook-description-list-term) {
+        @include hook-description-list-term;
+    }
+}
+
+.uk-description-list > dt:nth-child(n+2) {
+    margin-top: var(--description-list-term-margin-top);
+}
+
+/*
+ * Description
+ */
+
+.uk-description-list > dd {
+    @if mixin-exists(hook-description-list-description) {
+        @include hook-description-list-description;
+    }
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+/*
+ * Line
+ */
+
+.uk-description-list-divider > dt:nth-child(n+2) {
+    border-top: var(--description-list-divider-term-border-width) solid var(--description-list-divider-term-border);
+    margin-top: var(--description-list-divider-term-margin-top);
+    padding-top: var(--description-list-divider-term-margin-top);
+    @if mixin-exists(hook-description-list-divider-term) {
+        @include hook-description-list-divider-term;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-description-list-misc) {
+    @include hook-description-list-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --description-list-term-color: var(--global-emphasis-color);
+    --description-list-term-margin-top: var(--global-margin);
+    --description-list-term-font-size: var(--global-small-font-size);
+    --description-list-term-font-weight: #{$description-list-term-font-weight};
+    --description-list-term-text-transform: #{$description-list-term-text-transform};
+    --description-list-divider-term-margin-top: var(--global-margin);
+    --description-list-divider-term-border-width: var(--global-border-width);
+    --description-list-divider-term-border: var(--global-border);
+
+    // Inverse
+    --inverse-description-list-term-color: var(--inverse-global-emphasis-color);
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import './index.scss';
+export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>, 'children'> {
+    icon?: boolean;
+    small?: boolean;
+    vertical?: boolean;
+}
+export declare function Divider(props: DividerProps): JSX.Element;

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

@@ -0,0 +1,41 @@
+"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.Divider = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+require("./index.scss");
+function Divider(props) {
+    const { className, icon, small, vertical, ...restProps } = props;
+    return (React.createElement("hr", { className: (0, classnames_1.default)({
+            'uk-divider-icon': icon && !small && !vertical,
+            'uk-divider-small': small && !icon && !vertical,
+            'uk-divider-vertical': vertical && !icon && !small,
+        }, className), ...restProps }));
+}
+exports.Divider = Divider;

package/dist/cjs/components/Divider/index.scss

@@ -0,0 +1,159 @@
+// Name:            Divider
+// Description:     Styles for dividers
+//
+// Component:       `uk-divider-icon`
+//                  `uk-divider-small`
+//                  `uk-divider-vertical`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Divider
+ ========================================================================== */
+
+/*
+ * 1. Reset default `hr`
+ * 2. Set margin if a `div` is used for semantical reason
+ */
+
+[class*='uk-divider'] {
+    /* 1 */
+    border: none;
+
+    /* 2 */
+    margin-bottom: var(--divider-margin-vertical);
+}
+
+/* Add margin if adjacent element */
+* + [class*='uk-divider'] {
+    margin-top: var(--divider-margin-vertical);
+}
+
+
+/* Icon
+ ========================================================================== */
+
+.uk-divider-icon {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    height: var(--divider-icon-height);
+    position: relative;
+    @if mixin-exists(svg-fill) {
+        @include svg-fill($divider-icon-image-path, '#000', $divider-icon-color);
+    }
+    @if mixin-exists(hook-divider-icon) {
+        @include hook-divider-icon;
+    }
+}
+
+.uk-divider-icon::before,
+.uk-divider-icon::after {
+    border-bottom: var(--divider-icon-line-border-width) solid var(--divider-icon-line-border);
+    content: '';
+    max-width: calc(50% - (var(--divider-icon-width) / 2));
+    position: absolute;
+    top: var(--divider-icon-line-top);
+    @if mixin-exists(hook-divider-icon-line) {
+        @include hook-divider-icon-line;
+    }
+}
+
+.uk-divider-icon::before {
+    right: calc(50% + (var(--divider-icon-width) / 2));
+    width: var(--divider-icon-line-width);
+    @if mixin-exists(hook-divider-icon-line-left) {
+        @include hook-divider-icon-line-left;
+    }
+}
+
+.uk-divider-icon::after {
+    left: calc(50% + (var(--divider-icon-width) / 2));
+    width: var(--divider-icon-line-width);
+    @if mixin-exists(hook-divider-icon-line-right) {
+        @include hook-divider-icon-line-right;
+    }
+}
+
+
+/* Small
+ ========================================================================== */
+
+/*
+ * 1. Fix height because of `inline-block`
+ * 2. Using ::after and inline-block to make `text-align` work
+ */
+
+/* 1 */
+.uk-divider-small {
+    line-height: 0;
+}
+
+/* 2 */
+.uk-divider-small::after {
+    border-top: var(--divider-small-border-width) solid var(--divider-small-border);
+    content: '';
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: top;
+    width: var(--divider-small-width);
+    @if mixin-exists(hook-divider-small) {
+        @include hook-divider-small;
+    }
+}
+
+
+/* Vertical
+ ========================================================================== */
+
+.uk-divider-vertical {
+    border-left: var(--divider-vertical-border-width) solid var(--divider-vertical-border);
+    height: var(--divider-vertical-height);
+    margin-left: auto;
+    margin-right: auto;
+    width: 1px;
+    @if mixin-exists(hook-divider-vertical) {
+        @include hook-divider-vertical;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-divider-misc) {
+    @include hook-divider-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --divider-margin-vertical: var(--global-margin);
+    --divider-icon-width: #{$divider-icon-width};
+    --divider-icon-height: #{$divider-icon-height};
+    --divider-icon-color: var(--global-border);
+    --divider-icon-line-top: #{$divider-icon-line-top};
+    --divider-icon-line-width: #{$divider-icon-line-width};
+    --divider-icon-line-border-width: var(--global-border-width);
+    --divider-icon-line-border: var(--global-border);
+    --divider-small-width: #{$divider-small-width};
+    --divider-small-border-width: var(--global-border-width);
+    --divider-small-border: var(--global-border);
+    --divider-vertical-height: #{$divider-vertical-height};
+    --divider-vertical-border-width: var(--global-border-width);
+    --divider-vertical-border: var(--global-border);
+
+    // Inverse
+    --inverse-divider-icon-color: var(--inverse-global-border);
+    --inverse-divider-icon-line-border: var(--inverse-global-border);
+    --inverse-divider-small-border: var(--inverse-global-border);
+    --inverse-divider-vertical-border: var(--inverse-global-border);
+}

package/dist/cjs/components/Dotnav/Dotnav.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface DotnavProps extends React.HTMLAttributes<HTMLUListElement> {
+    vertical?: boolean;
+}
+export declare function Dotnav(props: DotnavProps): JSX.Element;

package/dist/cjs/components/Dotnav/Dotnav.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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dotnav = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+function Dotnav(props) {
+    const { className, vertical, ...restProps } = props;
+    return (React.createElement("ul", { className: (0, classnames_1.default)('uk-dotnav', {
+            'uk-dotnav-vertical': vertical,
+        }, className), ...restProps }));
+}
+exports.Dotnav = Dotnav;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface DotnavItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'children'> {
+    isActive?: boolean;
+}
+export declare function Item(props: DotnavItemProps): JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}