@skbkontur/react-ui 0.0.0-375e096002 → 0.0.0-388db940ca

package/internal/ThemePlayground/Playground.js

@@ -0,0 +1,201 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React from 'react';
+import { SearchLoupeIcon16Regular } from '@skbkontur/icons/icons/SearchLoupeIcon/SearchLoupeIcon16Regular.js';
+import { AttachLinkIcon16Regular } from '@skbkontur/icons/icons/AttachLinkIcon/AttachLinkIcon16Regular.js';
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular.js';
+import { MinusCircleIcon16Regular } from '@skbkontur/icons/icons/MinusCircleIcon/MinusCircleIcon16Regular.js';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular.js';
+import { QuestionCircleIcon16Regular } from '@skbkontur/icons/icons/QuestionCircleIcon/QuestionCircleIcon16Regular.js';
+import { Button } from '../../components/Button/index.js';
+import { Tabs } from '../../components/Tabs/index.js';
+import { Gapped } from '../../components/Gapped/index.js';
+import { Link } from '../../components/Link/index.js';
+import { Input } from '../../components/Input/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { Tooltip } from '../../components/Tooltip/index.js';
+import { Sticky } from '../../components/Sticky/index.js';
+import { isTestEnv } from '../../lib/currentEnvironment.js';
+import { cx } from '../../lib/theming/Emotion.js';
+import { FileUploader } from '../../components/FileUploader/index.js';
+import { ThemeType } from './constants.js';
+import { TokenInputPlayground } from './TokenInputPlayground.js';
+import { DatePickerPlayground } from './AnotherInputsPlayground.js';
+import { TogglePlayground } from './TogglePlayground.js';
+import { SwitcherPlayground } from './SwitcherPlayground.js';
+import { FxInputPlayground } from './FxInputPlayground.js';
+import { CurrencyInputPlayground } from './CurrencyInputPlayground.js';
+import { getComponentsFromPropsList } from './helpers.js';
+import { CheckboxPlayground } from './CheckboxPlayground.js';
+import { RadioPlayground } from './RadioPlayground.js';
+import { PagingPlayground } from './PagingPlayground.js';
+import { HintPlayground } from './HintPlayground.js';
+import { ComponentsGroup } from './ComponentsGroup.js';
+import { styles } from './Playground.styles.js';
+import { SizesGroup } from './SizesGroup.js';
+var useSticky = !isTestEnv;
+var Playground = /** @class */ (function (_super) {
+    __extends(Playground, _super);
+    function Playground() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.stopEl = React.createRef();
+        _this.renderTabsGroup = function () {
+            return useSticky ? (React.createElement(Sticky, { side: 'top', getStop: _this.getStickyStop }, _this.renderTabs())) : (_this.renderTabs());
+        };
+        _this.getCurrentTab = function () {
+            switch (_this.props.currentThemeType) {
+                case ThemeType.DarkTheme:
+                    return ThemeType.DarkTheme;
+                default:
+                    return ThemeType.LightTheme;
+            }
+        };
+        _this.renderSizesGroup = function () {
+            return (React.createElement(ComponentsGroup, { title: 'Размеры', theme: _this.theme },
+                React.createElement(SizesGroup, { size: 'small' }),
+                React.createElement(SizesGroup, { size: 'medium' }),
+                React.createElement(SizesGroup, { size: 'large' })));
+        };
+        _this.renderLinksGroup = function () {
+            var propsList = [
+                { icon: React.createElement(AttachLinkIcon16Regular, null), children: 'Enabled' },
+                { icon: React.createElement(CheckAIcon16Regular, null), use: 'success', children: 'Success' },
+                { icon: React.createElement(MinusCircleIcon16Regular, null), use: 'danger', children: 'Danger' },
+                { icon: React.createElement(TrashCanIcon16Regular, null), use: 'grayed', children: 'Grayed' },
+                { icon: React.createElement(TrashCanIcon16Regular, null), children: 'Disabled', disabled: true },
+            ];
+            return (React.createElement(ComponentsGroup, { title: 'Ссылки', theme: _this.theme },
+                React.createElement(Gapped, { wrap: true, verticalAlign: "middle", gap: 10 }, getComponentsFromPropsList(React.createElement(Link, null), propsList))));
+        };
+        _this.renderButtonsGroup = function () {
+            var propsList = [
+                { children: 'Default' },
+                { children: 'Primary', use: 'primary' },
+                { children: 'Danger', use: 'danger' },
+                { children: 'Pay', use: 'pay' },
+                { children: 'Success', use: 'success' },
+                { children: 'Disabled', disabled: true },
+                { children: 'Back', arrow: 'left', size: 'medium', width: 110 },
+                { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },
+                { children: 'Loading', size: 'medium', loading: true },
+            ];
+            return (React.createElement(ComponentsGroup, { title: 'Кнопки', theme: _this.theme }, getComponentsFromPropsList(React.createElement(Button, { width: 120, size: 'small' }), propsList)));
+        };
+        _this.renderInputsGroup = function () {
+            var propsList = [
+                { placeholder: 'Enabled' },
+                { placeholder: 'Error', error: true },
+                { placeholder: 'Warning', warning: true },
+                { placeholder: 'Disabled', disabled: true },
+            ];
+            var fromProps = getComponentsFromPropsList(React.createElement(Input, { width: 120 }), propsList);
+            return (React.createElement(ComponentsGroup, { title: 'Поле ввода', theme: _this.theme },
+                React.createElement(Input, { width: 380, prefix: "https://kontur.ru/search?query=", rightIcon: React.createElement(SearchLoupeIcon16Regular, null) }),
+                React.createElement("div", null,
+                    React.createElement(Gapped, { gap: 10 }, fromProps))));
+        };
+        _this.renderTokenInputsGroup = function () {
+            return (React.createElement(ComponentsGroup, { title: 'Поле с токеном', theme: _this.theme },
+                React.createElement(TokenInputPlayground, null)));
+        };
+        _this.renderOtherInputsGroup = function () {
+            return (React.createElement(ComponentsGroup, { title: 'Прочие поля', theme: _this.theme },
+                React.createElement(CurrencyInputPlayground, null),
+                React.createElement(FxInputPlayground, null),
+                React.createElement(DatePickerPlayground, null)));
+        };
+        _this.renderSwitchersGroup = function () {
+            return (React.createElement(ComponentsGroup, { title: 'Переключатели', theme: _this.theme },
+                React.createElement(SwitcherPlayground, null)));
+        };
+        _this.renderControlsGroup = function () {
+            return (React.createElement(ComponentsGroup, { title: 'Радио, чекбоксы', theme: _this.theme },
+                React.createElement(Gapped, { verticalAlign: 'top', gap: 60 },
+                    React.createElement(CheckboxPlayground, null),
+                    React.createElement(RadioPlayground, null),
+                    React.createElement(TogglePlayground, null))));
+        };
+        _this.renderHintsGroup = function () {
+            return (React.createElement(ComponentsGroup, { title: 'Тултип', theme: _this.theme },
+                React.createElement(HintPlayground, null)));
+        };
+        _this.renderTooltip = function () {
+            var tooltipContent = function () { return (React.createElement("div", { className: styles.tooltipContent() }, 'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно')); };
+            return (React.createElement(ComponentsGroup, { title: 'Тултип', theme: _this.theme },
+                React.createElement(Tooltip, { render: tooltipContent, pos: "right middle", trigger: 'opened', disableAnimations: true },
+                    React.createElement(Link, { icon: React.createElement(QuestionCircleIcon16Regular, null) }))));
+        };
+        _this.renderPaging = function () {
+            return (React.createElement(ComponentsGroup, { title: 'Пейджинг', theme: _this.theme },
+                React.createElement(PagingPlayground, null)));
+        };
+        _this.renderFileUploader = function () {
+            return (React.createElement(ComponentsGroup, { title: 'FileUploader', theme: _this.theme },
+                React.createElement(FileUploader, { multiple: true })));
+        };
+        _this.renderStickyStopElement = function () {
+            return React.createElement("div", { ref: _this.stopEl, style: { height: 50 } });
+        };
+        _this.getStickyStop = function () { return _this.stopEl.current; };
+        return _this;
+    }
+    Playground.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
+    Playground.prototype.renderMain = function () {
+        var wrapperClassName = cx(styles.playground(), styles.playgroundWrapper(this.theme));
+        return (React.createElement("div", { className: wrapperClassName },
+            React.createElement(Gapped, { vertical: true, gap: 50 },
+                this.renderTabsGroup(),
+                this.renderSizesGroup(),
+                this.renderLinksGroup(),
+                this.renderButtonsGroup(),
+                this.renderInputsGroup(),
+                this.renderOtherInputsGroup(),
+                this.renderTokenInputsGroup(),
+                this.renderSwitchersGroup(),
+                this.renderControlsGroup()),
+            this.renderStickyStopElement(),
+            React.createElement(Gapped, { vertical: true, gap: 50 },
+                this.renderHintsGroup(),
+                this.renderTooltip(),
+                this.renderPaging(),
+                this.renderFileUploader())));
+    };
+    Playground.prototype.renderTabs = function () {
+        var _a;
+        var _b = this.props, onThemeChange = _b.onThemeChange, onEditLinkClick = _b.onEditLinkClick;
+        var tabsOuterWrapperStyle = { background: this.theme.bgDefault, marginTop: 36 };
+        var tabsOuterWrapperClass = cx((_a = {},
+            _a[styles.tabsWrapper(this.theme)] = true,
+            _a[styles.stickyTabsWrapper(this.theme)] = useSticky,
+            _a));
+        return (React.createElement("div", { style: tabsOuterWrapperStyle, className: tabsOuterWrapperClass },
+            React.createElement(Gapped, { gap: 40 },
+                React.createElement(Tabs, { value: this.getCurrentTab(), onValueChange: onThemeChange, vertical: false },
+                    React.createElement("div", { className: styles.tabsInnerWrapper(this.theme) },
+                        React.createElement(Tabs.Tab, { id: ThemeType.LightTheme, "data-tab-id": ThemeType.LightTheme }, "\u0421\u0432\u0435\u0442\u043B\u0430\u044F \u0442\u0435\u043C\u0430"),
+                        React.createElement(Tabs.Tab, { id: ThemeType.DarkTheme, "data-tab-id": ThemeType.DarkTheme }, "\u0422\u0451\u043C\u043D\u0430\u044F \u0442\u0435\u043C\u0430"))),
+                React.createElement(Link, { onClick: onEditLinkClick }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443"))));
+    };
+    return Playground;
+}(React.Component));
+export { Playground };
+//# sourceMappingURL=Playground.js.map

package/internal/ThemePlayground/Playground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Playground.js","sourceRoot":"","sources":["../../../internal/ThemePlayground/Playground.tsx"],"names":[],"mappings":"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"}

package/internal/ThemePlayground/Playground.styles.d.ts

@@ -1,22 +1,23 @@
-export declare const jsStyles: {
-    playground(): string;
-    title(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    componentsGroup(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    sidePageBody(): string;
-    variable(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    variableName(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    deprecated(): string;
-    colorIcon(): string;
-    baseLinkWrapper(): string;
-    linkRoot(): string;
-    baseVariableRoot(): string;
-    loaderWrapper(): string;
-    loader(): string;
-    tabsWrapper(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    tooltipContent(): string;
-    stickyTabsWrapper(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    tabsInnerWrapper(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    playgroundWrapper(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    editorHeaderWrapper(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    editorGroupHeader(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-};
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const styles: {
+    playground(): string;
+    title(t: Theme): string;
+    componentsGroup(t: Theme): string;
+    sidePageBody(): string;
+    variable(t: Theme): string;
+    variableName(t: Theme): string;
+    deprecated(): string;
+    colorIcon(): string;
+    baseLinkWrapper(): string;
+    linkRoot(): string;
+    baseVariableRoot(): string;
+    loaderWrapper(): string;
+    loader(): string;
+    tabsWrapper(t: Theme): string;
+    tooltipContent(): string;
+    stickyTabsWrapper(t: Theme): string;
+    tabsInnerWrapper(t: Theme): string;
+    playgroundWrapper(t: Theme): string;
+    editorHeaderWrapper(t: Theme): string;
+    editorGroupHeader(t: Theme): string;
+};

package/internal/ThemePlayground/Playground.styles.js

@@ -0,0 +1,69 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css, memoizeStyle } from '../../lib/theming/Emotion.js';
+export var styles = memoizeStyle({
+    playground: function () {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin: 0 -24px;\n      padding: 0 24px;\n      border-radius: 8px;\n    "], ["\n      margin: 0 -24px;\n      padding: 0 24px;\n      border-radius: 8px;\n    "])));
+    },
+    title: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 110px;\n      color: ", ";\n    "], ["\n      width: 110px;\n      color: ", ";\n    "])), t.textColorDefault);
+    },
+    componentsGroup: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      max-width: 700px;\n      color: ", ";\n    "], ["\n      max-width: 700px;\n      color: ", ";\n    "])), t.textColorDefault);
+    },
+    sidePageBody: function () {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding: 0 30px 30px;\n    "], ["\n      padding: 0 30px 30px;\n    "])));
+    },
+    variable: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      margin-bottom: 16px;\n\n      &:focus {\n        outline: 1px solid ", ";\n        outline-offset: 8px;\n      }\n    "], ["\n      display: flex;\n      align-items: center;\n      margin-bottom: 16px;\n\n      &:focus {\n        outline: 1px solid ", ";\n        outline-offset: 8px;\n      }\n    "])), t.borderColorFocus);
+    },
+    variableName: function (t) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: 250px;\n      position: relative;\n      z-index: 1;\n      line-height: 34px;\n      color: ", ";\n      flex: 1 1 auto;\n    "], ["\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: 250px;\n      position: relative;\n      z-index: 1;\n      line-height: 34px;\n      color: ", ";\n      flex: 1 1 auto;\n    "])), t.textColorDefault);
+    },
+    deprecated: function () {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      text-decoration: line-through;\n    "], ["\n      text-decoration: line-through;\n    "])));
+    },
+    colorIcon: function () {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      height: 16px;\n      width: 16px;\n    "], ["\n      height: 16px;\n      width: 16px;\n    "])));
+    },
+    baseLinkWrapper: function () {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-left: auto;\n    "], ["\n      margin-left: auto;\n    "])));
+    },
+    linkRoot: function () {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      position: relative;\n      z-index: 1;\n    "], ["\n      position: relative;\n      z-index: 1;\n    "])));
+    },
+    baseVariableRoot: function () {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      position: relative;\n      z-index: 1;\n      width: 240px;\n      display: flex;\n    "], ["\n      position: relative;\n      z-index: 1;\n      width: 240px;\n      display: flex;\n    "])));
+    },
+    loaderWrapper: function () {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      width: 500px;\n    "], ["\n      width: 500px;\n    "])));
+    },
+    loader: function () {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      height: 300px;\n      margin: auto;\n    "], ["\n      height: 300px;\n      margin: auto;\n    "])));
+    },
+    tabsWrapper: function (t) {
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      position: relative;\n      color: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 1px;\n        width: 100%;\n        z-index: -1;\n      }\n    "], ["\n      position: relative;\n      color: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 1px;\n        width: 100%;\n        z-index: -1;\n      }\n    "])), t.textColorDefault);
+    },
+    tooltipContent: function () {
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      width: 210px;\n    "], ["\n      width: 210px;\n    "])));
+    },
+    stickyTabsWrapper: function (t) {
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      &:after {\n        box-shadow: 0 2px 10px 0px ", ";\n      }\n    "], ["\n      &:after {\n        box-shadow: 0 2px 10px 0px ", ";\n      }\n    "])), t.textColorDefault);
+    },
+    tabsInnerWrapper: function (t) {
+        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.textColorDefault);
+    },
+    playgroundWrapper: function (t) {
+        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.bgDefault);
+    },
+    editorHeaderWrapper: function (t) {
+        return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.textColorDefault);
+    },
+    editorGroupHeader: function (t) {
+        return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.textColorDefault);
+    },
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
+//# sourceMappingURL=Playground.styles.js.map

package/internal/ThemePlayground/Playground.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Playground.styles.js","sourceRoot":"","sources":["../../../internal/ThemePlayground/Playground.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGjE,MAAM,CAAC,IAAM,MAAM,GAAG,YAAY,CAAC;IACjC,UAAU;QACR,OAAO,GAAG,sJAAA,mFAIT,KAAC;IACJ,CAAC;IAED,KAAK,YAAC,CAAQ;QACZ,OAAO,GAAG,oHAAA,sCAEC,EAAkB,SAC5B,KADU,CAAC,CAAC,gBAAgB,EAC3B;IACJ,CAAC;IAED,eAAe,YAAC,CAAQ;QACtB,OAAO,GAAG,wHAAA,0CAEC,EAAkB,SAC5B,KADU,CAAC,CAAC,gBAAgB,EAC3B;IACJ,CAAC;IAED,YAAY;QACV,OAAO,GAAG,wGAAA,qCAET,KAAC;IACJ,CAAC;IAED,QAAQ,YAAC,CAAQ;QACf,OAAO,GAAG,qPAAA,gIAMe,EAAkB,gDAG1C,KAHwB,CAAC,CAAC,gBAAgB,EAGzC;IACJ,CAAC;IAED,YAAY,YAAC,CAAQ;QACnB,OAAO,GAAG,wSAAA,mMAQC,EAAkB,gCAE5B,KAFU,CAAC,CAAC,gBAAgB,EAE3B;IACJ,CAAC;IAED,UAAU;QACR,OAAO,GAAG,iHAAA,8CAET,KAAC;IACJ,CAAC;IAED,SAAS;QACP,OAAO,GAAG,oHAAA,iDAGT,KAAC;IACJ,CAAC;IAED,eAAe;QACb,OAAO,GAAG,qGAAA,kCAET,KAAC;IACJ,CAAC;IAED,QAAQ;QACN,OAAO,GAAG,2HAAA,sDAGT,KAAC;IACJ,CAAC;IAED,gBAAgB;QACd,OAAO,GAAG,sKAAA,iGAKT,KAAC;IACJ,CAAC;IAED,aAAa;QACX,OAAO,GAAG,kGAAA,6BAET,KAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,GAAG,wHAAA,mDAGT,KAAC;IACJ,CAAC;IAED,WAAW,YAAC,CAAQ;QAClB,OAAO,GAAG,oTAAA,4CAEC,EAAkB,iMAW5B,KAXU,CAAC,CAAC,gBAAgB,EAW3B;IACJ,CAAC;IAED,cAAc;QACZ,OAAO,GAAG,kGAAA,6BAET,KAAC;IACJ,CAAC;IAED,iBAAiB,YAAC,CAAQ;QACxB,OAAO,GAAG,iJAAA,wDAEuB,EAAkB,kBAElD,KAFgC,CAAC,CAAC,gBAAgB,EAEjD;IACJ,CAAC;IACD,gBAAgB,YAAC,CAAQ;QACvB,OAAO,GAAG,iGAAA,iBACC,EAAkB,SAC5B,KADU,CAAC,CAAC,gBAAgB,EAC3B;IACJ,CAAC;IACD,iBAAiB,YAAC,CAAQ;QACxB,OAAO,GAAG,sGAAA,sBACM,EAAW,SAC1B,KADe,CAAC,CAAC,SAAS,EACzB;IACJ,CAAC;IACD,mBAAmB,YAAC,CAAQ;QAC1B,OAAO,GAAG,iGAAA,iBACC,EAAkB,SAC5B,KADU,CAAC,CAAC,gBAAgB,EAC3B;IACJ,CAAC;IACD,iBAAiB,YAAC,CAAQ;QACxB,OAAO,GAAG,iGAAA,iBACC,EAAkB,SAC5B,KADU,CAAC,CAAC,gBAAgB,EAC3B;IACJ,CAAC;CACF,CAAC,CAAC"}

package/internal/ThemePlayground/RadioPlayground.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const RadioPlayground: () => JSX.Element;
+import React from 'react';
+export declare const RadioPlayground: () => React.JSX.Element;

package/internal/ThemePlayground/RadioPlayground.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Gapped } from '../../components/Gapped/index.js';
+import { Radio } from '../../components/Radio/index.js';
+import { getComponentsFromPropsList } from './helpers.js';
+var propsList = [
+    { value: '', children: 'Default', checked: false },
+    { value: '', children: 'Checked' },
+    { value: '', children: 'Disabled', disabled: true },
+    { value: '', children: 'Focused', focused: true },
+    { value: '', children: 'Error', error: true },
+    { value: '', children: 'Warning', warning: true },
+];
+export var RadioPlayground = function () {
+    return (React.createElement(Gapped, { gap: 0, vertical: true }, getComponentsFromPropsList(React.createElement(Radio, { value: '', checked: true }), propsList)));
+};
+//# sourceMappingURL=RadioPlayground.js.map

package/internal/ThemePlayground/RadioPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioPlayground.js","sourceRoot":"","sources":["../../../internal/ThemePlayground/RadioPlayground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAE1D,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AAExD,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAE1D,IAAM,SAAS,GAA8B;IAC3C,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE;IAClD,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;IAClC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE;IACnD,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE;IACjD,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;IAC7C,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE;CAClD,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG;IAC7B,OAAO,CACL,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,UACrB,0BAA0B,CAAC,oBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,EAAE,OAAO,SAAG,EAAE,SAAS,CAAC,CAC7D,CACV,CAAC;AACJ,CAAC,CAAC"}

package/internal/ThemePlayground/SelectPlayground.d.ts

@@ -1,12 +1,15 @@
-import React from 'react';
-import { SelectProps } from '../../components/Select';
-export declare class SelectPlayground extends React.Component<SelectProps<string, string>, {
-    value: string | undefined;
-}> {
-    state: {
-        value: string;
-    };
-    private readonly selectItems;
-    render(): JSX.Element;
-    private handleChange;
-}
+import React from 'react';
+import type { SelectProps } from '../../components/Select/index.js';
+type SelectPlaygroundValue = string;
+type SelectPlaygroundItem = string;
+type SelectPlaygroundProps = SelectProps<SelectPlaygroundValue, SelectPlaygroundItem>;
+interface SelectPlaygroundState {
+    value: string;
+}
+export declare class SelectPlayground extends React.Component<SelectPlaygroundProps> {
+    state: SelectPlaygroundState;
+    private readonly selectItems;
+    render(): React.JSX.Element;
+    private handleChange;
+}
+export {};

package/internal/ThemePlayground/SelectPlayground.js

@@ -0,0 +1,54 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+import React from 'react';
+import { Select } from '../../components/Select/index.js';
+var SelectPlayground = /** @class */ (function (_super) {
+    __extends(SelectPlayground, _super);
+    function SelectPlayground() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            value: capitalize(_this.props.size),
+        };
+        _this.selectItems = ['Small', 'Medium', 'Large'];
+        _this.handleChange = function (value) {
+            _this.setState({
+                value: value,
+            });
+        };
+        return _this;
+    }
+    SelectPlayground.prototype.render = function () {
+        return (React.createElement(Select, __assign({}, this.props, { value: this.state.value, items: this.selectItems, onValueChange: this.handleChange })));
+    };
+    return SelectPlayground;
+}(React.Component));
+export { SelectPlayground };
+var capitalize = function (input) {
+    if (input === void 0) { input = ''; }
+    return input.charAt(0).toUpperCase() + input.slice(1);
+};
+//# sourceMappingURL=SelectPlayground.js.map

package/internal/ThemePlayground/SelectPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPlayground.js","sourceRoot":"","sources":["../../../internal/ThemePlayground/SelectPlayground.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAQ1D;IAAsC,oCAAsC;IAA5E;;QACS,WAAK,GAA0B;YACpC,KAAK,EAAE,UAAU,CAAC,KAAI,CAAC,KAAK,CAAC,IAAI,CAAC;SACnC,CAAC;QACe,iBAAW,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAapD,kBAAY,GAAG,UAAC,KAAa;YACnC,KAAI,CAAC,QAAQ,CAAC;gBACZ,KAAK,OAAA;aACN,CAAC,CAAC;QACL,CAAC,CAAC;;IACJ,CAAC;IAhBQ,iCAAM,GAAb;QACE,OAAO,CACL,oBAAC,MAAM,eACD,IAAI,CAAC,KAAK,IACd,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,aAAa,EAAE,IAAI,CAAC,YAAY,IAChC,CACH,CAAC;IACJ,CAAC;IAOH,uBAAC;AAAD,CAAC,AAtBD,CAAsC,KAAK,CAAC,SAAS,GAsBpD;;AAED,IAAM,UAAU,GAAG,UAAC,KAAU;IAAV,sBAAA,EAAA,UAAU;IAC5B,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACxD,CAAC,CAAC"}

package/internal/ThemePlayground/ShowcaseGroup.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-interface ShowcaseGroupProps {
-    title?: string;
-}
-export declare const ShowcaseGroup: (props: ShowcaseGroupProps) => JSX.Element;
-export {};
+import React from 'react';
+interface ShowcaseGroupProps {
+    title?: string;
+}
+export declare const ShowcaseGroup: (props: ShowcaseGroupProps) => React.JSX.Element;
+export {};

package/internal/ThemePlayground/ShowcaseGroup.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Checkbox } from '../../components/Checkbox/index.js';
+import { Gapped } from '../../components/Gapped/index.js';
+import { Button } from '../../components/Button/index.js';
+import { Input } from '../../components/Input/index.js';
+import { Toggle } from '../../components/Toggle/index.js';
+import { Radio } from '../../components/Radio/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+export var ShowcaseGroup = function (props) {
+    var theme = React.useContext(ThemeContext);
+    return (React.createElement("div", null,
+        props.title && (React.createElement("div", { style: {
+                fontSize: '21px',
+                lineHeight: '1.2',
+                margin: '16px 0',
+                color: theme.textColorDefault,
+            } }, props.title)),
+        React.createElement(Gapped, { gap: 10 },
+            React.createElement(Button, null, "Button"),
+            React.createElement(Input, null),
+            React.createElement(Toggle, null),
+            React.createElement(Radio, { value: '', checked: true }, "Radio"),
+            React.createElement(Checkbox, { checked: true }, "Checkbox"))));
+};
+//# sourceMappingURL=ShowcaseGroup.js.map

