@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,311 @@
+// Name:            Checkbox Control
+// Description:     Component to create Checkbox element
+//
+// Component:       `uk-control-checkbox`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Checkbox
+ ========================================================================== */
+
+.uk-checkbox-wrapper {
+    cursor: pointer;
+    display: flex;
+    line-height: unset;
+    user-select: none;
+    @if mixin-exists(hook-checkbox-wrapper) {
+        @include hook-checkbox-wrapper;
+    }
+}
+
+.uk-checkbox-wrapper .uk-checkbox {
+    border: 0;
+    border-radius: var(--checkbox-border-radius);
+    display: inline-block;
+    height: var(--checkbox-size);
+    line-height: 1;
+    margin: 0;
+    min-width: var(--checkbox-size);
+    overflow: visible;
+    position: relative;
+    top: 0;
+    vertical-align: sub;
+    white-space: nowrap;
+    @if mixin-exists(hook-checkbox-checkbox) {
+        @include hook-checkbox-checkbox;
+    }
+}
+
+.uk-checkbox-wrapper .uk-checkbox-input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    bottom: 0;
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+    @if mixin-exists(hook-checkbox-input) {
+        @include hook-checkbox-input;
+    }
+}
+
+.uk-checkbox-wrapper .uk-checkbox-inner {
+    background-color: transparent;
+    border: var(--checkbox-border-width) solid var(--checkbox-border);
+    border-collapse: separate;
+    border-radius: var(--checkbox-border-radius);
+    box-sizing: border-box;
+    direction: ltr;
+    display: block;
+    height: var(--checkbox-size);
+    left: 0;
+    position: relative;
+    top: 0;
+    transition: all var(--transition-duration);
+    width: var(--checkbox-size);
+    @if mixin-exists(hook-checkbox-inner) {
+        @include hook-checkbox-inner;
+    }
+}
+
+.uk-checkbox-wrapper .uk-checkbox-inner::after {
+    border: var(--checkbox-border-width) solid var(--checkbox-checked-border);
+    border-left: 0;
+    border-top: 0;
+    content: ' ';
+    display: block;
+    height: calc(var(--checkbox-size) / 2.5);
+    left: 27.5%;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    transform: rotate(45deg) scale(0) translate(-50%, -50%);
+    transition: all var(--transition-fast-duration) var(--ease-in-back),
+        opacity var(--transition-fast-duration);
+    width: calc(var(--checkbox-size) / 6);
+}
+
+.uk-checkbox-wrapper .uk-checkbox-label {
+    max-width: 100%;
+    overflow: hidden;
+    padding-left: var(--control-affix-margin);
+    @if mixin-exists(hook-checkbox-label) {
+        @include hook-checkbox-label;
+    }
+}
+
+// Hover state
+.uk-checkbox-wrapper:not(.uk-checked):hover {
+    @if mixin-exists(hook-checkbox-hover) {
+        @include hook-checkbox-hover;
+    }
+}
+
+.uk-checkbox-wrapper:not(.uk-checked):hover .uk-checkbox-inner,
+.uk-checkbox:not(.uk-checkbox-checked):hover .uk-checkbox-inner {
+    border-color: var(--checkbox-hover-border);
+}
+
+.uk-checkbox-wrapper:not(.uk-disabled):hover .uk-checkbox::after,
+.uk-checkbox:not(.uk-checkbox-disabled):hover::after {
+    visibility: visible;
+}
+
+
+// Checked state
+.uk-checkbox-checked {
+    @if mixin-exists(hook-checkbox-checked) {
+        @include hook-checkbox-checked;
+    }
+}
+
+.uk-checkbox-checked::after {
+    animation: uk-wave-effect 0.36s var(--ease-in-out);
+    animation-fill-mode: backwards;
+    border: var(--checkbox-border-width) solid var(--checkbox-checked-border);
+    border-radius: var(--checkbox-border-radius);
+    box-sizing: border-box;
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    width: 100%;
+}
+
+.uk-checkbox-checked .uk-checkbox-inner {
+    background-color: var(--checkbox-checked-background);
+    border-color: var(--checkbox-checked-border);
+}
+
+.uk-checkbox-checked .uk-checkbox-inner::after {
+    border-color: var(--checkbox-checked-icon-color);
+    opacity: 1;
+    transform: rotate(45deg) scale(1) translate(-50%, -50%);
+    transition: all
+        var(--transition-medium-fast-duration)
+        var(--ease-out-back)
+        var(--transition-fast-duration);
+}
+
+// Disabled state
+.uk-checkbox-disabled {
+    cursor: not-allowed;
+    @if mixin-exists(hook-checkbox-disabled) {
+        @include hook-checkbox-disabled;
+    }
+}
+
+.uk-checkbox-disabled .uk-checkbox-label {
+    color: var(--control-placeholder-color);
+}
+
+.uk-checkbox-disabled .uk-checkbox-input {
+    cursor: not-allowed;
+}
+
+.uk-checkbox-disabled .uk-checkbox-inner {
+    background-color: transparent;
+    border-color: var(--checkbox-disabled-border);
+    cursor: not-allowed;
+}
+
+.uk-checkbox-disabled.uk-checkbox-checked .uk-checkbox-inner::after {
+    animation-name: none;
+    border-color: var(--checkbox-disabled-icon-color);
+}
+
+
+/* Intermediate
+ ========================================================================== */
+
+.uk-checkbox-indeterminate {
+    @if mixin-exists(hook-checkbox-indeterminate) {
+        @include hook-checkbox-indeterminate;
+    }
+}
+
+.uk-checkbox-indeterminate .uk-checkbox-inner {
+    background-color: transparent;
+}
+
+.uk-checkbox-indeterminate.uk-checkbox-checked .uk-checkbox-inner {
+    border-color: var(--checkbox-border);
+}
+
+.uk-checkbox-indeterminate .uk-checkbox-inner::after {
+    background-color: var(--checkbox-checked-background);
+    border: 0;
+    content: ' ';
+    height: var(--checkbox-indeterminate-size);
+    left: 50%;
+    opacity: 1;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(1);
+    width: var(--checkbox-indeterminate-size);
+}
+
+.uk-checkbox-indeterminate.uk-checkbox-disabled .uk-checkbox-inner::after {
+    background-color: var(--checkbox-disabled-background);
+}
+
+
+/* Group
+ ========================================================================== */
+
+.uk-checkbox-group {
+    display: flex;
+    flex-direction: row;
+    gap: var(--control-affix-margin);
+    @if mixin-exists(hook-checkbox-group) {
+        @include hook-checkbox-group;
+    }
+}
+
+.uk-checkbox-group-stack {
+    flex-direction: column;
+    @if mixin-exists(hook-checkbox-group-stack) {
+        @include hook-checkbox-group-stack;
+    }
+}
+
+
+/* Control
+ ========================================================================== */
+
+.uk-control-checkbox {
+    cursor: pointer;
+    padding-bottom: var(--control-medium-padding-vertical);
+    padding-top: var(--control-medium-padding-vertical);
+    @if mixin-exists(hook-checkbox-control) {
+        @include hook-checkbox-control;
+    }
+}
+
+.uk-control-checkbox.uk-checked {
+    background-color: var(--checkbox-checked-control-background);
+    border-color: var(--checkbox-checked-border);
+    color: var(--checkbox-checked-control-color);
+}
+
+.uk-control-checkbox.uk-checked:hover {
+    border-color: var(--checkbox-checked-border);
+}
+
+.uk-control-checkbox.uk-disabled {
+    background-color: var(--checkbox-disabled-background);
+    border-color: var(--checkbox-disabled-border);
+    cursor: not-allowed;
+}
+
+
+/* Right to Left Direction
+ ========================================================================== */
+
+[dir='rtl'] .uk-checkbox-wrapper .uk-checkbox-label,
+.uk-checkbox-wrapper.uk-checkbox-rtl .uk-checkbox-label {
+    padding-left: 0;
+    padding-right: var(--control-affix-margin);
+}
+
+
+// Vars
+// ========================================================================
+
+:root, ::after, ::before {
+    --checkbox-background: var(--control-background);
+    --checkbox-border: var(--control-border);
+    --checkbox-border-width: var(--control-border-width);
+    --checkbox-border-radius: var(--control-border-radius);
+    --checkbox-hover-border: var(--global-primary-border);
+    --checkbox-focus-background: var(--control-focus-background);
+    --checkbox-focus-border: var(--global-primary-border);
+    --checkbox-disabled-background: var(--control-disabled-background);
+    --checkbox-disabled-border: var(--control-disabled-border);
+    --checkbox-disabled-icon-color: var(--global-muted-color);
+    --checkbox-indeterminate-size: #{$checkbox-indeterminate-size};
+    --checkbox-size: #{$checkbox-size};
+    --checkbox-checked-background: var(--global-primary-background);
+    --checkbox-checked-border: var(--global-primary-border);
+    --checkbox-checked-icon-color: var(--global-inverse-color);
+    --checkbox-checked-control-background: #{$checkbox-checked-control-background};
+    --checkbox-checked-control-color: #{$checkbox-checked-control-color};
+    --checkbox-checked-control-padding: #{$checkbox-checked-control-padding};
+}

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import type { SizeType } from '../types';
+export declare type CheckboxValueType = string | number | boolean;
+export interface AbstractCheckboxProps<T> {
+    autoFocus?: boolean;
+    block?: boolean;
+    checked?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    direction?: string;
+    id?: string;
+    name?: string;
+    prefixCls?: string;
+    size?: SizeType;
+    skipGroup?: boolean;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    type?: string;
+    value?: any;
+    onChange?: (event: T) => void;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+}
+export interface CheckboxProps extends AbstractCheckboxProps<CheckboxChangeEvent> {
+    indeterminate?: boolean;
+}
+export interface CheckboxChangeEventTarget extends CheckboxProps {
+    checked: boolean;
+}
+export interface CheckboxChangeEvent {
+    nativeEvent: MouseEvent;
+    target: CheckboxChangeEventTarget;
+    preventDefault(): void;
+    stopPropagation(): void;
+}
+export interface CheckboxGroupConsumerProps {
+    disabled?: boolean;
+    name?: string;
+    value?: any;
+    cancelValue: (value: string) => void;
+    registerValue: (value: string) => void;
+    toggleOption?: (option: CheckboxOptionType) => void;
+}
+export interface AbstractCheckboxGroupProps {
+    block?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    direction?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    options?: CheckboxOptionType[] | string[];
+    size?: SizeType;
+    stack?: boolean;
+    style?: React.CSSProperties;
+}
+export interface CheckboxGroupProps extends AbstractCheckboxGroupProps {
+    defaultValue?: CheckboxValueType[];
+    value?: CheckboxValueType[];
+    onChange?: (checkedValue: CheckboxValueType[]) => void;
+}
+export interface CheckboxOptionType {
+    disabled?: boolean;
+    label: React.ReactNode;
+    value: CheckboxValueType;
+    style?: React.CSSProperties;
+    onChange?: (event: CheckboxChangeEvent) => void;
+}

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

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

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { InputProps, InputRef } from './types';
+export declare const Input: React.ForwardRefExoticComponent<InputProps<import("..").ValueType> & React.RefAttributes<InputRef>>;

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

