@invoicebox/ui 0.1.0-alpha.32 → 0.1.0-alpha.320

package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/styles.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const OrganizationWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $recalculateWidthAndBorder?: boolean | undefined;
+    $hoverBg: string;
+}>> & string;
+export declare const OrganizationName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("../../../../common/Typography").TTypographyProps>, import("styled-components/dist/types").BaseObject>, {
+    $color: string;
+}>> & string & Omit<import("react").FC<import("../../../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const OrganizationDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("../../../../common/Typography").TTypographyProps>, import("styled-components/dist/types").BaseObject>, {
+    $color: string;
+}>> & string & Omit<import("react").FC<import("../../../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const OrganizationLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("../../../../common/Typography").TTypographyProps>, import("styled-components/dist/types").BaseObject>, {
+    $color: string;
+}>> & string & Omit<import("react").FC<import("../../../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const OrganizationVatNumber: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const OrganizationProperties: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Feature: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/styles.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OrganizationWrapper = exports.OrganizationVatNumber = exports.OrganizationProperties = exports.OrganizationName = exports.OrganizationLabel = exports.OrganizationDescription = exports.OptionContainer = exports.Feature = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../../../../common/Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var OrganizationWrapper = exports.OrganizationWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__OrganizationWrapper",
+  componentId: "sc-1pujz54-0"
+})(["display:flex;align-items:start;flex-direction:column;gap:4px;"]);
+var OptionContainer = exports.OptionContainer = _styledComponents["default"].div.withConfig({
+  displayName: "styles__OptionContainer",
+  componentId: "sc-1pujz54-1"
+})(["width:", ";border-radius:", ";&:hover{background-color:", ";}"], function (_ref) {
+  var $recalculateWidthAndBorder = _ref.$recalculateWidthAndBorder;
+  return $recalculateWidthAndBorder ? 'calc(100% - 14px)' : '100%';
+}, function (_ref2) {
+  var $recalculateWidthAndBorder = _ref2.$recalculateWidthAndBorder;
+  return $recalculateWidthAndBorder ? '12px' : 'none';
+}, function (_ref3) {
+  var $hoverBg = _ref3.$hoverBg;
+  return $hoverBg;
+});
+var OrganizationName = exports.OrganizationName = (0, _styledComponents["default"])(_Typography.Typography).attrs({
+  element: 'span'
+}).withConfig({
+  displayName: "styles__OrganizationName",
+  componentId: "sc-1pujz54-2"
+})(["color:", ";"], function (_ref4) {
+  var $color = _ref4.$color;
+  return $color;
+});
+var OrganizationDescription = exports.OrganizationDescription = (0, _styledComponents["default"])(_Typography.Typography).attrs({
+  element: 'span'
+}).withConfig({
+  displayName: "styles__OrganizationDescription",
+  componentId: "sc-1pujz54-3"
+})(["color:", ";"], function (_ref5) {
+  var $color = _ref5.$color;
+  return $color;
+});
+var OrganizationLabel = exports.OrganizationLabel = (0, _styledComponents["default"])(_Typography.Typography).attrs({
+  element: 'span'
+}).withConfig({
+  displayName: "styles__OrganizationLabel",
+  componentId: "sc-1pujz54-4"
+})(["color:", ";"], function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+});
+var OrganizationVatNumber = exports.OrganizationVatNumber = _styledComponents["default"].span.withConfig({
+  displayName: "styles__OrganizationVatNumber",
+  componentId: "sc-1pujz54-5"
+})(["margin-right:20px;"]);
+var OrganizationProperties = exports.OrganizationProperties = _styledComponents["default"].div.withConfig({
+  displayName: "styles__OrganizationProperties",
+  componentId: "sc-1pujz54-6"
+})(["display:flex;align-items:center;gap:10px;margin-top:3px;"]);
+var Feature = exports.Feature = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Feature",
+  componentId: "sc-1pujz54-7"
+})(["display:contents;"]);

package/dist/components/form/Autocomplete/index.d.ts

@@ -0,0 +1,4 @@
+export { Autocomplete } from './components/Autocomplete';
+export type { TProps } from './components/Autocomplete';
+export { AutocompleteDefaultOption } from './components/AutocompleteDefaultOption';
+export { OrganizationAutocompleteItem } from './components/OrganizationAutocompleteItem';