package/internal/ThemePlayground/ShowcaseGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowcaseGroup.js","sourceRoot":"","sources":["../../../internal/ThemePlayground/ShowcaseGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAKjE,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,KAAyB;IACrD,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE7C,OAAO,CACL;QACG,KAAK,CAAC,KAAK,IAAI,CACd,6BACE,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,KAAK;gBACjB,MAAM,EAAE,QAAQ;gBAChB,KAAK,EAAE,KAAK,CAAC,gBAAgB;aAC9B,IAEA,KAAK,CAAC,KAAK,CACR,CACP;QACD,oBAAC,MAAM,IAAC,GAAG,EAAE,EAAE;YACb,oBAAC,MAAM,iBAAgB;YACvB,oBAAC,KAAK,OAAG;YACT,oBAAC,MAAM,OAAG;YACV,oBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,EAAE,OAAO,kBAEjB;YACR,oBAAC,QAAQ,IAAC,OAAO,qBAAoB,CAC9B,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/internal/ThemePlayground/SizesGroup.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SizeProp } from '../../lib/types/props.js';
+export interface SizesGroupProps {
+    size: SizeProp;
+}
+export declare const SizesGroup: ({ size }: SizesGroupProps) => React.JSX.Element;

package/internal/ThemePlayground/SizesGroup.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IdCardIcon16Regular } from '@skbkontur/icons/icons/IdCardIcon/IdCardIcon16Regular.js';
+import { AttachLinkIcon16Regular } from '@skbkontur/icons/icons/AttachLinkIcon/AttachLinkIcon16Regular.js';
+import { Input } from '../../components/Input/index.js';
+import { Gapped } from '../../components/Gapped/index.js';
+import { Button } from '../../components/Button/index.js';
+import { SelectPlayground } from './SelectPlayground.js';
+export var SizesGroup = function (_a) {
+    var size = _a.size;
+    return (React.createElement(Gapped, { wrap: true, verticalAlign: "middle", gap: 10 },
+        React.createElement(SelectPlayground, { width: 120, size: size }),
+        React.createElement(Input, { rightIcon: React.createElement(IdCardIcon16Regular, null), placeholder: 'Text value', size: size }),
+        React.createElement(Button, { width: 120, size: size }, "Button"),
+        React.createElement(Button, { icon: React.createElement(AttachLinkIcon16Regular, null), use: 'link', size: size }, "Button like a link")));
+};
+//# sourceMappingURL=SizesGroup.js.map

