@invoicebox/ui 0.1.0-alpha.318 → 0.1.0-alpha.319

package/dist/esm/components/form/PhoneInput/index.stories.js

@@ -77,6 +77,48 @@ export var MultiCountry = {
     }, {
       label: 'Узбекистан',
       value: 'UZB'
+    }, {
+      label: 'Китай',
+      value: 'CHN'
+    }, {
+      label: 'Испания',
+      value: 'ESP'
+    }, {
+      label: 'Великобритания',
+      value: 'GBR'
+    }, {
+      label: 'ОАЭ',
+      value: 'ARE'
+    }, {
+      label: 'Франция',
+      value: 'FRA'
+    }, {
+      label: 'Сербия',
+      value: 'SRB'
+    }, {
+      label: 'Индия',
+      value: 'IND'
+    }, {
+      label: 'Турция',
+      value: 'TUR'
+    }, {
+      label: 'Словения',
+      value: 'SVN'
+    }, {
+      label: 'Словакия',
+      value: 'SVK'
+    }, {
+      label: 'Эквадор',
+      value: 'ECU'
+    }, {
+      label: 'Германия',
+      value: 'DEU'
+    }, {
+      label: 'Австралия',
+      value: 'AUS'
+    }, {
+      label: 'Саудовская Аравия',
+      value: 'SAU'
     }]
   }),
   render: Component

package/dist/esm/components/form/PhoneInput/types.js

@@ -1,3 +1,3 @@
 export var RUS_COUNTRY_CODE = 'RUS';
 export var UNKNOWN_COUNTRY_CODE = 'UNKNOWN';
-export var supportedCountries = [RUS_COUNTRY_CODE, 'BLR', 'AZE', 'ARM', 'KAZ', 'TJK', 'UZB', 'KGZ', UNKNOWN_COUNTRY_CODE];
+export var supportedCountries = [RUS_COUNTRY_CODE, 'BLR', 'AZE', 'ARM', 'KAZ', 'TJK', 'UZB', 'KGZ', 'CHN', 'ESP', 'GBR', 'ARE', 'FRA', 'SRB', 'IND', 'TUR', 'SVN', 'SVK', 'ECU', 'DEU', 'AUS', 'SAU', UNKNOWN_COUNTRY_CODE];

package/dist/esm/components/form/PureInput/index.js

@@ -1,7 +1,7 @@
 var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderRadius", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element", "variant", "renderedValue", "useModernStyles", "id"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useCallback, useId } from 'react';
 import * as S from './styles';
 import { useComponentPalette } from '../../../palette';

package/dist/esm/components/form/PureInput/styles.js

@@ -1,11 +1,12 @@
 import styled from 'styled-components';
+import { reducedMotion } from '../../../utils/reducedMotion';
 import { InputWithTypography } from '../../common/Typography';
 import { typography } from '../../common/Typography/typography';
 export var getPureInputStyled = function getPureInputStyled(component) {
   return styled(component).withConfig({
     displayName: "styles",
     componentId: "sc-1g8ijo6-0"
-  })(["", " resize:none;color:", ";border-radius:", "px;border:none;width:100%;text-overflow:ellipsis;background-color:", ";transition:all 0.2s ease-in-out 0s;box-sizing:border-box;padding-right:", "px;padding-left:", "px;padding-top:", "px;padding-bottom:", "px;outline:1px solid ", ";&::placeholder{color:", ";}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus{transition:background-color 0s 600000s,color 0s 600000s !important;}"], function (_ref) {
+  })(["", " resize:none;color:", ";border-radius:", "px;border:none;width:100%;text-overflow:ellipsis;background-color:", ";transition:all 0.2s ease-in-out 0s;box-sizing:border-box;padding-right:", "px;padding-left:", "px;padding-top:", "px;padding-bottom:", "px;outline:1px solid ", ";&::placeholder{color:", ";}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus{transition:background-color 0s 600000s,color 0s 600000s !important;}", ""], function (_ref) {
     var $variant = _ref.$variant;
     return $variant && typography[$variant];
   }, function (_ref2) {
@@ -36,9 +37,9 @@ export var getPureInputStyled = function getPureInputStyled(component) {
       $hasBorder = _ref9.$hasBorder,
       $palette = _ref9.$palette;
     return !$hasBorder ? 'transparent' : $hasError ? $palette.error : $inFocus ? $palette.borderFocus : $palette.border;
-  }, function (_ref10) {
-    var $palette = _ref10.$palette;
+  }, function (_ref0) {
+    var $palette = _ref0.$palette;
     return $palette.placeholder;
-  });
+  }, reducedMotion);
 };
 export var Wrapper = getPureInputStyled(InputWithTypography);

