@egov3/system-design 1.0.31 → 1.0.33

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

@@ -15,5 +15,7 @@ export interface IInputFieldProps {
     id: string;
     labelText?: string;
     ariaLabel: string;
+    focused?: boolean;
+    setFocused?: (val: boolean) => void;
 }
-export declare const InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: IInputFieldProps) => React.ReactNode;
+export declare const InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, focused, setFocused, }: IInputFieldProps) => React.ReactNode;

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

@@ -13,6 +13,8 @@ export interface ICustomRadioButtonProps {
 export interface IRadioGroupProps {
     RadioGroupItems: RadioGroupItem[];
     invokeCustomOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    setSelectedOption: React.Dispatch<React.SetStateAction<string>>;
+    selectedOption: string;
 }
 export declare const CustomRadioButton: ({ label, name, checked, onChange, value, }: ICustomRadioButtonProps) => React.JSX.Element;
-export declare const RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, }: IRadioGroupProps) => React.JSX.Element;
+export declare const RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, setSelectedOption, selectedOption, }: IRadioGroupProps) => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import React, { FC } from "react";
+type FontClass = "Heading1" | "Heading3" | "Subtitles3" | "Body1Medium" | "Body1Regular" | "Body2Medium" | "Body2Regular" | "Body3Regular" | "Caption1Medium" | "Caption1Regular" | "Caption1Semibold" | "Caption2Medium" | "Caption2Regular";
+export interface ITypographyProps extends React.HTMLAttributes<HTMLElement> {
+    tag: keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>;
+    fontClass?: FontClass;
+}
+export declare const Typography: FC<ITypographyProps>;
+export {};

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export declare const Сomponents: {
     Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: import("./Button").IButtonProps) => import("react").JSX.Element;
-    InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: import("./InputField").IInputFieldProps) => import("react").ReactNode;
-    RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, }: import("./RadioGroup").IRadioGroupProps) => import("react").JSX.Element;
+    InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, focused, setFocused, }: import("./InputField").IInputFieldProps) => import("react").ReactNode;
+    RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, setSelectedOption, selectedOption, }: import("./RadioGroup").IRadioGroupProps) => import("react").JSX.Element;
     CustomRadioButton: ({ label, name, checked, onChange, value, }: import("./RadioGroup").ICustomRadioButtonProps) => import("react").JSX.Element;
     Accordion: ({ open, setOpen, children, title, }: import("./Accordion").IAccordionProps) => import("react").JSX.Element;
     RadioToggle: ({ lock, setLock }: import("./RadioToggle").IRadioToggleProps) => import("react").JSX.Element;

package/dist/cjs/index.d.ts

@@ -2,8 +2,8 @@
 declare const SystemDesign: {
     Сomponents: {
         Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: import("./components/Button").IButtonProps) => import("react").JSX.Element;
-        InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: import("./components/InputField").IInputFieldProps) => import("react").ReactNode;
-        RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, }: import("./components/RadioGroup").IRadioGroupProps) => import("react").JSX.Element;
+        InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, focused, setFocused, }: import("./components/InputField").IInputFieldProps) => import("react").ReactNode;
+        RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, setSelectedOption, selectedOption, }: import("./components/RadioGroup").IRadioGroupProps) => import("react").JSX.Element;
         CustomRadioButton: ({ label, name, checked, onChange, value, }: import("./components/RadioGroup").ICustomRadioButtonProps) => import("react").JSX.Element;
         Accordion: ({ open, setOpen, children, title, }: import("./components/Accordion").IAccordionProps) => import("react").JSX.Element;
         RadioToggle: ({ lock, setLock }: import("./components/RadioToggle").IRadioToggleProps) => import("react").JSX.Element;

package/dist/cjs/index.js