@@ -0,0 +1,63 @@
+"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.Input = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const omit_1 = __importDefault(require("rc-util/lib/omit"));
+const Icon_1 = require("../../Icon");
+const useInput_1 = require("./useInput");
+exports.Input = React.forwardRef((props, ref) => {
+    const { allowClear, inputRef, prefix, suffix, wrapperClasses, onClear, ...restProps } = (0, useInput_1.useInput)({
+        type: 'text',
+        ...props,
+    });
+    React.useImperativeHandle(ref, () => ({
+        blur() {
+            inputRef.current?.blur();
+        },
+        focus() {
+            inputRef.current?.focus();
+        },
+        getInputRef() {
+            return inputRef;
+        },
+    }));
+    const inputProps = (0, omit_1.default)({
+        ...restProps,
+        className: (0, classnames_1.default)('uk-input', {
+            'uk-empty': !restProps.value,
+        }),
+    }, ['dir', 'size']);
+    return (React.createElement("label", { className: wrapperClasses, htmlFor: restProps.id },
+        prefix && (React.createElement("span", { key: "prefix", className: "uk-control-prefix" }, prefix)),
+        React.createElement("span", { key: "input", className: "uk-control-input" },
+            React.createElement("input", { ref: inputRef, ...inputProps, type: restProps.type })),
+        (allowClear && restProps.value) && (React.createElement(Icon_1.Icon, { key: "clearfix-icon", icon: "close", className: "uk-control-clearfix", onClick: onClear })),
+        suffix && (React.createElement("span", { key: "suffix", className: "uk-control-suffix" }, suffix))));
+});

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { InputNumberProps, InputRef } from '../types';
+import './index.scss';
+export declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps<import("../..").ValueType> & React.RefAttributes<InputRef>>;

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