package/internal/ThemePlayground/SizesGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizesGroup.js","sourceRoot":"","sources":["../../../internal/ThemePlayground/SizesGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAC/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,kEAAkE,CAAC;AAE3G,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAG1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAMzD,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAAyB;QAAvB,IAAI,UAAA;IAAwB,OAAA,CACvD,oBAAC,MAAM,IAAC,IAAI,QAAC,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE;QACzC,oBAAC,gBAAgB,IAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,GAAI;QAC5C,oBAAC,KAAK,IAAC,SAAS,EAAE,oBAAC,mBAAmB,OAAG,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAI;QACpF,oBAAC,MAAM,IAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,aAErB;QACT,oBAAC,MAAM,IAAC,IAAI,EAAE,oBAAC,uBAAuB,OAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,yBAEzD,CACF,CACV;AAXwD,CAWxD,CAAC"}

package/internal/ThemePlayground/SwitcherPlayground.d.ts

@@ -1,15 +1,16 @@
-import React from 'react';
-export declare class SwitcherPlayground extends React.Component<{
-    items?: string[];
-    disabled?: boolean;
-}, {
-    value: string;
-    error: boolean;
-}> {
-    state: {
-        value: string;
-        error: boolean;
-    };
-    render(): JSX.Element;
-    private handleValueChange;
-}
+import React from 'react';
+import type { SwitcherProps } from '../../components/Switcher/index.js';
+interface SwitcherPlaygroundProps {
+    items?: SwitcherProps['items'];
+    disabled?: boolean;
+}
+interface SwitcherPlaygroundState {
+    value: string;
+    error: boolean;
+}
+export declare class SwitcherPlayground extends React.Component<SwitcherPlaygroundProps> {
+    state: SwitcherPlaygroundState;
+    render(): React.JSX.Element;
+    private handleValueChange;
+}
+export {};