@@ -2781,7 +2781,7 @@ if (process.env.NODE_ENV === 'production') {
 
 var React = react.exports;
 
-var ClassNamesFn = function () {
+var CombineClassNames = function () {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         args[_i] = arguments[_i];
@@ -2831,7 +2831,7 @@ var Accordion = function (_a) {
                     transform: !open ? "rotate(0.5turn)" : "none",
                 } },
                 React.createElement("path", { d: "M15.8346 7.5L10.0013 13.3333L4.16797 7.5", stroke: "#758393" }))),
-        React.createElement("div", { "data-testid": "Accordion_CONTENT", className: ClassNamesFn(styles$4.accordionContent, !open && styles$4["accordionContent--hidden"]) }, children)));
+        React.createElement("div", { "data-testid": "Accordion_CONTENT", className: CombineClassNames(styles$4.accordionContent, !open && styles$4["accordionContent--hidden"]) }, children)));
 };
 
 var css_248z$3 = "/* Headings/Heading 1 */\n/* Headings/Heading 3 */\n/* Subtitles/Subtitle 3 */\n/* Body/Body 1, Medium */\n/* Body/Body 1, Regular */\n/* Body/Body 2, Medium */\n/* Body/Body 2, Regular */\n/* Body/Body 3, Regular */\n/* Caption/Caption 1, Medium */\n/* Caption/Caption 1, Regular */\n/* Caption/Caption 1, Semibold */\n/* Caption/Caption 2, Medium */\n/* Caption/Caption 2, Regular */\n.button-module_button__WDVlB {\n  border: none;\n  transition: background-color 0.2s ease;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n.button-module_btn-default__upnYC {\n  color: #fff;\n  background-color: #0581da;\n}\n\n.button-module_btn-default--disabled__tlBX8 {\n  color: #929daa;\n  background-color: #c5ccd3;\n}\n\n.button-module_btn-tinted__hE7vU {\n  color: #0581da;\n  background-color: #e1f0fb;\n}\n\n.button-module_btn-tinted--disabled__KYbnK {\n  color: #9bcdf0;\n  background-color: #e1f0fb;\n}\n\n.button-module_btn-secondary__C8isQ {\n  color: #000;\n  background-color: #e3e7eb;\n}\n\n.button-module_btn-secondary--disabled__2Y-Q3 {\n  color: #758393;\n  background-color: #e3e7eb;\n}\n\n.button-module_btn-default__upnYC:hover {\n  background-color: #1a9cfa;\n}\n\n.button-module_btn-tinted__hE7vU:hover {\n  background-color: #b2d9f5;\n}\n\n.button-module_btn-secondary__C8isQ:hover {\n  background-color: #c5ccd3;\n}\n\n.button-module_btn--mini__7zJ2M {\n  gap: 4px;\n  padding: 6px 12px;\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 120% */\n}\n\n.button-module_btn--small__IGPOx {\n  gap: 8px;\n  padding: 8px 16px;\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n}\n\n.button-module_btn--medium__WaM0q {\n  gap: 8px;\n  padding: 8px 20px;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px; /* 142.857% */\n}\n\n.button-module_btn--large__qrwDc {\n  gap: 8px;\n  padding: 14px 24px;\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n}\n\n.button-module_btn-square--mini__Ak5mN {\n  border-radius: 4px;\n}\n\n.button-module_btn-square--small__O58ux {\n  border-radius: 6px;\n}\n\n.button-module_btn-square--medium__xNiKL {\n  border-radius: 10px;\n}\n\n.button-module_btn-square--large__9JUii {\n  border-radius: 12px;\n}\n\n.button-module_btn-rounded--mini__7ZTyL {\n  border-radius: 32px;\n}\n\n.button-module_btn-rounded--small__KJhsk {\n  border-radius: 32px;\n}\n\n.button-module_btn-rounded--medium__wT5Uc {\n  border-radius: 32px;\n}\n\n.button-module_btn-rounded--large__46yFD {\n  border-radius: 40px;\n}";