package/dist/components/form/Autocomplete/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Autocomplete", {
+  enumerable: true,
+  get: function get() {
+    return _Autocomplete.Autocomplete;
+  }
+});
+Object.defineProperty(exports, "AutocompleteDefaultOption", {
+  enumerable: true,
+  get: function get() {
+    return _AutocompleteDefaultOption.AutocompleteDefaultOption;
+  }
+});
+Object.defineProperty(exports, "OrganizationAutocompleteItem", {
+  enumerable: true,
+  get: function get() {
+    return _OrganizationAutocompleteItem.OrganizationAutocompleteItem;
+  }
+});
+var _Autocomplete = require("./components/Autocomplete");
+var _AutocompleteDefaultOption = require("./components/AutocompleteDefaultOption");
+var _OrganizationAutocompleteItem = require("./components/OrganizationAutocompleteItem");

package/dist/components/form/Checkbox/CheckIcon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/Checkbox/CheckIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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); }
+var CheckIcon = exports.CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    width: "12",
+    height: "11",
+    viewBox: "0 0 12 11",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.43158 10.0674C5.22406 10.3745 4.94736 10.5156 4.62744 10.5156C4.3075 10.5156 4.0481 10.3911 3.78006 10.0757L0.442444 6.19092C0.295471 6.0166 0.208984 5.79248 0.208984 5.58496C0.208984 5.14502 0.563507 4.82129 0.987183 4.82129C1.26389 4.82129 1.49734 4.9209 1.72217 5.19482L4.5842 8.63965L9.9624 0.430176C10.1526 0.147949 10.4034 0.00683594 10.6541 0.00683594C11.0778 0.00683594 11.4842 0.280762 11.4842 0.720703C11.4842 0.919922 11.3718 1.14404 11.2421 1.32666L5.43158 10.0674Z",
+    fill: "white"
+  }));
+};

package/dist/components/form/Checkbox/index.d.ts

@@ -0,0 +1,11 @@
+import React, { FC, InputHTMLAttributes } from 'react';
+export type TProps = InputHTMLAttributes<HTMLInputElement> & {
+    className?: string;
+    checked: boolean;
+    label?: string | React.ReactNode;
+    disabled?: boolean;
+    disabledText?: string;
+};
+export declare const Checkbox: FC<TProps>;
+declare const _default: React.NamedExoticComponent<TProps>;
+export default _default;

package/dist/components/form/Checkbox/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Checkbox = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Typography = require("../../common/Typography");
+var _Tooltip = require("../../common/Tooltip");
+var _palette = require("../../../palette");
+var S = _interopRequireWildcard(require("./styles"));
+var _excluded = ["disabled", "className", "checked", "disabledText", "label"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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 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; }
+var Checkbox = exports.Checkbox = function Checkbox(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    disabledText = _ref.disabledText,
+    label = _ref.label,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var palette = (0, _palette.useComponentPalette)('checkbox');
+  var content = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(S.HiddenCheckbox, _extends({
+      type: "checkbox",
+      disabled: disabled,
+      checked: checked
+    }, props)), /*#__PURE__*/_react["default"].createElement(S.StyledCheckbox, null, /*#__PURE__*/_react["default"].createElement(S.CheckboxIcon, null)));
+  }, [checked, disabled, props]);
+  return /*#__PURE__*/_react["default"].createElement(S.CheckboxLabel, {
+    $checked: checked,
+    $disabled: disabled,
+    $palette: palette,
+    className: className
+  }, /*#__PURE__*/_react["default"].createElement(S.CheckboxContainer, null, disabled && disabledText ? /*#__PURE__*/_react["default"].createElement(_Tooltip.Tooltip, {
+    overlay: disabledText
+  }, content) : content), label && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "bodyMRegular"
+  }, label));
+};
+var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(Checkbox);

package/dist/components/form/Checkbox/index.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox, TProps } from '.';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+export declare const Default: StoryObj<TProps>;
+export declare const Checked: StoryObj<TProps>;
+export declare const Disabled: StoryObj<TProps>;
+export declare const DisabledChecked: StoryObj<TProps>;

