@broxus/react-uikit 0.1.0

package/dist/cjs/components/Control/TextArea/index.js

@@ -0,0 +1,144 @@
+"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.TextArea = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const rc_textarea_1 = __importDefault(require("rc-textarea"));
+const omit_1 = __importDefault(require("rc-util/lib/omit"));
+const Input_1 = require("../Input");
+require("./index.scss");
+function fixEmojiLength(value, maxLength) {
+    return [...(value || '')].slice(0, maxLength).join('');
+}
+exports.TextArea = React.forwardRef((props, ref) => {
+    const { dir, disabled, maxLength, readOnly, state, className, showCount, onPressEnter, ...restProps } = props;
+    const inputRef = React.useRef(null);
+    const hasMaxLength = Number(maxLength) > 0;
+    const [compositing, setCompositing] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(restProps.value ?? restProps.defaultValue);
+    React.useImperativeHandle(ref, () => ({
+        blur() {
+            inputRef.current?.blur();
+        },
+        focus() {
+            inputRef.current?.focus();
+        },
+        getInputRef() {
+            return inputRef;
+        },
+    }));
+    const setValue = (value, callback) => {
+        if (restProps.value === undefined) {
+            setInternalValue(value);
+            callback?.();
+        }
+    };
+    const onChange = event => {
+        let { value } = event.target;
+        if (!compositing && hasMaxLength) {
+            value = fixEmojiLength(value, maxLength ?? 0);
+        }
+        setValue(value);
+        restProps.onChange?.(event);
+    };
+    const onCompositionStart = event => {
+        setCompositing(true);
+        restProps.onCompositionStart?.(event);
+    };
+    const onCompositionEnd = event => {
+        setCompositing(false);
+        let { value } = event.currentTarget;
+        if (hasMaxLength) {
+            value = fixEmojiLength(value, maxLength ?? 0);
+        }
+        // Patch composition onChange when value changed
+        if (value !== internalValue) {
+            setValue(value);
+            onChange(event);
+        }
+        restProps.onCompositionEnd?.(event);
+    };
+    const onBlur = event => {
+        setFocused(false);
+        restProps.onBlur?.(event);
+    };
+    const onFocus = event => {
+        setFocused(true);
+        restProps.onFocus?.(event);
+    };
+    const onKeyDown = event => {
+        if (onPressEnter && event.keyCode === 13) {
+            onPressEnter(event);
+        }
+        restProps.onKeyDown?.(event);
+    };
+    const wrapperClasses = React.useMemo(() => (0, classnames_1.default)([
+        'uk-control',
+        'uk-control-textarea',
+    ], {
+        [`uk-control-${state}`]: state,
+        'uk-control-rtl': dir === 'rtl',
+        'uk-control-textarea-show-count': showCount !== undefined,
+        'uk-disabled': disabled,
+        'uk-focused': focused,
+        'uk-readonly': readOnly,
+    }, className), [className, dir, disabled, focused, readOnly, state]);
+    const inputProps = React.useMemo(() => ({
+        ...(0, omit_1.default)(restProps, ['allowClear', 'size']),
+        prefixCls: 'uk-textarea',
+        // eslint-disable-next-line sort-keys
+        onBlur,
+        onChange,
+        onCompositionEnd,
+        onCompositionStart,
+        onFocus,
+        onKeyDown,
+    }), []);
+    let value = (0, Input_1.fixControlledValue)(internalValue);
+    if (!compositing
+        && hasMaxLength
+        && (restProps.value === null || restProps.value === undefined)) {
+        value = fixEmojiLength(value, maxLength ?? 0);
+    }
+    let dataCount;
+    if (showCount) {
+        const valueLength = [...value].length;
+        if (typeof showCount === 'object') {
+            dataCount = showCount.formatter({ count: valueLength, maxLength });
+        }
+        else {
+            dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
+        }
+    }
+    const dataCountAttribute = dataCount ? { 'data-count': dataCount } : {};
+    return (React.createElement("label", { className: wrapperClasses, htmlFor: inputProps.id, ...dataCountAttribute },
+        React.createElement("span", { className: "uk-control-input" },
+            React.createElement(rc_textarea_1.default, { ...inputProps, value: value, ref: inputRef }))));
+});

package/dist/cjs/components/Control/TextArea/index.scss