@@ -0,0 +1,66 @@
+"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.InputNumber = void 0;
+const React = __importStar(require("react"));
+const rc_input_number_1 = __importDefault(require("rc-input-number"));
+const omit_1 = __importDefault(require("rc-util/lib/omit"));
+const Icon_1 = require("../../../Icon");
+const useInput_1 = require("../useInput");
+require("./index.scss");
+exports.InputNumber = React.forwardRef((props, ref) => {
+    // Hooks
+    const { inputRef, wrapperClasses, ...restProps } = (0, useInput_1.useInput)({
+        ...props,
+        type: 'number',
+    });
+    // External component API
+    React.useImperativeHandle(ref, () => ({
+        blur() {
+            inputRef.current?.blur();
+        },
+        focus() {
+            inputRef.current?.focus();
+        },
+        getInputRef() {
+            return inputRef;
+        },
+    }));
+    // Pre-render logic
+    const upIcon = React.useMemo(() => (React.createElement(Icon_1.Icon, { icon: "keyboard_arrow_up", className: "uk-number-handler-up-inner" })), []);
+    const downIcon = React.useMemo(() => (React.createElement(Icon_1.Icon, { icon: "keyboard_arrow_down", className: "uk-number-handler-down-inner" })), []);
+    const inputProps = (0, omit_1.default)({
+        ...restProps,
+        className: 'uk-number-wrapper',
+    }, ['allowClear', 'prefix', 'size', 'suffix', 'onClear']);
+    // Render
+    return (React.createElement("label", { className: wrapperClasses, htmlFor: restProps.id },
+        React.createElement("div", { className: "uk-control-input" },
+            React.createElement(rc_input_number_1.default, { ...inputProps, downHandler: downIcon, prefixCls: "uk-number", ref: inputRef, upHandler: upIcon }))));
+});
+exports.InputNumber.displayName = 'Input.Number';

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

