@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,552 @@
+// Name:            Button
+// Description:     Styles for buttons
+//
+// Component:       `uk-button`
+//
+// Sub-objects:     `uk-button-group`
+//
+// Modifiers:       `uk-button-default`
+//                  `uk-button-primary`
+//                  `uk-button-secondary`
+//                  `uk-button-tertiary`
+//                  `uk-button-danger`
+//                  `uk-button-text`
+//                  `uk-button-link`
+//                  `uk-button-xsmall`
+//                  `uk-button-small`
+//                  `uk-button-medium`
+//                  `uk-button-large`
+//                  `uk-button-xlarge`
+//                  `uk-button-circle`
+//                  `uk-button-round`
+//
+// TODO: Add `ghost` and `dashed` modifiers
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Button
+ ========================================================================== */
+
+/*
+ * 1. Remove margins in Chrome, Safari and Opera.
+ * 2. Remove borders for `button`.
+ * 3. Address `overflow` set to `hidden` in IE.
+ * 4. Correct `font` properties and `color` not being inherited for `button`.
+ * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 6. Remove default style for `input type="submit"`in iOS.
+ * 7. Style
+ * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
+ *    Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
+ * 9. Align text if button has a width
+ * 10. Required for `a`.
+ */
+
+.uk-button {
+    appearance: none; /* 6 */
+    border: none; /* 2 */
+    border-radius: 0;
+    box-sizing: border-box;
+    color: inherit;
+    display: inline-block; /* 7 */
+    font: inherit; /* 4 */
+    font-size: var(--button-font-size); /* 7 */
+    line-height: var(--button-line-height); /* 8 */
+    margin: 0; /* 1 */
+    overflow: visible; /* 3 */
+    padding: 0 var(--button-padding-horizontal); /* 7 */
+    text-align: center; /* 9 */
+    text-decoration: none; /* 10 */
+    text-transform: none; /* 5 */
+    vertical-align: middle; /* 7 */
+    @if mixin-exists(hook-button) {
+        @include hook-button;
+    }
+}
+
+/*
+ * Remove the inner border and padding in Firefox.
+ */
+
+.uk-button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+.uk-button:not(:disabled) {
+    cursor: pointer;
+}
+
+/* Hover */
+.uk-button:hover {
+    /* 9 */
+    text-decoration: none;
+    @if mixin-exists(hook-button-hover) {
+        @include hook-button-hover;
+    }
+}
+
+/* Focus */
+.uk-button:focus {
+    outline: none;
+    @if mixin-exists(hook-button-focus) {
+        @include hook-button-focus;
+    }
+}
+
+/* OnClick + Active */
+.uk-button:active,
+.uk-button.uk-active {
+    @if mixin-exists(hook-button-active) {
+        @include hook-button-active;
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-button-default {
+    background-color: var(--button-default-background);
+    color: var(--button-default-color);
+    @if mixin-exists(hook-button-default) {
+        @include hook-button-default;
+    }
+}
+
+/* Hover + Focus */
+.uk-button-default:hover,
+.uk-button-default:focus {
+    background-color: var(--button-default-hover-background);
+    color: var(--button-default-hover-color);
+    @if mixin-exists(hook-button-default-hover) {
+        @include hook-button-default-hover;
+    }
+}
+
+/* OnClick + Active */
+.uk-button-default:active,
+.uk-button-default.uk-active {
+    background-color: var(--button-default-active-background);
+    color: var(--button-default-active-color);
+    @if mixin-exists(hook-button-default-active) {
+        @include hook-button-default-active;
+    }
+}
+
+/*
+ * Primary
+ */
+
+.uk-button-primary {
+    background-color: var(--button-primary-background);
+    color: var(--button-primary-color);
+    @if mixin-exists(hook-button-primary) {
+        @include hook-button-primary;
+    }
+}
+
+/* Hover + Focus */
+.uk-button-primary:hover,
+.uk-button-primary:focus {
+    background-color: var(--button-primary-hover-background);
+    color: var(--button-primary-hover-color);
+    @if mixin-exists(hook-button-primary-hover) {
+        @include hook-button-primary-hover;
+    }
+}
+
+/* OnClick + Active */
+.uk-button-primary:active,
+.uk-button-primary.uk-active {
+    background-color: var(--button-primary-active-background);
+    color: var(--button-primary-active-color);
+    @if mixin-exists(hook-button-primary-active) {
+        @include hook-button-primary-active;
+    }
+}
+
+/*
+ * Secondary
+ */
+
+.uk-button-secondary {
+    background-color: var(--button-secondary-background);
+    color: var(--button-secondary-color);
+    @if mixin-exists(hook-button-secondary) {
+        @include hook-button-secondary;
+    }
+}
+
+/* Hover + Focus */
+.uk-button-secondary:hover,
+.uk-button-secondary:focus {
+    background-color: var(--button-secondary-hover-background);
+    color: var(--button-secondary-hover-color);
+    @if mixin-exists(hook-button-secondary-hover) {
+        @include hook-button-secondary-hover;
+    }
+}
+
+/* OnClick + Active */
+.uk-button-secondary:active,
+.uk-button-secondary.uk-active {
+    background-color: var(--button-secondary-active-background);
+    color: var(--button-secondary-active-color);
+    @if mixin-exists(hook-button-secondary-active) {
+        @include hook-button-secondary-active;
+    }
+}
+
+/*
+ * Tertiary
+ */
+
+.uk-button-tertiary {
+    background-color: var(--button-tertiary-background);
+    color: var(--button-tertiary-color);
+    @if mixin-exists(hook-button-tertiary) {
+        @include hook-button-tertiary;
+    }
+}
+
+/* Hover + Focus */
+.uk-button-tertiary:hover,
+.uk-button-tertiary:focus {
+    background-color: var(--button-tertiary-hover-background);
+    color: var(--button-tertiary-hover-color);
+    @if mixin-exists(hook-button-tertiary-hover) {
+        @include hook-button-tertiary-hover;
+    }
+}
+
+/* OnClick + Active */
+.uk-button-tertiary:active,
+.uk-button-tertiary.uk-active {
+    background-color: var(--button-tertiary-active-background);
+    color: var(--button-tertiary-active-color);
+    @if mixin-exists(hook-button-tertiary-active) {
+        @include hook-button-tertiary-active;
+    }
+}
+
+/*
+ * Danger
+ */
+
+.uk-button-danger {
+    background-color: var(--button-danger-background);
+    color: var(--button-danger-color);
+    @if mixin-exists(hook-button-danger) {
+        @include hook-button-danger;
+    }
+}
+
+/* Hover + Focus */
+.uk-button-danger:hover,
+.uk-button-danger:focus {
+    background-color: var(--button-danger-hover-background);
+    color: var(--button-danger-hover-color);
+    @if mixin-exists(hook-button-danger-hover) {
+        @include hook-button-danger-hover;
+    }
+}
+
+/* OnClick + Active */
+.uk-button-danger:active,
+.uk-button-danger.uk-active {
+    background-color: var(--button-danger-active-background);
+    color: var(--button-danger-active-color);
+    @if mixin-exists(hook-button-danger-active) {
+        @include hook-button-danger-active;
+    }
+}
+
+/*
+ * Disabled
+ * The same for all style modifiers
+ */
+
+.uk-button-default:disabled,
+.uk-button-primary:disabled,
+.uk-button-secondary:disabled,
+.uk-button-tertiary:disabled,
+.uk-button-success:disabled,
+.uk-button-warning:disabled,
+.uk-button-danger:disabled {
+    background-color: var(--button-disabled-background);
+    color: var(--button-disabled-color);
+    @if mixin-exists(hook-button-disabled) {
+        @include hook-button-disabled;
+    }
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+.uk-button-xsmall {
+    font-size: var(--button-xsmall-font-size);
+    line-height: var(--button-xsmall-line-height);
+    padding: 0 var(--button-xsmall-padding-horizontal);
+    @if mixin-exists(hook-button-xsmall) {
+        @include hook-button-xsmall;
+    }
+}
+
+.uk-button-small {
+    font-size: var(--button-small-font-size);
+    line-height: var(--button-small-line-height);
+    padding: 0 var(--button-small-padding-horizontal);
+    @if mixin-exists(hook-button-small) {
+        @include hook-button-small;
+    }
+}
+
+.uk-button-medium {
+    font-size: var(--button-medium-font-size);
+    line-height: var(--button-medium-line-height);
+    padding: 0 var(--button-medium-padding-horizontal);
+    @if mixin-exists(hook-button-medium) {
+        @include hook-button-medium;
+    }
+}
+
+.uk-button-large {
+    font-size: var(--button-large-font-size);
+    line-height: var(--button-large-line-height);
+    padding: 0 var(--button-large-padding-horizontal);
+    @if mixin-exists(hook-button-large) {
+        @include hook-button-large;
+    }
+}
+
+.uk-button-xlarge {
+    font-size: var(--button-xlarge-font-size);
+    line-height: var(--button-xlarge-line-height);
+    padding: 0 var(--button-xlarge-padding-horizontal);
+    @if mixin-exists(hook-button-xlarge) {
+        @include hook-button-xlarge;
+    }
+}
+
+
+/* Text modifiers
+ ========================================================================== */
+
+/*
+ * Text
+ * 1. Reset
+ * 2. Style
+ */
+
+.uk-button-text {
+    background: none; /* 1 */
+    color: var(--button-text-color); /* 2 */
+    line-height: var(--button-text-line-height); /* 1 */
+    padding: 0; /* 1 */
+    @if mixin-exists(hook-button-text) {
+        @include hook-button-text;
+    }
+}
+
+/* Hover + Focus */
+.uk-button-text:hover,
+.uk-button-text:focus {
+    color: var(--button-text-hover-color);
+    @if mixin-exists(hook-button-text-hover) {
+        @include hook-button-text-hover;
+    }
+}
+
+/* Disabled */
+.uk-button-text:disabled {
+    color: var(--button-text-disabled-color);
+    @if mixin-exists(hook-button-text-disabled) {
+        @include hook-button-text-disabled;
+    }
+}
+
+/*
+ * Link
+ * 1. Reset
+ * 2. Style
+ */
+
+.uk-button-link {
+    background: none; /* 1 */
+    color: var(--button-link-color); /* 2 */
+    line-height: var(--button-link-line-height); /* 1 */
+    padding: 0; /* 1 */
+    @if mixin-exists(hook-button-link) {
+        @include hook-button-link;
+    }
+}
+
+/* Hover + Focus */
+.uk-button-link:hover,
+.uk-button-link:focus {
+    color: var(--button-link-hover-color);
+    text-decoration: var(--button-link-hover-text-decoration);
+}
+
+/* Disabled */
+.uk-button-link:disabled {
+    color: var(--button-link-disabled-color);
+    text-decoration: none;
+}
+
+
+/* Shape modifiers
+ ========================================================================== */
+
+.uk-button-circle {
+    border-radius: var(--button-circle-border-radius);
+}
+
+.uk-button-round {
+    border-radius: var(--button-round-border-radius);
+}
+
+
+/* Group
+ ========================================================================== */
+
+/*
+ * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
+ * 2. Behave like button
+ * 3. Create position context
+ */
+
+.uk-button-group {
+    display: inline-flex; /* 1 */
+    position: relative; /* 3 */
+    vertical-align: middle; /* 2 */
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-button-misc) {
+    @include hook-button-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --button-line-height: var(--global-control-height);
+    --button-xsmall-line-height: var(--global-control-xsmall-height);
+    --button-small-line-height: var(--global-control-small-height);
+    --button-medium-line-height: var(--global-control-medium-height);
+    --button-large-line-height: var(--global-control-large-height);
+    --button-xlarge-line-height: var(--global-control-xlarge-height);
+    --button-font-size: var(--global-font-size);
+    --button-xsmall-font-size: var(--global-2xsmall-font-size);
+    --button-small-font-size: var(--global-small-font-size);
+    --button-medium-font-size: var(--global-font-size);
+    --button-large-font-size: var(--global-medium-font-size);
+    --button-xlarge-font-size: var(--global-large-font-size);
+    --button-padding-horizontal: var(--global-gutter);
+    --button-xsmall-padding-horizontal: var(--global-xsmall-gutter);
+    --button-small-padding-horizontal: var(--global-small-gutter);
+    --button-medium-padding-horizontal: var(--global-gutter);
+    --button-large-padding-horizontal: var(--global-medium-gutter);
+    --button-xlarge-padding-horizontal: var(--global-large-gutter);
+    --button-default-background: var(--global-muted-background);
+    --button-default-color: var(--global-emphasis-color);
+    --button-default-hover-background: #{$button-default-hover-background};
+    --button-default-hover-color: var(--global-emphasis-color);
+    --button-default-active-background: #{$button-default-active-background};
+    --button-default-active-color: var(--global-emphasis-color);
+    --button-primary-background: var(--global-primary-background);
+    --button-primary-color: var(--global-inverse-color);
+    --button-primary-hover-background: #{$button-primary-hover-background};
+    --button-primary-hover-color: var(--global-inverse-color);
+    --button-primary-active-background: #{$button-primary-active-background};
+    --button-primary-active-color: var(--global-inverse-color);
+    --button-secondary-background: var(--global-secondary-background);
+    --button-secondary-color: var(--global-inverse-color);
+    --button-secondary-hover-background: #{$button-secondary-hover-background};
+    --button-secondary-hover-color: var(--global-inverse-color);
+    --button-secondary-active-background: #{$button-secondary-active-background};
+    --button-secondary-active-color: var(--global-inverse-color);
+    --button-tertiary-background: var(--global-tertiary-background);
+    --button-tertiary-color: var(--global-inverse-color);
+    --button-tertiary-hover-background: #{$button-tertiary-hover-background};
+    --button-tertiary-hover-color: var(--global-inverse-color);
+    --button-tertiary-active-background: #{$button-tertiary-active-background};
+    --button-tertiary-active-color: var(--global-inverse-color);
+    --button-danger-background: var(--global-danger-background);
+    --button-danger-color: var(--global-inverse-color);
+    --button-danger-hover-background: #{$button-danger-hover-background};
+    --button-danger-hover-color: var(--global-inverse-color);
+    --button-danger-active-background: #{$button-danger-active-background};
+    --button-danger-active-color: var(--global-inverse-color);
+    --button-circle-border-radius: #{$button-circle-border-radius};
+    --button-round-border-radius: #{$button-round-border-radius};
+    --button-disabled-background: var(--global-muted-background);
+    --button-disabled-color: var(--global-muted-color);
+    --button-text-line-height: var(--global-line-height);
+    --button-text-color: var(--global-muted-color);
+    --button-text-hover-color: var(--global-color);
+    --button-text-disabled-color: var(--global-muted-color);
+    --button-link-line-height: var(--global-line-height);
+    --button-link-color: var(--global-link-color);
+    --button-link-hover-color: var(--global-link-hover-color);
+    --button-link-hover-text-decoration: #{$button-link-hover-text-decoration};
+    --button-link-disabled-color: var(--global-muted-color);
+
+    // Inverse
+    --inverse-button-color: var(--inverse-global-inverse-color);
+    --inverse-button-default-background: var(--inverse-global-primary-background);
+    --inverse-button-default-color: var(--inverse-global-inverse-color);
+    --inverse-button-default-hover-background: #{$inverse-button-default-hover-background};
+    --inverse-button-default-hover-color: var(--inverse-global-inverse-color);
+    --inverse-button-default-active-background: #{$inverse-button-default-active-background};
+    --inverse-button-default-active-color: var(--inverse-global-inverse-color);
+    --inverse-button-primary-background: var(--inverse-global-primary-background);
+    --inverse-button-primary-color: var(--inverse-global-inverse-color);
+    --inverse-button-primary-hover-background: #{$inverse-button-primary-hover-background};
+    --inverse-button-primary-hover-color: var(--inverse-global-inverse-color);
+    --inverse-button-primary-active-background: #{$inverse-button-primary-active-background};
+    --inverse-button-primary-active-color: var(--inverse-global-inverse-color);
+    --inverse-button-secondary-background: var(--inverse-global-primary-background);
+    --inverse-button-secondary-color: var(--inverse-global-inverse-color);
+    --inverse-button-secondary-hover-background: #{$inverse-button-secondary-hover-background};
+    --inverse-button-secondary-hover-color: var(--inverse-global-inverse-color);
+    --inverse-button-secondary-active-background: #{$inverse-button-secondary-active-background};
+    --inverse-button-secondary-active-color: var(--inverse-global-inverse-color);
+    --inverse-button-tertiary-background: var(--inverse-global-primary-background);
+    --inverse-button-tertiary-color: var(--inverse-global-inverse-color);
+    --inverse-button-tertiary-hover-background: #{$inverse-button-tertiary-hover-background};
+    --inverse-button-tertiary-hover-color: var(--inverse-global-inverse-color);
+    --inverse-button-tertiary-active-background: #{$inverse-button-tertiary-active-background};
+    --inverse-button-tertiary-active-color: var(--inverse-global-inverse-color);
+    --inverse-button-danger-background: var(--button-danger-background);
+    --inverse-button-danger-color: var(--button-danger-color);
+    --inverse-button-danger-hover-background: var(--button-danger-hover-background);
+    --inverse-button-danger-hover-color: var(--button-danger-hover-color);
+    --inverse-button-danger-active-background: var(--button-danger-active-background);
+    --inverse-button-danger-active-color: var(--button-danger-active-color);
+    --inverse-button-text-color: var(--inverse-global-emphasis-color);
+    --inverse-button-text-hover-color: var(--inverse-global-muted-color);
+    --inverse-button-text-disabled-color: var(--inverse-global-muted-color);
+    --inverse-button-link-color: var(--inverse-global-emphasis-color);
+    --inverse-button-link-hover-color: var(--inverse-global-muted-color);
+}

package/dist/cjs/components/Card/Badge.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface CardBadgeProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
+}
+export declare function Badge(props: CardBadgeProps): JSX.Element;
+export declare namespace Badge {
+    var displayName: string;
+}

package/dist/cjs/components/Card/Badge.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.Badge = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+const Label_1 = require("../Label");
+function Badge(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = `${config.prefixCls}-card-badge`, ...restProps } = props;
+    return (React.createElement(Label_1.Label, { className: (0, classnames_1.default)(prefixCls, className), ...restProps }));
+}
+exports.Badge = Badge;
+if (process.env.NODE_ENV !== 'production') {
+    Badge.displayName = 'Card.Badge';
+}

package/dist/cjs/components/Card/Body.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface CardBodyProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
+}
+export declare function Body(props: CardBodyProps): JSX.Element;
+export declare namespace Body {
+    var displayName: string;
+}

package/dist/cjs/components/Card/Body.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.Body = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+function Body(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = `${config.prefixCls}-card-body`, ...restProps } = props;
+    return (React.createElement("div", { className: (0, classnames_1.default)(prefixCls, className), ...restProps }));
+}
+exports.Body = Body;
+if (process.env.NODE_ENV !== 'production') {
+    Body.displayName = 'Card.Body';
+}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import type { ColorMode } from '../ConfrigProvider';
+export interface CardOwnProps extends React.HTMLAttributes<HTMLElement> {
+    asBody?: boolean;
+    color?: 'default' | 'primary' | 'secondary' | 'tertiary';
+    colorMode?: ColorMode;
+    hoverable?: boolean;
+    prefixCls?: string;
+    size?: 'small' | 'large';
+}
+export declare type CardProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, CardOwnProps>;
+declare const defaultElement = "div";
+export declare function Card<E extends React.ElementType = typeof defaultElement>(props: CardProps<E>): JSX.Element;
+export {};