package/dist/components/form/Checkbox/index.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DisabledChecked = exports.Disabled = exports.Default = exports.Checked = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = require(".");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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; }
+var meta = {
+  title: 'form/Checkbox',
+  component: _.Checkbox,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Component = function Component(props) {
+  var _useState = (0, _react.useState)(props.checked),
+    _useState2 = _slicedToArray(_useState, 2),
+    checked = _useState2[0],
+    setChecked = _useState2[1];
+  return /*#__PURE__*/_react["default"].createElement(_.Checkbox, _extends({}, props, {
+    checked: checked,
+    onChange: function onChange() {
+      return setChecked(function (prev) {
+        return !prev;
+      });
+    }
+  }));
+};
+var Default = exports.Default = {
+  args: {
+    checked: false,
+    label: 'Label'
+  },
+  render: Component
+};
+var Checked = exports.Checked = {
+  args: {
+    checked: true,
+    label: 'Label'
+  },
+  render: Component
+};
+var Disabled = exports.Disabled = {
+  args: {
+    checked: false,
+    disabled: true,
+    label: 'Label',
+    disabledText: 'Недоступно'
+  },
+  render: Component
+};
+var DisabledChecked = exports.DisabledChecked = {
+  args: {
+    checked: true,
+    disabled: true,
+    label: 'Label'
+  },
+  render: Component
+};

package/dist/components/form/Checkbox/palette.d.ts

@@ -0,0 +1,12 @@
+import { TAbstractPalette } from '../../../palette';
+export type TCheckboxPalette = {
+    labelColor: string;
+    mark: string;
+    borderDefault: string;
+    borderHover: string;
+    checkedBg: string;
+    checkedHoverBg: string;
+    disabledBg: string;
+    disabledBorder: string;
+};
+export declare const generateCheckboxPalette: (abstractPalette: TAbstractPalette) => TCheckboxPalette;

package/dist/components/form/Checkbox/palette.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCheckboxPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generateCheckboxPalette = exports.generateCheckboxPalette = function generateCheckboxPalette(abstractPalette) {
+  return {
+    labelColor: abstractPalette.primary,
+    mark: abstractPalette.base,
+    borderDefault: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3),
+    borderHover: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5),
+    checkedBg: abstractPalette.secondary,
+    checkedHoverBg: '#EDC743',
+    disabledBg: (0, _hexToRgba["default"])(abstractPalette.neutralBrutal, 0.3),
+    disabledBorder: (0, _hexToRgba["default"])(abstractPalette.neutralBrutal, 0.3)
+  };
+};

package/dist/components/form/Checkbox/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TCheckboxPalette } from './palette';
+export declare const CheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HiddenCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const CheckboxIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>> & string & Omit<(props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $checked: boolean;
+    $disabled: boolean;
+    $palette: TCheckboxPalette;
+}>> & string;