@@ -2840,7 +2840,7 @@ styleInject(css_248z$3);
 
 var Button = function (_a) {
     var onClick = _a.onClick, children = _a.children, style = _a.style, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.isRounded, isRounded = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? 'Кнопка' : _g;
-    return (React.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className: ClassNamesFn(styles$3["btn--".concat(size)], isRounded
+    return (React.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className: CombineClassNames(styles$3["btn--".concat(size)], isRounded
             ? styles$3["btn-rounded--".concat(size)]
             : styles$3["btn-square--".concat(size)], disabled ? styles$3["btn-".concat(variant, "--disabled")] : styles$3["btn-".concat(variant)], styles$3.button, className), style: style }, children));
 };
@@ -2899,9 +2899,8 @@ var ClearIcon = function (_a) {
 };
 
 var InputField = function (_a) {
-    var onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onEnterPress = _a.onEnterPress, _b = _a.value, value = _b === void 0 ? "" : _b, inputLeftIcon = _a.inputLeftIcon, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, style = _a.style, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "text" : _f, id = _a.id, _g = _a.labelText, labelText = _g === void 0 ? "" : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? "" : _h;
-    var _j = react.exports.useState(false), focused = _j[0], setFocused = _j[1];
-    return (React.createElement("div", { "data-testid": "InputField_MAIN", className: ClassNamesFn(styles$2[labelText.length ? "inputContainerLabeled" : "inputContainer"], className, focused ? styles$2["input--onfocus"] : undefined, styles$2["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())]), style: style },
+    var onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onEnterPress = _a.onEnterPress, _b = _a.value, value = _b === void 0 ? "" : _b, inputLeftIcon = _a.inputLeftIcon, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, style = _a.style, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "text" : _f, id = _a.id, _g = _a.labelText, labelText = _g === void 0 ? "" : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? "" : _h, _j = _a.focused, focused = _j === void 0 ? false : _j, _k = _a.setFocused, setFocused = _k === void 0 ? function () { } : _k;
+    return (React.createElement("div", { "data-testid": "InputField_MAIN", className: CombineClassNames(styles$2[labelText.length ? "inputContainerLabeled" : "inputContainer"], className, focused ? styles$2["input--onfocus"] : undefined, styles$2["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())]), style: style },
         labelText.length > 0 && (React.createElement("label", { htmlFor: id, "data-testid": "InputField_LABEL" }, labelText)),
         inputLeftIcon,
         React.createElement("input", { "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles$2.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: function () {
@@ -2940,8 +2939,7 @@ var CustomRadioButton = function (_a) {
         React.createElement("span", { "data-testid": "RadioGroupItem_TEXT", className: styles$1.radioBtnText }, label)));
 };
 var RadioGroup = function (_a) {
-    var RadioGroupItems = _a.RadioGroupItems, invokeCustomOnChange = _a.invokeCustomOnChange;
-    var _b = react.exports.useState(""), selectedOption = _b[0], setSelectedOption = _b[1];
+    var RadioGroupItems = _a.RadioGroupItems, invokeCustomOnChange = _a.invokeCustomOnChange, setSelectedOption = _a.setSelectedOption, selectedOption = _a.selectedOption;
     var handleChange = function (event) {
         setSelectedOption(event.target.value);
         invokeCustomOnChange(event);
@@ -2959,7 +2957,7 @@ var RadioToggle = function (_a) {
     return (React.createElement("button", { "data-testid": "RadioToggle_BUTTON", "aria-pressed": lock, "aria-label": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F", onClick: function () {
             setLock(!lock);
         } },
-        React.createElement("div", { "data-testid": "RadioToggle_WRAP", className: ClassNamesFn(styles.wrap, lock && styles.wrapLock) },
+        React.createElement("div", { "data-testid": "RadioToggle_WRAP", className: CombineClassNames(styles.wrap, lock && styles.wrapLock) },
             React.createElement("div", { "data-testid": "RadioToggle_ROUND", className: styles.round }))));
 };