@alfalab/core-components 19.11.1 → 20.0.0

package/form-control/cssm/Component.js

@@ -1,92 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var styles = require('./index.module.css');
-var defaultColors = require('./default.module.css');
-var invertedColors = require('./inverted.module.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
-var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-function __rest(s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-var colorStyles = {
-    default: defaultColors__default['default'],
-    inverted: invertedColors__default['default'],
-};
-var FormControl = React__default['default'].forwardRef(function (_a, ref) {
-    var _b, _c;
-    var _d = _a.block, block = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 's' : _e, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, className = _a.className, fieldClassName = _a.fieldClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "focused", "filled", "error", "hint", "label", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
-    var errorMessage = typeof error === 'string' ? error : '';
-    return (React__default['default'].createElement("div", { "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, colorStyles[colors].component, className, styles__default['default'][size], (_b = {},
-            _b[styles__default['default'].block] = block,
-            _b[styles__default['default'].hasLeftAddons] = leftAddons,
-            _b[styles__default['default'].hasRightAddons] = rightAddons || error,
-            _b)) },
-        React__default['default'].createElement("div", __assign({}, restProps, { className: cn__default['default'](fieldClassName, styles__default['default'].inner, colorStyles[colors].inner, (_c = {},
-                _c[styles__default['default'].disabled] = disabled,
-                _c[colorStyles[colors].disabled] = disabled,
-                _c[styles__default['default'].filled] = filled,
-                _c[styles__default['default'].hasLabel] = label,
-                _c[styles__default['default'].focused] = focused,
-                _c[colorStyles[colors].focused] = focused,
-                _c[styles__default['default'].hasError] = error,
-                _c[colorStyles[colors].hasError] = error,
-                _c)), ref: ref }),
-            leftAddons && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].addons, styles__default['default'].leftAddons, addonsClassName) }, leftAddons)),
-            React__default['default'].createElement("div", { className: styles__default['default'].inputWrapper },
-                label && (React__default['default'].createElement(React__default['default'].Fragment, null,
-                    React__default['default'].createElement("span", { className: styles__default['default'].hiddenLabel, "aria-hidden": true }, label),
-                    React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].label, colorStyles[colors].label, labelClassName) },
-                        React__default['default'].createElement("span", { className: styles__default['default'].labelInner }, label)))),
-                React__default['default'].createElement("div", { className: styles__default['default'].input }, children)),
-            rightAddons && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].addons, styles__default['default'].rightAddons, addonsClassName) }, rightAddons))),
-        bottomAddons,
-        errorMessage && (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].sub, styles__default['default'].error, colorStyles[colors].error) }, errorMessage)),
-        hint && !errorMessage && (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].sub, colorStyles[colors].hint) }, hint))));
-});
-
-exports.FormControl = FormControl;

package/form-control/cssm/default.module.css

@@ -1,94 +0,0 @@
-:root {
-    --color-light-border-key: #0b1f35;
-    --color-light-border-secondary-inverted: #b6bcc3;
-    --color-light-text-negative: #d91d0b;
-    --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
-    --color-static-border-accent: #ef3124;
-    --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
-    --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --form-control-border-bottom: 1px solid var(--color-light-border-secondary-inverted);
-    --form-control-bg-color: var(--color-light-bg-primary-inverted-alpha-7);
-    --form-control-color: var(--color-light-text-primary);
-    --form-control-label-color: var(--color-light-text-secondary);
-    --form-control-hint-color: var(--color-light-text-secondary);
-
-    /* disabled */
-    --form-control-disabled-bg-color: var(--color-light-bg-primary-inverted-alpha-15);
-    --form-control-disabled-border-bottom: 1px dashed var(--color-light-border-secondary-inverted);
-    --form-control-disabled-color: var(--color-light-text-secondary);
-
-    /* focus */
-    --form-control-focus-border-bottom: 1px solid var(--color-light-border-key);
-    --form-control-focus-bg-color: var(--color-light-bg-primary-inverted-alpha-15);
-
-    /* hover */
-    --form-control-hover-bg-color: var(--color-light-bg-primary-inverted-alpha-15);
-
-    /* error */
-    --form-control-error-color: var(--color-light-text-negative);
-    --form-control-error-label-color: var(--color-light-text-secondary);
-    --form-control-error-shadow: none;
-    --form-control-error-border-bottom: 1px solid var(--color-static-border-accent);
-}
-.component {
-    color: var(--form-control-color);
-}
-.inner {
-    background-color: var(--form-control-bg-color);
-}
-/* Нижняя граница */
-.inner:before {
-    border-bottom: var(--form-control-border-bottom);
-}
-.label {
-    color: var(--form-control-label-color);
-}
-.hint {
-    color: var(--form-control-hint-color);
-}
-/* DISABLED STATE */
-.disabled {
-    background-color: var(--form-control-disabled-bg-color);
-    color: var(--form-control-disabled-color);
-}
-.disabled:before {
-    border-bottom: var(--form-control-disabled-border-bottom);
-}
-/* FOCUS STATE */
-.focused:not(.disabled):not(.hasError):before {
-    border-bottom: var(--form-control-focus-border-bottom);
-}
-.focused.inner {
-    background-color: var(--form-control-focus-bg-color);
-}
-/* HOVER STATE */
-.inner:not(.disabled):hover {
-    background-color: var(--form-control-hover-bg-color);
-}
-/* ERROR STATE */
-.error {
-    color: var(--form-control-error-color);
-}
-.hasError .label {
-    color: var(--form-control-error-label-color);
-}
-.hasError {
-    box-shadow: var(--form-control-error-shadow);
-}
-.hasError:before {
-    border-bottom: var(--form-control-error-border-bottom);
-}