@@ -0,0 +1,83 @@
+// Name:            Textarea
+// Description:     Component to create Textarea element
+//
+// Component:       `uk-control-textarea`
+//
+// Modifier:        `uk-control-small`
+//                  `uk-control-medium`
+//                  `uk-control-large`
+//                  `uk-control-success`
+//                  `uk-control-warning`
+//                  `uk-control-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Textarea
+ ========================================================================== */
+
+.uk-control-textarea {
+    height: auto;
+    max-width: 100%;
+    padding: 0;
+}
+
+.uk-control-textarea-show-count::after {
+    background-color: var(--textarea-counter-background);
+    border-radius: var(--textarea-counter-border-radius);
+    bottom: 5px;
+    color: var(--textarea-counter-color);
+    content: attr(data-count);
+    font-size: var(--textarea-counter-font-size);
+    padding: 0 2px 2px;
+    pointer-events: none;
+    position: absolute;
+    right: 5px;
+    white-space: nowrap;
+}
+
+
+/* Textarea element
+ ========================================================================== */
+
+// Reset height for `textarea`s
+.uk-control-textarea .uk-textarea {
+    background-color: transparent;
+    box-sizing: border-box;
+    color: var(--textarea-color);
+    height: auto;
+    line-height: normal;
+    max-width: 100%; // prevent textarea resize from coming out of its container
+    min-height: var(--control-height);
+    padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal);
+    resize: none;
+    vertical-align: bottom;
+}
+
+/* Hover + Focus states */
+.uk-control-textarea:hover .uk-textarea,
+.uk-control-textarea:focus-within .uk-textarea {
+    background-color: transparent;
+    color: var(--textarea-color);
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --textarea-color: var(--control-color);
+    --textarea-padding-vertical: calc(var(--control-padding-horizontal) / 2);
+    --textarea-padding-horizontal: var(--control-padding-horizontal);
+    --textarea-counter-background: var(--global-default-background);
+    --textarea-counter-border-radius: var(--control-border-radius);
+    --textarea-counter-color: var(--global-muted-color);
+    --textarea-counter-font-size: #{$textarea-counter-font-size};
+}

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

@@ -0,0 +1,7 @@
+import './index.scss';
+export * from './Checkbox';
+export * from './Input';
+export * from './Radio';
+export * from './Select';
+export * from './TextArea';
+export * from './types';

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