package/dist/components/form/Checkbox/styles.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledCheckbox = exports.HiddenCheckbox = exports.CheckboxLabel = exports.CheckboxIcon = exports.CheckboxContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _CheckIcon = require("./CheckIcon");
+var _reducedMotion = require("../../../utils/reducedMotion");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var TRANSITION = 'all .2s ease-in-out';
+var BORDER_RADIUS_MIN = 4;
+var CheckboxContainer = exports.CheckboxContainer = _styledComponents["default"].div.withConfig({
+  displayName: "styles__CheckboxContainer",
+  componentId: "sc-11prdl0-0"
+})(["display:inline-block;vertical-align:middle;"]);
+
+// Инпут скрыт визуально, но остаётся в дереве доступности и фокусируем с
+// клавиатуры (display: none выключал и то и другое) — паттерн visually hidden
+var HiddenCheckbox = exports.HiddenCheckbox = _styledComponents["default"].input.withConfig({
+  displayName: "styles__HiddenCheckbox",
+  componentId: "sc-11prdl0-1"
+})(["position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;"]);
+var CheckboxIcon = exports.CheckboxIcon = (0, _styledComponents["default"])(_CheckIcon.CheckIcon).withConfig({
+  displayName: "styles__CheckboxIcon",
+  componentId: "sc-11prdl0-2"
+})(["transition:", ";", ""], TRANSITION, _reducedMotion.reducedMotion);
+var StyledCheckbox = exports.StyledCheckbox = _styledComponents["default"].div.withConfig({
+  displayName: "styles__StyledCheckbox",
+  componentId: "sc-11prdl0-3"
+})(["display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:", "px;transition:", ";", ""], BORDER_RADIUS_MIN, TRANSITION, _reducedMotion.reducedMotion);
+var getStylesCheckbox = function getStylesCheckbox(palette, disabled, checked) {
+  if (disabled) {
+    if (checked) {
+      return "background-color: ".concat(palette.disabledBg, "; border: none");
+    }
+    return "border: 1px solid ".concat(palette.disabledBorder);
+  }
+  if (checked) {
+    return "background-color: ".concat(palette.checkedBg, "; border: none");
+  }
+  return "border: 1px solid ".concat(palette.borderDefault);
+};
+var getHoverStylesCheckbox = function getHoverStylesCheckbox(palette, disabled, checked) {
+  if (disabled) {
+    if (checked) {
+      return "background-color: ".concat(palette.disabledBg, "; border: none");
+    }
+    return "border: 1px solid ".concat(palette.disabledBg);
+  }
+  if (checked) {
+    return "background-color: ".concat(palette.checkedHoverBg, "; border: none");
+  }
+  return "border: 1px solid ".concat(palette.borderHover);
+};
+var CheckboxLabel = exports.CheckboxLabel = _styledComponents["default"].label.withConfig({
+  displayName: "styles__CheckboxLabel",
+  componentId: "sc-11prdl0-4"
+})(["display:flex;align-items:center;grid-column-gap:10px;user-select:none;width:fit-content;cursor:pointer;color:", ";", "{", ";", "{opacity:", ";}}&:hover{", "{", ";}}", ":focus-visible + ", "{outline:2px solid ", ";outline-offset:2px;}"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.labelColor;
+}, StyledCheckbox, function (_ref2) {
+  var $checked = _ref2.$checked,
+    $disabled = _ref2.$disabled,
+    $palette = _ref2.$palette;
+  return getStylesCheckbox($palette, $disabled, $checked);
+}, CheckboxIcon, function (_ref3) {
+  var $checked = _ref3.$checked;
+  return $checked ? 1 : 0;
+}, StyledCheckbox, function (_ref4) {
+  var $checked = _ref4.$checked,
+    $disabled = _ref4.$disabled,
+    $palette = _ref4.$palette;
+  return getHoverStylesCheckbox($palette, $disabled, $checked);
+}, HiddenCheckbox, StyledCheckbox, function (_ref5) {
+  var $palette = _ref5.$palette;
+  return $palette.borderHover;
+});

package/dist/components/form/CodeInput/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+export type TProps = {
+    value: string;
+    onChange: (value: string) => void;
+    codeLength: number;
+    hasError?: boolean;
+    isLarge?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+};
+export declare const CodeInput: FC<TProps>;

package/dist/components/form/CodeInput/index.js