package/form-control/cssm/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/form-control/cssm/index.js

@@ -1,12 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('./index.module.css');
-require('./default.module.css');
-require('./inverted.module.css');
-
-
-
-exports.FormControl = Component.FormControl;

package/form-control/cssm/index.module.css

@@ -1,233 +0,0 @@
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-}
-:root {
-    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
-    --size-s-height: 48px;
-    --size-m-height: 56px;
-    --size-l-height: 64px;
-    --size-xl-height: 72px;
-}
-:root {
-    --form-control-s-min-height: var(--size-s-height);
-    --form-control-m-min-height: var(--size-m-height);
-    --form-control-l-min-height: var(--size-l-height);
-    --form-control-xl-min-height: var(--size-xl-height);
-    --form-control-border-radius: 4px 4px 0 0;
-    --form-control-bg-backdrop-filter: unset;
-
-    /* paddings */
-    --form-control-paddings: 0 var(--gap-s);
-    --form-control-xl-paddings: 0 var(--gap-m);
-    --form-control-labeled-s-paddings: 23px var(--gap-s) 5px;
-    --form-control-labeled-m-paddings: 28px var(--gap-s) 8px;
-    --form-control-labeled-l-paddings: 32px var(--gap-s) 12px;
-    --form-control-labeled-xl-paddings: 38px var(--gap-m) 14px;
-    --form-control-sub-paddings: 0;
-
-    /* disabled */
-    --form-control-disabled-opacity: 1;
-
-    /* font */
-    --form-control-font-family: var(--font-family);
-}
-.component {
-    font-family: var(--form-control-font-family);
-    width: max-content;
-}
-.inner {
-    display: flex;
-    position: relative;
-    min-height: 100%;
-    -webkit-backdrop-filter: var(--form-control-bg-backdrop-filter);
-            backdrop-filter: var(--form-control-bg-backdrop-filter);
-    border-radius: var(--form-control-border-radius);
-    transition: background 0.2s ease, box-shadow 0.2s ease;
-    box-sizing: border-box;
-    outline: none;
-    transform: translateZ(0);
-}
-/* Нижняя граница */
-.inner:before {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    height: 0;
-    transition: transform 0.2s ease, border 0.2s ease;
-    transform-origin: bottom;
-}
-.inputWrapper {
-    flex-grow: 1;
-    position: relative;
-    overflow: hidden;
-}
-.input {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-.input > * {
-    padding: var(--form-control-paddings);
-    font-family: var(--form-control-font-family);
-}
-.label {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-
-    position: absolute;
-    display: flex;
-    align-items: center;
-    left: var(--gap-s);
-    right: 0;
-    transform-origin: left top;
-    transform: translateY(-50%);
-    transition-duration: 200ms;
-    transition-property: color, transform;
-    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
-}
-.labelInner {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.addons {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-}
-.leftAddons {
-    padding-left: var(--gap-s);
-}
-.rightAddons {
-    padding-right: var(--gap-s);
-}
-.sub {
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 400;
-
-    display: block;
-    margin-top: var(--gap-2xs);
-    padding: var(--form-control-sub-paddings);
-}
-.block {
-    width: 100%;
-}
-/* SIZES */
-.s .inner {
-    min-height: var(--form-control-s-min-height);
-}
-.s .hasLabel .input > * {
-    padding: var(--form-control-labeled-s-paddings);
-}
-.s .label {
-    top: calc(var(--form-control-s-min-height) / 2 + 1px);
-}
-.m .inner {
-    min-height: var(--form-control-m-min-height);
-}
-.m .hasLabel .input > * {
-    padding: var(--form-control-labeled-m-paddings);
-}
-.m .label {
-    top: calc(var(--form-control-m-min-height) / 2);
-}
-.l .inner {
-    min-height: var(--form-control-l-min-height);
-}
-.l .hasLabel .input > * {
-    padding: var(--form-control-labeled-l-paddings);
-}
-.l .label {
-    top: calc(var(--form-control-l-min-height) / 2);
-}
-.xl .inner {
-    min-height: var(--form-control-xl-min-height);
-}
-.xl .label {
-    left: var(--gap-m);
-}
-.xl .input > * {
-    padding: var(--form-control-xl-paddings);
-}
-.xl .hasLabel .input > * {
-    padding: var(--form-control-labeled-xl-paddings);
-}
-.xl .leftAddons {
-    padding-left: var(--gap-m);
-}
-.xl .rightAddons {
-    padding-right: var(--gap-m);
-}
-.xl.hasLeftAddons .label {
-    left: var(--gap-s);
-}
-.xl.hasLeftAddons .input > * {
-    padding-left: var(--gap-s);
-}
-.xl.hasRightAddons .input > * {
-    padding-right: var(--gap-s);
-}
-.xl .sub {
-    margin-top: var(--gap-xs);
-}
-.xl .label {
-    top: calc(var(--form-control-xl-min-height) / 2 - 1px);
-}
-/* DISABLED STATE */
-.disabled {
-    opacity: var(--form-control-disabled-opacity);
-}
-/* FOCUS STATE */
-.focused:not(.disabled):before,
-.hasError:before {
-    transform: scaleY(2);
-}
-.filled .label {
-    transform: translateY(-100%) scale(0.875);
-}
-.hiddenLabel {
-    opacity: 0;
-    height: 0;
-    padding: var(--form-control-paddings);
-    display: block;
-    box-sizing: border-box;
-}
-.xl .hiddenLabel {
-    padding: var(--form-control-l-paddings);
-}
-/* min-height and width: max-content; fix for IE */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .component {
-        float: left;
-        clear: left;
-    }
-
-    .inner:after {
-        min-height: inherit;
-        font-size: 0;
-        content: '';
-    }
-}

package/form-control/cssm/inverted.module.css

@@ -1,99 +0,0 @@
-:root {
-    --color-light-border-key-inverted: #fff;
-    --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.15);
-    --color-light-text-primary-inverted: #fff;
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-    --color-static-border-accent: #ef3124;
-    --color-static-text-accent: #ef3124;
-    --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-border-underline-inverted: #6d7986;
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --form-control-inverted-border-bottom: 1px solid var(--color-light-border-underline-inverted);
-    --form-control-inverted-bg-color: var(--color-light-specialbg-component-inverted);
-    --form-control-inverted-color: var(--color-light-text-primary-inverted);
-    --form-control-inverted-label-color: var(--color-light-text-secondary-inverted-transparent);
-    --form-control-inverted-hint-color: var(--color-light-text-secondary-inverted-transparent);
-
-    /* disabled */
-    --form-control-inverted-disabled-bg-color: var(
-        --color-light-specialbg-component-inverted-tint-15
-    );
-    --form-control-inverted-disabled-border-bottom: 1px dashed
-        var(--color-light-border-underline-inverted);
-    --form-control-inverted-disabled-color: var(--color-light-text-secondary-inverted-transparent);
-
-    /* focus */
-    --form-control-inverted-focus-border-bottom: 1px solid var(--color-light-border-key-inverted);
-    --form-control-inverted-focus-bg-color: var(--color-light-specialbg-component-inverted-tint-15);
-
-    /* hover */
-    --form-control-inverted-hover-bg-color: var(--color-light-specialbg-component-inverted-tint-15);
-
-    /* error */
-    --form-control-inverted-error-color: var(--color-static-text-accent);
-    --form-control-inverted-error-label-color: var(
-        --color-light-text-secondary-inverted-transparent
-    );
-    --form-control-inverted-error-shadow: none;
-    --form-control-inverted-error-border-bottom: 1px solid var(--color-static-border-accent);
-}
-.component {
-    color: var(--form-control-inverted-color);
-}
-.inner {
-    background-color: var(--form-control-inverted-bg-color);
-}
-/* Нижняя граница */
-.inner:before {
-    border-bottom: var(--form-control-inverted-border-bottom);
-}
-.label {
-    color: var(--form-control-inverted-label-color);
-}
-.hint {
-    color: var(--form-control-inverted-hint-color);
-}
-/* DISABLED STATE */
-.disabled {
-    background-color: var(--form-control-inverted-disabled-bg-color);
-    color: var(--form-control-inverted-disabled-color);
-}
-.disabled:before {
-    border-bottom: var(--form-control-inverted-disabled-border-bottom);
-}
-/* FOCUS STATE */
-.focused:not(.disabled):not(.hasError):before {
-    border-bottom: var(--form-control-inverted-focus-border-bottom);
-}
-.focused.inner {
-    background-color: var(--form-control-inverted-focus-bg-color);
-}
-/* HOVER STATE */
-.inner:not(.disabled):hover {
-    background-color: var(--form-control-inverted-hover-bg-color);
-}
-/* ERROR STATE */
-.error {
-    color: var(--form-control-inverted-error-color);
-}
-.hasError .label {
-    color: var(--form-control-inverted-error-label-color);
-}
-.hasError {
-    box-shadow: var(--form-control-inverted-error-shadow);
-}
-.hasError:before {
-    border-bottom: var(--form-control-inverted-error-border-bottom);
-}