package/dist/esm/components/form/SearchInput/index.js

@@ -68,7 +68,9 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value: value,
     onFocus: handleFocus,
     onBlur: handleBlur,
-    inFocus: inFocus,
+    inFocus: inFocus
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- проп прокидывается потребителю, решение об автофокусе за ним
+    ,
     autoFocus: autoFocus,
     name: name,
     maxLength: maxLength,

package/dist/esm/components/form/SearchInput/styles.js

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
+import { reducedMotion } from '../../../utils/reducedMotion';
 export var IconWrapper = styled.span.withConfig({
   displayName: "styles__IconWrapper",
   componentId: "sc-1cx3n6g-0"
-})(["position:absolute;right:20px;bottom:", ";transform:translateY(50%);display:flex;align-content:center;justify-content:center;opacity:", ";transition:all 0.2s ease-in-out 0s;color:", ";"], function (_ref) {
+})(["position:absolute;right:20px;bottom:", ";transform:translateY(50%);display:flex;align-content:center;justify-content:center;opacity:", ";transition:all 0.2s ease-in-out 0s;color:", ";", ""], function (_ref) {
   var $useModernStyles = _ref.$useModernStyles;
   return !$useModernStyles ? "calc(50% - 5px)" : '50%';
 }, function (_ref2) {
@@ -11,4 +12,4 @@ export var IconWrapper = styled.span.withConfig({
 }, function (_ref3) {
   var $palette = _ref3.$palette;
   return $palette.icon;
-});
+}, reducedMotion);

package/dist/esm/components/form/Select/components/Input/index.js

