@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,256 @@
+// Name:            Heading
+// Description:     Styles for headings
+//
+// Component:       `uk-heading-primary`
+//                  `uk-heading-hero`
+//                  `uk-heading-divider`
+//                  `uk-heading-bullet`
+//                  `uk-heading-line`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Heading
+ ========================================================================== */
+
+.uk-heading-small {
+    font-size: var(--heading-small-font-size);
+    line-height: var(--heading-small-line-height);
+    @if mixin-exists(hook-heading-small) {
+        @include hook-heading-small;
+    }
+}
+
+.uk-heading-medium {
+    font-size: var(--heading-medium-font-size);
+    line-height: var(--heading-medium-line-height);
+    @if mixin-exists(hook-heading-medium) {
+        @include hook-heading-medium;
+    }
+}
+
+.uk-heading-large {
+    font-size: var(--heading-large-font-size);
+    line-height: var(--heading-large-line-height);
+    @if mixin-exists(hook-heading-large) {
+        @include hook-heading-large;
+    }
+}
+
+.uk-heading-xlarge {
+    font-size: var(--heading-xlarge-font-size);
+    line-height: var(--heading-xlarge-line-height);
+    @if mixin-exists(hook-heading-xlarge) {
+        @include hook-heading-xlarge;
+    }
+}
+
+.uk-heading-2xlarge {
+    font-size: var(--heading-2xlarge-font-size);
+    line-height: var(--heading-2xlarge-line-height);
+    @if mixin-exists(hook-heading-2xlarge) {
+        @include hook-heading-2xlarge;
+    }
+}
+
+/* Tablet Landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-heading-small {
+        font-size: var(--heading-small-font-size-m);
+    }
+
+    .uk-heading-medium {
+        font-size: var(--heading-medium-font-size-m);
+    }
+
+    .uk-heading-large {
+        font-size: var(--heading-large-font-size-m);
+    }
+
+    .uk-heading-xlarge {
+        font-size: var(--heading-xlarge-font-size-m);
+    }
+
+    .uk-heading-2xlarge {
+        font-size: var(--heading-2xlarge-font-size-m);
+    }
+}
+
+/* Laptop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-heading-medium {
+        font-size: var(--heading-medium-font-size-l);
+    }
+
+    .uk-heading-large {
+        font-size: var(--heading-large-font-size-l);
+    }
+
+    .uk-heading-xlarge {
+        font-size: var(--heading-xlarge-font-size-l);
+    }
+
+    .uk-heading-2xlarge {
+        font-size: var(--heading-2xlarge-font-size-l);
+    }
+}
+
+
+/* Divider
+ ========================================================================== */
+
+.uk-heading-divider {
+    border-bottom: var(--heading-divider-border-width) solid var(--heading-divider-border);
+    padding-bottom: var(--heading-divider-padding-bottom);
+    @if mixin-exists(hook-heading-divider) {
+        @include hook-heading-divider;
+    }
+}
+
+
+/* Bullet
+ ========================================================================== */
+
+.uk-heading-bullet {
+    position: relative;
+}
+
+/*
+ * 1. Using `inline-block` to make it work with text alignment
+ * 2. Center vertically
+ * 3. Style
+ */
+
+.uk-heading-bullet::before {
+    border-left: var(--heading-bullet-border-width) solid var(--heading-bullet-border);
+    content: '';
+
+    /* 1 */
+    display: inline-block;
+
+    /* 3 */
+    height: var(--heading-bullet-height);
+    margin-right: var(--heading-bullet-margin-right);
+
+    /* 2 */
+    position: relative;
+    top: var(--heading-bullet-top);
+    vertical-align: middle;
+    @if mixin-exists(hook-heading-bullet) {
+        @include hook-heading-bullet;
+    }
+}
+
+
+/* Line
+ ========================================================================== */
+
+/*
+ * Clip the child element
+ */
+
+.uk-heading-line {
+    overflow: hidden;
+}
+
+/*
+ * Extra markup is needed to make it work with text align
+ */
+
+.uk-heading-line > * {
+    display: inline-block;
+    position: relative;
+}
+
+/*
+ * 1. Center vertically
+ * 2. Make the element as large as possible. It's clipped by the container.
+ * 3. Style
+ */
+
+.uk-heading-line > ::before,
+.uk-heading-line > ::after {
+    /* 3 */
+    border-bottom: var(--heading-line-border-width) solid var(--heading-line-border);
+    content: '';
+
+    /* 1 */
+    position: absolute;
+    top: calc(var(--heading-line-top) - (var(--heading-line-height) / 2));
+
+    /* 2 */
+    width: var(--heading-line-width);
+    @if mixin-exists(hook-heading-line) {
+        @include hook-heading-line;
+    }
+}
+
+.uk-heading-line > ::before {
+    margin-right: var(--heading-line-margin-horizontal);
+    right: 100%;
+}
+
+.uk-heading-line > ::after {
+    left: 100%;
+    margin-left: var(--heading-line-margin-horizontal);
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-heading-misc) {
+    @include hook-heading-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --heading-medium-font-size-l: #{$heading-medium-font-size-l};
+    --heading-large-font-size-l: #{$heading-large-font-size-l};
+    --heading-xlarge-font-size-l: #{$heading-xlarge-font-size-l};
+    --heading-2xlarge-font-size-l: #{$heading-2xlarge-font-size-l};
+    --heading-small-font-size-m: #{$heading-small-font-size-m};
+    --heading-medium-font-size-m: #{$heading-medium-font-size-m};
+    --heading-large-font-size-m: var(--heading-medium-font-size-l);
+    --heading-xlarge-font-size-m: var(--heading-large-font-size-l);
+    --heading-2xlarge-font-size-m: var(--heading-xlarge-font-size-l);
+    --heading-small-font-size: #{$heading-small-font-size};
+    --heading-medium-font-size: #{$heading-medium-font-size};
+    --heading-large-font-size: #{$heading-large-font-size};
+    --heading-xlarge-font-size: var(--heading-large-font-size-m);
+    --heading-2xlarge-font-size: var(--heading-xlarge-font-size-m);
+    --heading-small-line-height: #{$heading-small-line-height};
+    --heading-medium-line-height: #{$heading-medium-line-height};
+    --heading-large-line-height: #{$heading-large-line-height};
+    --heading-xlarge-line-height: #{$heading-xlarge-line-height};
+    --heading-2xlarge-line-height: #{$heading-2xlarge-line-height};
+    --heading-divider-padding-bottom: #{$heading-divider-padding-bottom};
+    --heading-divider-border-width: #{$heading-divider-border-width};
+    --heading-divider-border: var(--global-border);
+    --heading-bullet-top: #{$heading-bullet-top};
+    --heading-bullet-height: #{$heading-bullet-height};
+    --heading-bullet-margin-right: #{$heading-bullet-margin-right};
+    --heading-bullet-border-width: #{$heading-bullet-border-width};
+    --heading-bullet-border: var(--global-border);
+    --heading-line-top: #{$heading-line-top};
+    --heading-line-height: var(--heading-line-border-width);
+    --heading-line-width: #{$heading-line-width};
+    --heading-line-border-width: #{$heading-line-border-width};
+    --heading-line-border: var(--global-border);
+    --heading-line-margin-horizontal: #{$heading-line-margin-horizontal};
+
+    // Inverse
+    --inverse-heading-divider-border: var(--inverse-global-border);
+    --inverse-heading-bullet-border: var(--inverse-global-border);
+    --inverse-heading-line-border: var(--inverse-global-border);
+}