@@ -0,0 +1,23 @@
+"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 });
+require("./index.scss");
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./Input"), exports);
+__exportStar(require("./Radio"), exports);
+__exportStar(require("./Select"), exports);
+__exportStar(require("./TextArea"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,361 @@
+// Name:            Control
+// Description:     Component to create form elements
+//
+// Component:       `uk-control`
+//
+// Modifier:        `uk-control-small`
+//                  `uk-control-medium`
+//                  `uk-control-large`
+//                  `uk-control-success`
+//                  `uk-control-warning`
+//                  `uk-control-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Control
+ ========================================================================== */
+
+.uk-control {
+    align-items: center;
+    background-color: var(--control-background);
+    border: var(--control-border-width) var(--control-border-style) var(--control-border);
+    border-radius: var(--control-border-radius);
+    box-sizing: border-box;
+    color: var(--control-color);
+    cursor: text;
+    display: flex;
+    font-size: inherit;
+    min-height: var(--control-height);
+    padding-left: var(--control-padding-horizontal);
+    padding-right: var(--control-padding-horizontal);
+    position: relative;
+    transition: all var(--transition-duration);
+    @if mixin-exists(hook-control) {
+        @include hook-control;
+    }
+}
+
+/* Hover state  (unused for disabled state) */
+.uk-control:hover {
+    background-color: var(--control-hover-background);
+    border-color: var(--control-hover-border);
+    color: var(--control-hover-color);
+    @if mixin-exists(hook-control-hover) {
+        @include hook-control-hover;
+    }
+}
+
+/* Focus state  (unused for disabled state) */
+.uk-control:focus,
+.uk-control:focus-within {
+    background-color: var(--control-focus-background);
+    border-color: var(--control-focus-border);
+    color: var(--control-focus-color);
+    outline: none;
+    @if mixin-exists(hook-control-focus) {
+        @include hook-control-focus;
+    }
+}
+
+/* Disabled state */
+.uk-control.uk-disabled {
+    background-color: var(--control-disabled-background);
+    border-color: var(--control-disabled-border);
+    color: var(--control-disabled-color);
+    cursor: not-allowed;
+    @if mixin-exists(hook-control-disabled) {
+        @include hook-control-disabled;
+    }
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-control-small {
+    font-size: var(--control-small-font-size);
+    min-height: var(--control-small-height);
+    padding: 0 var(--control-small-padding-horizontal);
+    @if mixin-exists(hook-control-small) {
+        @include hook-control-small;
+    }
+}
+
+/*
+ * Medium
+ */
+
+.uk-control-medium {
+    font-size: var(--control-medium-font-size);
+    min-height: var(--control-medium-height);
+    padding: 0 var(--control-medium-padding-horizontal);
+    @if mixin-exists(hook-control-medium) {
+        @include hook-control-medium;
+    }
+}
+
+/*
+ * Large
+ */
+
+.uk-control-large {
+    font-size: var(--control-large-font-size);
+    min-height: var(--control-large-height);
+    padding: 0 var(--control-large-padding-horizontal);
+    @if mixin-exists(hook-control-large) {
+        @include hook-control-large;
+    }
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+/*
+ * Success
+ */
+
+.uk-control-success,
+.uk-control-success:hover,
+.uk-control-success:focus-within {
+    border-color: var(--control-success-border);
+    color: var(--control-success-color);
+    @if mixin-exists(hook-control-success) {
+        @include hook-control-success;
+    }
+}
+
+/*
+ * Warning
+ */
+
+.uk-control-warning,
+.uk-control-warning:hover,
+.uk-control-warning:focus-within {
+    border-color: var(--control-warning-border);
+    color: var(--control-warning-color);
+    @if mixin-exists(hook-control-warning) {
+        @include hook-control-warning;
+    }
+}
+
+/*
+ * Danger
+ */
+
+.uk-control-danger,
+.uk-control-danger:hover,
+.uk-control-danger:focus-within {
+    border-color: var(--control-danger-border);
+    color: var(--control-danger-color);
+    @if mixin-exists(hook-control-danger) {
+        @include hook-control-danger;
+    }
+}
+
+/*
+ * Blank
+ */
+
+.uk-control-blank,
+.uk-control-blank:hover,
+.uk-control-blank:focus-within {
+    background-color: transparent;
+    border-color: transparent;
+    border-style: var(--control-blank-border-style);
+    @if mixin-exists(hook-control-blank) {
+        @include hook-control-blank;
+    }
+}
+
+.uk-control-blank:focus-within {
+    border-color: var(--control-blank-focus-border);
+    @if mixin-exists(hook-control-blank-focus) {
+        @include hook-control-blank-focus;
+    }
+}
+
+
+/* Control input, prefix and suffix
+ ========================================================================== */
+
+/*
+ * Control input
+ */
+
+.uk-control-input {
+    max-width: 100%;
+    width: 100%;
+}
+
+.uk-control-input .uk-input,
+.uk-control-input .uk-input:hover,
+.uk-control-input .uk-input:focus,
+.uk-control-input .uk-input:disabled {
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    outline: 0 none;
+    padding: 0;
+}
+
+.uk-control-input .uk-input {
+    height: 100%;
+    @if mixin-exists(hook-control-input) {
+        @include hook-control-input;
+    }
+}
+
+.uk-control-input,
+.uk-control-prefix,
+.uk-control-suffix,
+.uk-control-clearfix {
+    align-items: center;
+    display: inline-flex;
+}
+
+.uk-control-prefix,
+.uk-control-suffix,
+.uk-control-clearfix {
+    min-width: fit-content;
+    user-select: none;
+}
+
+.uk-control-prefix {
+    @if mixin-exists(hook-control-prefix) {
+        @include hook-control-prefix;
+    }
+}
+
+.uk-control-clearfix {
+    cursor: pointer;
+    opacity: 0.8;
+    transition: opacity var(--transition-medium-fast-duration);
+}
+
+.uk-control-clearfix:hover { opacity: 0.6 }
+
+
+/* Right to Left Direction
+ ========================================================================== */
+
+body:not([dir]) .uk-control:not(.uk-control-rtl),
+[dir='ltr'] .uk-control:not(.uk-control-rtl) {
+    direction: ltr;
+
+    .uk-control-prefix {
+        margin-right: var(--control-affix-margin);
+    }
+
+    .uk-control-suffix {
+        margin-left: var(--control-affix-margin);
+    }
+}
+
+[dir='rtl'] .uk-control,
+.uk-control.uk-control-rtl {
+    direction: rtl;
+
+    .uk-control-prefix {
+        margin-left: var(--control-affix-margin);
+    }
+
+    .uk-control-suffix {
+        margin-right: var(--control-affix-margin);
+    }
+}
+
+
+// Effects
+// ========================================================================
+
+@keyframes uk-wave-effect {
+    0% {
+        opacity: 0.5;
+        transform: scale(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: scale(1.6);
+    }
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --control-height: var(--global-control-height);
+    --control-line-height: var(--control-height);
+    --control-padding-horizontal: #{$control-padding-horizontal};
+    --control-padding-vertical: #{$control-padding-vertical};
+    --control-background: #{$control-background};
+    --control-color: var(--global-color);
+    --control-border: var(--global-border);
+    --control-border-style: var(--global-border-style);
+    --control-border-width: var(--global-border-width);
+    --control-border-radius: #{$control-border-radius};
+    --control-hover-background: #{$control-hover-background};
+    --control-hover-color: var(--global-color);
+    --control-hover-border: #{$control-hover-border};
+    --control-focus-background: #{$control-focus-background};
+    --control-focus-color: var(--global-color);
+    --control-focus-border: var(--global-primary-border);
+    --control-disabled-background: #{$control-disabled-background};
+    --control-disabled-color: var(--global-color);
+    --control-disabled-border: var(--control-border);
+    --control-placeholder-color: var(--global-muted-color);
+    --control-small-height: var(--global-control-small-height);
+    --control-small-padding-horizontal: #{$control-small-padding-horizontal};
+    --control-small-padding-vertical: #{$control-small-padding-vertical};
+    --control-small-line-height: var(--control-small-height);
+    --control-small-font-size: var(--global-small-font-size);
+    --control-medium-height: var(--global-control-medium-height);
+    --control-medium-padding-horizontal: #{$control-medium-padding-horizontal};
+    --control-medium-padding-vertical: #{$control-medium-padding-vertical};
+    --control-medium-line-height: var(--control-medium-height);
+    --control-medium-font-size: var(--global-font-size);
+    --control-large-height: var(--global-control-large-height);
+    --control-large-padding-horizontal: #{$control-large-padding-horizontal};
+    --control-large-padding-vertical: #{$control-large-padding-vertical};
+    --control-large-line-height: var(--control-large-height);
+    --control-large-font-size: var(--global-medium-font-size);
+    --control-success-border: var(--global-success-border);
+    --control-success-color: var(--global-success-background);
+    --control-warning-border: var(--global-warning-border);
+    --control-warning-color: var(--global-warning-background);
+    --control-danger-border: var(--global-danger-border);
+    --control-danger-color: var(--global-danger-background);
+    --control-blank-border-style: #{$control-blank-border-style};
+    --control-blank-focus-border: #{$control-blank-focus-border};
+    --control-affix-margin: var(--global-small-margin);
+    --control-icon-color: var(--global-muted-color);
+    --control-icon-hover-color: var(--global-color);
+
+    // Inverse
+    --inverse-control-background: #{$inverse-control-background};
+    --inverse-control-border: var(--inverse-global-border);
+    --inverse-control-color: var(--inverse-global-color);
+    --inverse-control-hover-background: #{$inverse-control-hover-background};
+    --inverse-control-hover-border: #{$inverse-control-hover-border};
+    --inverse-control-hover-color: var(--inverse-global-color);
+    --inverse-control-focus-background: #{$inverse-control-focus-background};
+    --inverse-control-focus-border: var(--inverse-control-hover-border);
+    --inverse-control-focus-color: var(--inverse-global-color);
+    --inverse-control-placeholder-color: var(--inverse-global-muted-color);
+    --inverse-control-icon-color: var(--inverse-global-muted-color);
+    --inverse-control-icon-hover-color: var(--inverse-global-color);
+}

package/dist/cjs/components/Control/types.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { Direction } from '../../types';
+export declare type LiteralUnion<T extends U, U> = T | (U & {});
+export declare type SizeType = 'xsmall' | 'small' | 'medium' | 'large';
+export declare type StateType = 'success' | 'danger' | 'blank';
+export declare type ValueType = string | number;
+export declare type ControlType = LiteralUnion<'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
+export interface ControlProps<T> {
+    addonAfter?: React.ReactNode;
+    addonBefore?: React.ReactNode;
+    allowClear?: boolean;
+    defaultValue?: T;
+    direction?: Direction;
+    prefix?: React.ReactNode;
+    size?: SizeType;
+    state?: StateType;
+    suffix?: React.ReactNode;
+    type?: ControlType;
+    value?: T;
+    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+}

package/dist/cjs/components/Control/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import './index.scss';
+export interface CoverProps extends React.HTMLAttributes<HTMLDivElement> {
+    automute?: boolean;
+    height?: number;
+    width?: number;
+}
+export declare function Cover(props: CoverProps): JSX.Element;