@@ -0,0 +1,108 @@
+// Name:            Checkbox Control
+// Description:     Component to create Checkbox element
+//
+// Component:       `uk-control-checkbox`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Number
+ ========================================================================== */
+
+.uk-number-wrapper {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    padding: 0;
+    width: 100%;
+}
+
+.uk-number-input {
+    -webkit-appearance: none;
+    background: none;
+    border: 0 none;
+    color: inherit;
+    display: inline-block;
+    font: inherit;
+    max-width: 100%;
+    outline: 0 none;
+    overflow: visible;
+    padding: 0;
+    vertical-align: middle;
+    width: 100%;
+}
+
+.uk-number-input:focus {
+    outline: 0 none;
+}
+
+.uk-number-input[type='number']::-webkit-inner-spin-button,
+.uk-number-input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    height: auto;
+    margin: 0;
+}
+
+.uk-number-input::-moz-placeholder {
+    opacity: 1;
+}
+
+.uk-number-input::-ms-input-placeholder {
+    color: var(--control-placeholder-color) !important;
+}
+
+.uk-number-input::placeholder {
+    color: var(--control-placeholder-color);
+}
+
+.uk-number-input-wrap {
+    flex: 1;
+    height: 100%;
+    min-width: 1px;
+}
+
+.uk-number-handler-wrap {
+    background-color: transparent;
+    border: 0 none;
+    border-radius: 0;
+    height: 2em;
+    opacity: 1;
+    order: 99;
+}
+
+.uk-number-handler {
+    align-items: center;
+    border: 0;
+    border-radius: 0;
+    display: flex;
+    height: 50%;
+}
+
+.uk-number-handler:active .uk-number-handler-up-inner,
+.uk-number-handler:active .uk-number-handler-down-inner {
+    transform: scale(0.9);
+}
+
+.uk-number-handler .uk-number-handler-up-inner,
+.uk-number-handler .uk-number-handler-down-inner {
+    color: var(--control-icon-color);
+    cursor: pointer;
+    transform: none;
+    transform-origin: 50% 50%;
+
+    &:hover { color: var(--control-icon-hover-color); }
+}
+
+
+/* Control
+ ========================================================================== */
+
+.uk-control-number.uk-control-rtl .uk-number-handler-wrap {
+    order: 1;
+}
+
+.uk-control-number.uk-disabled .uk-number-handler-wrap,
+.uk-control-number.uk-readonly .uk-number-handler-wrap {
+    display: none;
+}

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { InputRef, PasswordProps } from '../types';
+import './index.scss';
+export declare const Password: React.ForwardRefExoticComponent<PasswordProps & React.RefAttributes<InputRef>>;