package/dist/cjs/components/Icon/Button.d.ts

@@ -0,0 +1,5 @@
+import type { IconProps } from './Icon';
+export declare function Button(props: IconProps): JSX.Element;
+export declare namespace Button {
+    var displayName: string;
+}

package/dist/cjs/components/Icon/Button.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.Button = void 0;
+const React = __importStar(require("react"));
+const Icon_1 = require("./Icon");
+function Button(props) {
+    return (React.createElement(Icon_1.Icon, { component: "button", role: "button", type: "button", ...props }));
+}
+exports.Button = Button;
+if (process.env.NODE_ENV !== 'production') {
+    Button.displayName = 'Icon.Button';
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type IconOwnProps = {
+    icon: string;
+    material?: boolean;
+    mode?: 'button' | 'image' | 'link';
+    prefixCls?: string;
+    round?: boolean;
+};
+export declare type IconProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, IconOwnProps>;
+declare const defaultElement = "span";
+export declare function Icon<E extends React.ElementType = typeof defaultElement>(props: IconProps<E>): JSX.Element | null;
+export {};

package/dist/cjs/components/Icon/Icon.js

@@ -0,0 +1,48 @@
+"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.Icon = 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 = 'span';
+function Icon(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { children, className, icon, material = true, mode, prefixCls = `${config.prefixCls}-icon`, round, type, ...restProps } = props;
+    if (!icon) {
+        return null;
+    }
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(prefixCls, {
+            [`${prefixCls}-button`]: type === 'button',
+            [`${prefixCls}-material`]: material,
+            [`${prefixCls}-round`]: material && round,
+            [`${prefixCls}-${mode}`]: mode !== undefined,
+        }, className), component: defaultElement, ...restProps }, material ? React.createElement("i", null, icon) : children));
+}
+exports.Icon = Icon;