package/internal/ThemePlayground/SwitcherPlayground.js

@@ -0,0 +1,49 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+import React from 'react';
+import { Switcher } from '../../components/Switcher/index.js';
+var defaultItems = ['Default', 'Error'];
+var SwitcherPlayground = /** @class */ (function (_super) {
+    __extends(SwitcherPlayground, _super);
+    function SwitcherPlayground() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            value: '',
+            error: false,
+        };
+        _this.handleValueChange = function (value) {
+            _this.setState({ value: value, error: value === 'Error' });
+        };
+        return _this;
+    }
+    SwitcherPlayground.prototype.render = function () {
+        return (React.createElement(Switcher, __assign({ value: this.state.value, onValueChange: this.handleValueChange, items: this.props.items || defaultItems, error: this.state.error }, this.props)));
+    };
+    return SwitcherPlayground;
+}(React.Component));
+export { SwitcherPlayground };
+//# sourceMappingURL=SwitcherPlayground.js.map

package/internal/ThemePlayground/SwitcherPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitcherPlayground.js","sourceRoot":"","sources":["../../../internal/ThemePlayground/SwitcherPlayground.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,IAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AAU1C;IAAwC,sCAAwC;IAAhF;;QACS,WAAK,GAA4B;YACtC,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,KAAK;SACb,CAAC;QAcM,uBAAiB,GAAG,UAAC,KAAa;YACxC,KAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,OAAA,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC;;IACJ,CAAC;IAfQ,mCAAM,GAAb;QACE,OAAO,CACL,oBAAC,QAAQ,aACP,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,aAAa,EAAE,IAAI,CAAC,iBAAiB,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,YAAY,EACvC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACnB,IAAI,CAAC,KAAK,EACd,CACH,CAAC;IACJ,CAAC;IAKH,yBAAC;AAAD,CAAC,AArBD,CAAwC,KAAK,CAAC,SAAS,GAqBtD"}