@@ -0,0 +1,104 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeInput = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../palette");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(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; }
+var ONLY_NUMBERS_REGEX = /^[0-9]+$/;
+var CodeInput = exports.CodeInput = function CodeInput(_ref) {
+  var hasError = _ref.hasError,
+    onChange = _ref.onChange,
+    codeLength = _ref.codeLength,
+    value = _ref.value,
+    _ref$isLarge = _ref.isLarge,
+    isLarge = _ref$isLarge === void 0 ? true : _ref$isLarge,
+    disabled = _ref.disabled,
+    autoFocus = _ref.autoFocus;
+  var palette = (0, _palette.useComponentPalette)('codeInput');
+  var getCodeArrFromCodeString = function getCodeArrFromCodeString() {
+    var newValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return [].concat(_toConsumableArray(newValue.split('')), _toConsumableArray(Array(codeLength).fill(''))).slice(0, codeLength);
+  };
+  var codeArr = getCodeArrFromCodeString(value);
+  var setValue = function setValue(newValue, index) {
+    var newArr = codeArr.map(function (codeItem, codeIndex) {
+      return index === codeIndex ? newValue : codeItem;
+    });
+    onChange(newArr.join(''));
+  };
+  var changeHandler = function changeHandler(event) {
+    var index = Number(event.target.dataset.index);
+    var inputValue = event.target.value;
+    if (ONLY_NUMBERS_REGEX.test(inputValue)) {
+      setValue(inputValue.length > 1 ? inputValue.replace(codeArr[index], '') : inputValue, index);
+      if (event.target.nextSibling) {
+        event.target.nextSibling.focus();
+      }
+    }
+  };
+  var onKeyDown = function onKeyDown(event) {
+    if (event.key === 'Backspace') {
+      event.preventDefault();
+      var target = event.target;
+      var index = Number(target.dataset.index);
+      if (target.value) {
+        setValue('', index);
+      } else if (target.previousSibling) {
+        setValue('', index - 1);
+        target.previousSibling.focus();
+      }
+    }
+  };
+  var handleFocus = function handleFocus(event) {
+    var currentInput = event.target;
+    var prevInput = currentInput.previousSibling;
+    if (prevInput && prevInput.value === '') {
+      prevInput.focus();
+    }
+  };
+  var handlePaste = function handlePaste(event) {
+    event.preventDefault();
+    var pasteText = event.clipboardData.getData('Text').trim();
+    if (ONLY_NUMBERS_REGEX.test(pasteText)) {
+      onChange(pasteText);
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    $isLarge: isLarge
+  }, codeArr.map(function (codeItem, index) {
+    return /*#__PURE__*/_react["default"].createElement(S.CodeInputItem, {
+      $defaultBorder: palette.defaultBorder,
+      $errorBorder: palette.errorBorder
+      // eslint-disable-next-line react/no-array-index-key
+      ,
+      key: index,
+      "data-index": String(index),
+      onChange: changeHandler,
+      value: codeItem,
+      inputMode: "numeric",
+      onKeyDown: onKeyDown,
+      onPaste: handlePaste,
+      onFocus: handleFocus,
+      placeholder: "-",
+      $hasError: hasError,
+      disabled: !!disabled
+      // eslint-disable-next-line jsx-a11y/no-autofocus -- проп прокидывается потребителю, решение об автофокусе за ним
+      ,
+      autoFocus: autoFocus,
+      autoComplete: 'one-time-code',
+      type: "text"
+    });
+  }));
+};

package/dist/components/form/CodeInput/index.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CodeInput, TProps } from '.';
+declare const meta: Meta<typeof CodeInput>;
+export default meta;
+export declare const Default: StoryObj<TProps>;
+export declare const Live: StoryObj<TProps>;

package/dist/components/form/CodeInput/index.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Live = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = require(".");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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; }
+var meta = {
+  title: 'common/CodeInput',
+  component: _.CodeInput,
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: {
+      action: 'onChange'
+    }
+  }
+};
+var _default = exports["default"] = meta;
+var COMMON_ARGS = {
+  hasError: false,
+  codeLength: 4,
+  value: '12',
+  disabled: false,
+  autoFocus: true
+};
+var Default = exports.Default = {
+  args: COMMON_ARGS
+};
+var Live = exports.Live = {
+  args: COMMON_ARGS,
+  render: function Render(args) {
+    var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_.CodeInput, _extends({}, args, {
+      value: value,
+      onChange: setValue
+    })));
+  }
+};

package/dist/components/form/CodeInput/palette.d.ts

@@ -0,0 +1,6 @@
+import { TAbstractPalette } from '../../../palette';
+export type TCodeInputPalette = {
+    errorBorder: string;
+    defaultBorder: string;
+};
+export declare const generateCodeInputPalette: (abstractPalette: TAbstractPalette) => TCodeInputPalette;

package/dist/components/form/CodeInput/palette.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCodeInputPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generateCodeInputPalette = exports.generateCodeInputPalette = function generateCodeInputPalette(abstractPalette) {
+  return {
+    errorBorder: abstractPalette.error,
+    defaultBorder: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3)
+  };
+};

package/dist/components/form/CodeInput/styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const CodeInputItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $errorBorder: string;
+    $defaultBorder: string;
+    $hasError?: boolean | undefined;
+    disabled: boolean;
+}>> & string;
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isLarge: boolean;
+}>> & string;