package/dist/cjs/components/Icon/Link.d.ts

@@ -0,0 +1,5 @@
+import type { IconProps } from './Icon';
+export declare function Link(props: IconProps): JSX.Element;
+export declare namespace Link {
+    var displayName: string;
+}

package/dist/cjs/components/Icon/Link.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.Link = void 0;
+const React = __importStar(require("react"));
+const Icon_1 = require("./Icon");
+function Link(props) {
+    return (React.createElement(Icon_1.Icon, { component: "a", ...props, role: "button", type: "link" }));
+}
+exports.Link = Link;
+if (process.env.NODE_ENV !== 'production') {
+    Link.displayName = 'Icon.Link';
+}

package/dist/cjs/components/Icon/default-svg-props.d.ts

@@ -0,0 +1,5 @@
+export declare const defaultProps: {
+    fill: string;
+    viewBox: string;
+    xmlns: string;
+};

package/dist/cjs/components/Icon/default-svg-props.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
+exports.defaultProps = {
+    fill: 'none',
+    viewBox: '0 0 20 20',
+    xmlns: 'http://www.w3.org/2000/svg',
+};

package/dist/cjs/components/Icon/get-size.d.ts

@@ -0,0 +1,4 @@
+export declare function getSize(height: number, width: number, ratio?: number): {
+    height: number;
+    width: number;
+};

package/dist/cjs/components/Icon/get-size.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSize = void 0;
+function getSize(height, width, ratio = 1) {
+    return {
+        height: height * ratio,
+        width: width * ratio,
+    };
+}
+exports.getSize = getSize;

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

@@ -0,0 +1,13 @@
+import { Button } from './Button';
+import { Link } from './Link';
+import type { PolymorphicComponent } from '../Component';
+import type { IconOwnProps, IconProps } from './Icon';
+import './index.scss';
+export * from './default-svg-props';
+export * from './get-size';
+export type { IconProps, IconOwnProps };
+export declare type CompoundedIcon = PolymorphicComponent<IconOwnProps> & {
+    Button: typeof Button;
+    Link: typeof Link;
+};
+export declare const Icon: CompoundedIcon;

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

@@ -0,0 +1,26 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const Button_1 = require("./Button");
+const Icon_1 = require("./Icon");
+const Link_1 = require("./Link");
+require("./index.scss");
+__exportStar(require("./default-svg-props"), exports);
+__exportStar(require("./get-size"), exports);
+exports.Icon = Icon_1.Icon;
+exports.Icon.Button = Button_1.Button;
+exports.Icon.Link = Link_1.Link;