@@ -24,7 +24,8 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     required = _ref.required,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
-    id = _ref.id;
+    id = _ref.id,
+    comboboxProps = _ref.comboboxProps;
   var fallbackId = useId();
   var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useInputStyles = useInputStyles({
@@ -65,7 +66,11 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     paddingRight: 52,
     onClick: onClick,
     useModernStyles: useModernStyles
-  }, paddingAndVariantOptions)), /*#__PURE__*/React.createElement(S.IconWrapper, {
+    // с renderedValue PureInput рендерится как div — без tabIndex
+    // он был бы недостижим с клавиатуры
+    ,
+    tabIndex: renderedValue ? 0 : undefined
+  }, comboboxProps, paddingAndVariantOptions)), /*#__PURE__*/React.createElement(S.IconWrapper, {
     $pointerEvents: isShowResetIcon ? 'default' : 'none'
   }, isShowResetIcon ? /*#__PURE__*/React.createElement(ResetButton, {
     onClick: onReset

package/dist/esm/components/form/Select/index.js

@@ -8,7 +8,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import * as S from './styles';
 import { Input } from './components/Input';
 import { useInputFocus } from '../../../hooks/useInputFocus';
@@ -21,9 +21,10 @@ import { Drawer } from '../../common/Drawer';
 import Loader from './components/Loader';
 import { MultipleValue } from './components/MultipleValue';
 import { Checkbox } from '../Checkbox';
+import { ErrorBoundary } from '../../common/ErrorBoundary';
 var MAX_LIST_HEIGHT = 294;
 var OPTION_IDENTIFIER = 'option-identifier';
-export var Select = function Select(props) {
+var SelectInner = function SelectInner(props) {
   var _collapseTags;
   var label = props.label,
     hasError = props.hasError,
@@ -104,12 +105,47 @@ export var Select = function Select(props) {
     return new Set(multipleValue);
   }, [multipleValue]);
   var optionGroups = useOptionGroups(options, groups);
+
+  // Плоский список опций в порядке отрисовки (группы разворачиваются) —
+  // по нему ходит клавиатурная навигация и считаются id для activedescendant
+  var flatOptions = useMemo(function () {
+    return optionGroups.reduce(function (acc, group) {
+      return acc.concat(group.options);
+    }, []);
+  }, [optionGroups]);
+  var optionIndexByValue = useMemo(function () {
+    return new Map(flatOptions.map(function (option, index) {
+      return [option.value, index];
+    }));
+  }, [flatOptions]);
+  var baseId = useId();
+  var listboxId = "".concat(baseId, "-listbox");
+  var getOptionId = function getOptionId(index) {
+    return "".concat(baseId, "-option-").concat(index);
+  };
+
+  // Позиция клавиатурного фокуса в списке (aria-activedescendant)
+  var _useState3 = useState(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
   var handleShow = useCallback(function () {
-    return setIsOpen(true);
-  }, []);
+    setIsOpen(true);
+    // при открытии встаём на выбранную опцию (single), иначе — вне списка
+    setActiveIndex(isMultiple ? -1 : flatOptions.findIndex(function (option) {
+      return option.value === value;
+    }));
+  }, [flatOptions, isMultiple, value]);
   var handleHide = useCallback(function () {
     return setIsOpen(false);
   }, []);
+  useEffect(function () {
+    var _document$getElementB;
+    if (activeIndex < 0) return;
+    (_document$getElementB = document.getElementById("".concat(baseId, "-option-").concat(activeIndex))) === null || _document$getElementB === void 0 || _document$getElementB.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [activeIndex, baseId]);
   var dropdownRef = useRef(null);
   var wrapperRef = useOutsideClick(handleHide, [dropdownRef]);
   var handleFocus = useCallback(function (event) {
@@ -127,8 +163,7 @@ export var Select = function Select(props) {
       return blurHandler(event);
     };
   }, [blurHandler]);
-  var handleSelect = useCallback(function (event) {
-    var newValue = JSON.parse(event.currentTarget.dataset.value);
+  var selectValue = useCallback(function (newValue) {
     if (isMultiple) {
       var next = multipleValue.includes(newValue) ? multipleValue.filter(function (item) {
         return item !== newValue;
@@ -144,6 +179,45 @@ export var Select = function Select(props) {
       delayBlur.current = null;
     }
   }, [handleHide, isMultiple, multipleValue, onChangeMultiple, onChangeSingle]);
+  var handleSelect = useCallback(function (event) {
+    selectValue(JSON.parse(event.currentTarget.dataset.value));
+  }, [selectValue]);
+
+  // Клавиатурная навигация комбобокса — тот же набор клавиш, что в Autocomplete
+  var handleKeyDown = useCallback(function (event) {
+    var count = flatOptions.length;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!isOpen) handleShow();else if (count) setActiveIndex(function (prev) {
+          return (prev + 1) % count;
+        });
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (!isOpen) handleShow();else if (count) setActiveIndex(function (prev) {
+          return prev <= 0 ? count - 1 : prev - 1;
+        });
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (!isOpen) {
+          handleShow();
+        } else if (activeIndex >= 0 && activeIndex < count) {
+          selectValue(flatOptions[activeIndex].value);
+        }
+        break;
+      case 'Escape':
+        if (isOpen) {
+          event.preventDefault();
+          handleHide();
+        }
+        break;
+      default:
+        break;
+    }
+  }, [activeIndex, flatOptions, handleHide, handleShow, isOpen, selectValue]);
   var handleRemoveTag = useCallback(function (removedValue) {
     return onChangeMultiple(multipleValue.filter(function (item) {
       return item !== removedValue;
@@ -187,17 +261,26 @@ export var Select = function Select(props) {
     }
     return null;
   };
-  var scrollbarContent = /*#__PURE__*/React.createElement(S.ScrollbarContent, null, scrollbarHeader, optionGroups.map(function (_ref2) {
+  var scrollbarContent = /*#__PURE__*/React.createElement(S.ScrollbarContent, {
+    role: "listbox",
+    id: listboxId,
+    "aria-multiselectable": isMultiple || undefined
+  }, scrollbarHeader, optionGroups.map(function (_ref2) {
     var group = _ref2.group,
       groupOptions = _ref2.options;
     return /*#__PURE__*/React.createElement(Fragment, {
       key: (group === null || group === void 0 ? void 0 : group.id) || null
     }, handleGroupRender(group), groupOptions.map(function (option) {
+      var flatIndex = optionIndexByValue.get(option.value);
+      var isSelected = isMultiple ? selectedValuesSet.has(option.value) : option.value === value;
       return /*#__PURE__*/React.createElement(S.OptionWrapper, {
         $usePadding: usePadding,
         key: option.value
       }, /*#__PURE__*/React.createElement(S.Option, {
         key: option.value,
+        id: getOptionId(flatIndex),
+        role: "option",
+        "aria-selected": isSelected,
         $palette: palette,
         variant: "bodyMRegular",
         onClick: handleSelect,
@@ -205,10 +288,13 @@ export var Select = function Select(props) {
         "data-option-identifier": OPTION_IDENTIFIER,
         $isGrouped: !!group && !renderOption,
         $usePadding: usePadding,
-        $isSelected: !isMultiple && option.value === value
+        $isSelected: !isMultiple && option.value === value,
+        $isActive: flatIndex === activeIndex
       }, isMultiple ? /*#__PURE__*/React.createElement(S.OptionContent, null, /*#__PURE__*/React.createElement(S.CheckboxWrapper, null, /*#__PURE__*/React.createElement(Checkbox, {
         checked: selectedValuesSet.has(option.value),
-        readOnly: true
+        readOnly: true,
+        tabIndex: -1,
+        "aria-hidden": true
       })), handleOptionRender(option)) : handleOptionRender(option)));
     }));
   }));
@@ -273,7 +359,15 @@ export var Select = function Select(props) {
     size: fieldSize,
     onClick: isDrawerOptions || !!renderedValue ? handleInputClick : undefined,
     required: required,
-    useModernStyles: useModernStyles
+    useModernStyles: useModernStyles,
+    comboboxProps: {
+      role: 'combobox',
+      'aria-expanded': isOpen,
+      'aria-haspopup': 'listbox',
+      'aria-controls': isOpen && optionGroups.length ? listboxId : undefined,
+      'aria-activedescendant': isOpen && activeIndex >= 0 ? getOptionId(activeIndex) : undefined,
+      onKeyDown: isDrawerOptions ? undefined : handleKeyDown
+    }
   })), isDrawerOptions ? /*#__PURE__*/React.createElement(Drawer, {
     onClose: handleHide,
     isOpen: isOpen,
@@ -286,4 +380,11 @@ export var Select = function Select(props) {
     usePadding: usePadding,
     positionVertical: useModernStyles ? -1 : undefined
   }, handleDropdownContentRender()));
+};
+
+// Граница ошибок снаружи: renderOption/renderGroup/renderValue вызываются в
+// рендере SelectInner, и исключение потребительского колбэка иначе валило бы
+// всё дерево приложения (RES-001). Fallback — null: поле исчезает, страница живёт.
+export var Select = function Select(props) {
+  return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(SelectInner, props));
 };

package/dist/esm/components/form/Select/styles.js

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Typography } from '../../common/Typography';
+import { reducedMotion } from '../../../utils/reducedMotion';
 export var Wrapper = styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-1x9n0z5-0"
@@ -18,7 +19,7 @@ export var OptionWrapper = styled.div.withConfig({
 export var Option = styled(Typography).withConfig({
   displayName: "styles__Option",
   componentId: "sc-1x9n0z5-3"
-})(["overflow:hidden;width:100%;text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;border-radius:", ";", " &:hover{background-color:", ";}", ""], function (_ref2) {
+})(["overflow:hidden;width:100%;text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;border-radius:", ";", " ", " &:hover{background-color:", ";}", " ", ""], function (_ref2) {
   var $usePadding = _ref2.$usePadding;
   return $usePadding ? '12px' : 'none';
 }, function (_ref3) {
@@ -26,12 +27,16 @@ export var Option = styled(Typography).withConfig({
     $palette = _ref3.$palette;
   return $isSelected && css(["background-color:", ";border-radius:8px;"], $palette.bgHover);
 }, function (_ref4) {
-  var $palette = _ref4.$palette;
-  return $palette.bgHover;
+  var $isActive = _ref4.$isActive,
+    $palette = _ref4.$palette;
+  return $isActive && css(["background-color:", ";"], $palette.bgHover);
 }, function (_ref5) {
-  var $isGrouped = _ref5.$isGrouped;
+  var $palette = _ref5.$palette;
+  return $palette.bgHover;
+}, function (_ref6) {
+  var $isGrouped = _ref6.$isGrouped;
   return $isGrouped && css(["padding-left:30px;"]);
-});
+}, reducedMotion);
 export var Group = styled(Typography).withConfig({
   displayName: "styles__Group",
   componentId: "sc-1x9n0z5-4"
@@ -39,12 +44,12 @@ export var Group = styled(Typography).withConfig({
 export var DefaultOptionWrapper = styled.div.withConfig({
   displayName: "styles__DefaultOptionWrapper",
   componentId: "sc-1x9n0z5-5"
-})(["padding:", ";padding-left:", ";"], function (_ref6) {
-  var $usePadding = _ref6.$usePadding;
+})(["padding:", ";padding-left:", ";"], function (_ref7) {
+  var $usePadding = _ref7.$usePadding;
   return $usePadding ? '12px' : '12px 20px';
-}, function (_ref7) {
-  var $isMultiple = _ref7.$isMultiple,
-    $usePadding = _ref7.$usePadding;
+}, function (_ref8) {
+  var $isMultiple = _ref8.$isMultiple,
+    $usePadding = _ref8.$usePadding;
   return $isMultiple && !$usePadding ? '6px' : undefined;
 });
 export var DrawerContent = styled.div.withConfig({
@@ -58,8 +63,8 @@ export var DrawerBottom = styled.div.withConfig({
 export var EmptyLabel = styled(Typography).withConfig({
   displayName: "styles__EmptyLabel",
   componentId: "sc-1x9n0z5-8"
-})(["color:", ";"], function (_ref8) {
-  var $color = _ref8.$color;
+})(["color:", ";"], function (_ref9) {
+  var $color = _ref9.$color;
   return $color;
 });
 export var ScrollbarContent = styled.div.withConfig({

package/dist/esm/components/form/TagsInput/styles.js

@@ -1,7 +1,7 @@
 var _excluded = ["children"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React from 'react';
 import { getPureInputStyled } from '../PureInput/styles';
 import styled from 'styled-components';

package/dist/esm/components/form/TextInput/index.js

@@ -90,7 +90,9 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     placeholder: useModernStyles ? undefined : placeholder,
     paddingRight: paddingRight,
     type: type,
-    isOnlyNumbers: isOnlyNumbers,
+    isOnlyNumbers: isOnlyNumbers
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- проп прокидывается потребителю, решение об автофокусе за ним
+    ,
     autoFocus: autoFocus,
     element: element,
     rows: rows,

package/dist/esm/components/form/Toggle/index.js

@@ -1,7 +1,7 @@
 var _excluded = ["checked", "variant", "label", "onChange", "disabled", "alwaysHighlighted"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React from 'react';
 import * as S from './styles';
 import { INPUT_VARIANT_MAP } from './styles';
@@ -33,6 +33,7 @@ export var Toggle = function Toggle(_ref) {
     checked: checked,
     onChange: handleChange,
     type: "checkbox",
+    role: "switch",
     disabled: disabled
   }, other)), label && /*#__PURE__*/React.createElement(Typography, {
     variant: labelVariant

package/dist/esm/components/form/Toggle/styles.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { reducedMotion } from '../../../utils/reducedMotion';
 export var Label = styled.label.withConfig({
   displayName: "styles__Label",
   componentId: "sc-1pe8ina-0"
@@ -34,7 +35,7 @@ export var INPUT_VARIANT_MAP = {
 export var StyledInput = styled.input.withConfig({
   displayName: "styles__StyledInput",
   componentId: "sc-1pe8ina-1"
-})(["position:relative;width:", "px;height:", "px;cursor:pointer;flex-shrink:0;box-sizing:border-box;border:", "px solid;border-color:rgba(0,0,0,0);-webkit-appearance:none;box-shadow:none;background:", ";border-radius:50px;&:after{content:'';display:block;position:absolute;left:", "px;top:50%;transform:translateY(-50%);width:", "px;height:", "px;border-radius:50%;background-color:", ";transition:all 0.2s ease-in-out 0s;}&:checked::after{left:", "px;}&:checked{background:", ";}&:disabled{cursor:not-allowed;border:", "px solid ", ";background:white;&:after{box-shadow:0 3px 8px rgba(0,0,0,0.15);}}"], function (_ref3) {
+})(["position:relative;width:", "px;height:", "px;cursor:pointer;flex-shrink:0;box-sizing:border-box;border:", "px solid;border-color:rgba(0,0,0,0);-webkit-appearance:none;box-shadow:none;background:", ";border-radius:50px;&:after{content:'';display:block;position:absolute;left:", "px;top:50%;transform:translateY(-50%);width:", "px;height:", "px;border-radius:50%;background-color:", ";transition:all 0.2s ease-in-out 0s;}&:checked::after{left:", "px;}&:checked{background:", ";}&:disabled{cursor:not-allowed;border:", "px solid ", ";background:white;&:after{box-shadow:0 3px 8px rgba(0,0,0,0.15);}}&:focus-visible{outline:2px solid ", ";outline-offset:2px;}", ""], function (_ref3) {
   var $variant = _ref3.$variant;
   return INPUT_VARIANT_MAP[$variant].width;
 }, function (_ref4) {
@@ -56,19 +57,22 @@ export var StyledInput = styled.input.withConfig({
 }, function (_ref9) {
   var $variant = _ref9.$variant;
   return INPUT_VARIANT_MAP[$variant].circleSize;
+}, function (_ref0) {
+  var $palette = _ref0.$palette;
+  return $palette.circle;
+}, function (_ref1) {
+  var $variant = _ref1.$variant;
+  return INPUT_VARIANT_MAP[$variant].leftChecked;
 }, function (_ref10) {
   var $palette = _ref10.$palette;
-  return $palette.circle;
+  return $palette.activeBg;
 }, function (_ref11) {
   var $variant = _ref11.$variant;
-  return INPUT_VARIANT_MAP[$variant].leftChecked;
+  return INPUT_VARIANT_MAP[$variant].border;
 }, function (_ref12) {
   var $palette = _ref12.$palette;
-  return $palette.activeBg;
-}, function (_ref13) {
-  var $variant = _ref13.$variant;
-  return INPUT_VARIANT_MAP[$variant].border;
-}, function (_ref14) {
-  var $palette = _ref14.$palette;
   return $palette.disabledBorder;
-});
+}, function (_ref13) {
+  var $palette = _ref13.$palette;
+  return $palette.activeBg;
+}, reducedMotion);

package/dist/esm/utils/reducedMotion.js

@@ -0,0 +1,8 @@
+import { css } from 'styled-components';
+
+// Общий миксин: отключает анимации/переходы для пользователей с системной
+// настройкой reduced motion (WCAG 2.3.3). Добавлять последним в styled-блок,
+// содержащий transition/animation (включая правила в ::before/::after) —
+// поздние декларации побеждают. Глобального стиля здесь быть не может:
+// sideEffects: false.
+export var reducedMotion = css(["@media (prefers-reduced-motion:reduce){&,&::before,&::after,&::placeholder{transition:none;animation:none;}}"]);

package/dist/esm/utils/transformColorByHsl.js

@@ -1,12 +1,125 @@
-import { hslToColorString, parseToHsl } from 'polished';
+// Математика ниже повторяет parseToHsl/hslToColorString из polished 4.3.1
+// (включая округление и сокращение hex до 3 знаков), чтобы не тащить polished
+// как runtime-зависимость. Палитра библиотеки оперирует hex-цветами (см.
+// defaultAbstractPalette и hexToRgba), поэтому поддерживается только hex.
+
+var parseHex = function parseHex(color) {
+  var normalized = color.startsWith('#') ? color.slice(1) : color;
+  if (/^[0-9a-fA-F]{3}$/.test(normalized)) {
+    return {
+      red: parseInt(normalized[0] + normalized[0], 16),
+      green: parseInt(normalized[1] + normalized[1], 16),
+      blue: parseInt(normalized[2] + normalized[2], 16)
+    };
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(normalized)) {
+    return {
+      red: parseInt(normalized.slice(0, 2), 16),
+      green: parseInt(normalized.slice(2, 4), 16),
+      blue: parseInt(normalized.slice(4, 6), 16)
+    };
+  }
+  throw new Error("transformColorByHsl: unsupported color \"".concat(color, "\", expected #rgb or #rrggbb"));
+};
+var rgbToHsl = function rgbToHsl(_ref) {
+  var red = _ref.red,
+    green = _ref.green,
+    blue = _ref.blue;
+  var r = red / 255;
+  var g = green / 255;
+  var b = blue / 255;
+  var max = Math.max(r, g, b);
+  var min = Math.min(r, g, b);
+  var lightness = (max + min) / 2;
+  if (max === min) {
+    return {
+      hue: 0,
+      saturation: 0,
+      lightness: lightness
+    };
+  }
+  var delta = max - min;
+  var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+  var hue;
+  if (max === r) {
+    hue = (g - b) / delta + (g < b ? 6 : 0);
+  } else if (max === g) {
+    hue = (b - r) / delta + 2;
+  } else {
+    hue = (r - g) / delta + 4;
+  }
+  return {
+    hue: hue * 60,
+    saturation: saturation,
+    lightness: lightness
+  };
+};
+var hslToRgb = function hslToRgb(_ref2) {
+  var hue = _ref2.hue,
+    saturation = _ref2.saturation,
+    lightness = _ref2.lightness;
+  if (saturation === 0) {
+    var value = Math.round(lightness * 255);
+    return {
+      red: value,
+      green: value,
+      blue: value
+    };
+  }
+  var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  var huePrime = (hue % 360 + 360) % 360 / 60;
+  var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+  var red = 0;
+  var green = 0;
+  var blue = 0;
+  if (huePrime >= 0 && huePrime < 1) {
+    red = chroma;
+    green = secondComponent;
+  } else if (huePrime >= 1 && huePrime < 2) {
+    red = secondComponent;
+    green = chroma;
+  } else if (huePrime >= 2 && huePrime < 3) {
+    green = chroma;
+    blue = secondComponent;
+  } else if (huePrime >= 3 && huePrime < 4) {
+    green = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 4 && huePrime < 5) {
+    red = secondComponent;
+    blue = chroma;
+  } else {
+    red = chroma;
+    blue = secondComponent;
+  }
+  var lightnessModification = lightness - chroma / 2;
+  return {
+    red: Math.round((red + lightnessModification) * 255),
+    green: Math.round((green + lightnessModification) * 255),
+    blue: Math.round((blue + lightnessModification) * 255)
+  };
+};
+var numberToHex = function numberToHex(value) {
+  var hex = value.toString(16);
+  return hex.length === 1 ? "0".concat(hex) : hex;
+};
+var rgbToHexString = function rgbToHexString(_ref3) {
+  var red = _ref3.red,
+    green = _ref3.green,
+    blue = _ref3.blue;
+  var value = "#".concat(numberToHex(red)).concat(numberToHex(green)).concat(numberToHex(blue));
+  if (value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
+    return "#".concat(value[1]).concat(value[3]).concat(value[5]);
+  }
+  return value;
+};
 export var transformColorByHsl = function transformColorByHsl(base, diff) {
-  var hslBase = parseToHsl(base);
+  var hslBase = rgbToHsl(parseHex(base));
   var hue = hslBase.hue - diff.hue;
   var saturation = hslBase.saturation - diff.saturation;
   var lightness = hslBase.lightness - diff.lightness;
-  return hslToColorString({
+  return rgbToHexString(hslToRgb({
     hue: Math.min(Math.max(hue, 0), 360),
     saturation: Math.min(Math.max(saturation, 0), 1),
     lightness: Math.min(Math.max(lightness, 0), 1)
-  });
+  }));
 };