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

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

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.supportedCountries = exports.UNKNOWN_COUNTRY_CODE = exports.RUS_COUNTRY_CODE = void 0;
+var RUS_COUNTRY_CODE = exports.RUS_COUNTRY_CODE = 'RUS';
+var UNKNOWN_COUNTRY_CODE = exports.UNKNOWN_COUNTRY_CODE = 'UNKNOWN';
+var supportedCountries = exports.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', 'USA', 'CAN', UNKNOWN_COUNTRY_CODE];

package/dist/components/form/PositiveIntegerInput/hooks/useFilters.d.ts

@@ -0,0 +1,6 @@
+type TFilter = (value: string) => string;
+export type TProps = {
+    max: number;
+};
+export declare const useFilters: ({ max }: TProps) => TFilter[];
+export {};

package/dist/components/form/PositiveIntegerInput/hooks/useFilters.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFilters = void 0;
+var _react = require("react");
+var useFilters = exports.useFilters = function useFilters(_ref) {
+  var max = _ref.max;
+  var filterOnlyNumbers = (0, _react.useCallback)(function (value) {
+    return value.replace(/[^0-9]/g, '');
+  }, []);
+  var filterMax = (0, _react.useCallback)(function (value) {
+    if (!value) return '';
+    return Number(value) > max ? String(max) : value;
+  }, [max]);
+  var filters = (0, _react.useMemo)(function () {
+    return [filterOnlyNumbers, filterMax];
+  }, [filterOnlyNumbers, filterMax]);
+  return filters;
+};

package/dist/components/form/PositiveIntegerInput/hooks/useIncrement.d.ts

@@ -0,0 +1,4 @@
+export declare const useIncrement: () => {
+    increment: (v: number | null) => number;
+    decrement: (v: number | null) => number;
+};

package/dist/components/form/PositiveIntegerInput/hooks/useIncrement.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIncrement = void 0;
+var _react = require("react");
+var useIncrement = exports.useIncrement = function useIncrement() {
+  var increment = (0, _react.useCallback)(function (v) {
+    return v === null ? 1 : v + 1;
+  }, []);
+  var decrement = (0, _react.useCallback)(function (v) {
+    return v === null || v === 0 ? 0 : v - 1;
+  }, []);
+  var incrementers = (0, _react.useMemo)(function () {
+    return {
+      increment: increment,
+      decrement: decrement
+    };
+  }, [increment, decrement]);
+  return incrementers;
+};

package/dist/components/form/PositiveIntegerInput/hooks/useIncrementDisabledFlags.d.ts

@@ -0,0 +1,9 @@
+type TProps = {
+    max: number;
+    value: number | null;
+};
+export declare const useIncrementDisabledFlags: ({ max, value }: TProps) => {
+    isIncrementDisabled: boolean;
+    isDecrementDisabled: boolean;
+};
+export {};

package/dist/components/form/PositiveIntegerInput/hooks/useIncrementDisabledFlags.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIncrementDisabledFlags = void 0;
+var _react = require("react");
+var useIncrementDisabledFlags = exports.useIncrementDisabledFlags = function useIncrementDisabledFlags(_ref) {
+  var max = _ref.max,
+    value = _ref.value;
+  var isIncrementDisabled = (0, _react.useMemo)(function () {
+    return value === max;
+  }, [max, value]);
+  var isDecrementDisabled = (0, _react.useMemo)(function () {
+    return value === 0;
+  }, [value]);
+  var incrementDisabledFlags = (0, _react.useMemo)(function () {
+    return {
+      isIncrementDisabled: isIncrementDisabled,
+      isDecrementDisabled: isDecrementDisabled
+    };
+  }, [isIncrementDisabled, isDecrementDisabled]);
+  return incrementDisabledFlags;
+};

package/dist/components/form/PositiveIntegerInput/hooks/useNormalizers.d.ts

@@ -0,0 +1,4 @@
+export declare const useNormalizers: () => {
+    normalizeTo: (v: string) => number | null;
+    normalizeFrom: (v: number | null) => string;
+};

package/dist/components/form/PositiveIntegerInput/hooks/useNormalizers.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNormalizers = void 0;
+var _react = require("react");
+var useNormalizers = exports.useNormalizers = function useNormalizers() {
+  var normalizeTo = (0, _react.useCallback)(function (v) {
+    return !v ? null : Number(v);
+  }, []);
+  var normalizeFrom = (0, _react.useCallback)(function (v) {
+    return v !== null ? String(v) : '';
+  }, []);
+  var normalizers = (0, _react.useMemo)(function () {
+    return {
+      normalizeTo: normalizeTo,
+      normalizeFrom: normalizeFrom
+    };
+  }, [normalizeTo, normalizeFrom]);
+  return normalizers;
+};

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { TProps as TInputLabelProps } from '../InputLabel';
+import { TProps as TPureInputProps } from '../PureInput';
+import { TSizes } from '../constants';
+export type TProps = {
+    value: number | null;
+    onChange: (value: number | null) => void;
+    max?: number;
+    upAndDown?: boolean;
+} & Pick<TInputLabelProps, 'label'> & Pick<TPureInputProps, 'placeholder' | 'hasError' | 'onFocus' | 'onBlur' | 'disabled' | 'name' | 'useModernStyles' | 'id'> & {
+    size?: TSizes;
+};
+export declare const PositiveIntegerInput: FC<TProps>;

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

@@ -0,0 +1,120 @@
+"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.PositiveIntegerInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _useInputFocus2 = require("../../../hooks/useInputFocus");
+var _InputLabel = require("../InputLabel");
+var _PureInput = require("../PureInput");
+var _Arrow = require("../../common/Arrow");
+var _useFilters = require("./hooks/useFilters");
+var _useNormalizers2 = require("./hooks/useNormalizers");
+var _useIncrement2 = require("./hooks/useIncrement");
+var _useIncrementDisabledFlags = require("./hooks/useIncrementDisabledFlags");
+var _useInputStyles2 = require("../_hooks/useInputStyles");
+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); }
+var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveIntegerInput(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? Infinity : _ref$max,
+    _ref$upAndDown = _ref.upAndDown,
+    upAndDown = _ref$upAndDown === void 0 ? false : _ref$upAndDown,
+    label = _ref.label,
+    placeholder = _ref.placeholder,
+    hasError = _ref.hasError,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    name = _ref.name,
+    size = _ref.size,
+    _ref$useModernStyles = _ref.useModernStyles,
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
+  var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
+      onFocus: onFocus,
+      onBlur: onBlur
+    }),
+    inFocus = _useInputFocus.inFocus,
+    handleFocus = _useInputFocus.handleFocus,
+    handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
+  var _useInputStyles = (0, _useInputStyles2.useInputStyles)({
+      isHaveValue: typeof value === 'number',
+      useModernStyles: useModernStyles,
+      size: size,
+      label: label,
+      inFocus: inFocus,
+      placeholder: placeholder
+    }),
+    inputLabel = _useInputStyles.inputLabel,
+    paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
+  var filters = (0, _useFilters.useFilters)({
+    max: max
+  });
+  var _useNormalizers = (0, _useNormalizers2.useNormalizers)(),
+    normalizeFrom = _useNormalizers.normalizeFrom,
+    normalizeTo = _useNormalizers.normalizeTo;
+  var _useIncrement = (0, _useIncrement2.useIncrement)(),
+    increment = _useIncrement.increment,
+    decrement = _useIncrement.decrement;
+  var _useIncrementDisabled = (0, _useIncrementDisabledFlags.useIncrementDisabledFlags)({
+      max: max,
+      value: value
+    }),
+    isDecrementDisabled = _useIncrementDisabled.isDecrementDisabled,
+    isIncrementDisabled = _useIncrementDisabled.isIncrementDisabled;
+  var handleChange = (0, _react.useCallback)(function (event) {
+    var newValue = event.target.value;
+    var filtredValue = filters.reduce(function (acc, fn) {
+      return fn(acc);
+    }, newValue);
+    onChange(normalizeTo(filtredValue));
+  }, [normalizeTo, onChange, filters]);
+  var handleUp = (0, _react.useCallback)(function () {
+    onChange(increment(value));
+  }, [increment, value, onChange]);
+  var handleDown = (0, _react.useCallback)(function () {
+    onChange(decrement(value));
+  }, [decrement, value, onChange]);
+  return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
+    inFocus: inFocus,
+    label: inputLabel,
+    useModernStyles: useModernStyles,
+    size: fieldSize,
+    htmlFor: inputId
+  }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
+    name: name,
+    hasError: hasError,
+    inFocus: inFocus,
+    placeholder: useModernStyles ? undefined : placeholder,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    value: normalizeFrom(value),
+    onChange: handleChange,
+    paddingRight: upAndDown ? 44 : undefined
+  }, paddingAndVariantOptions, {
+    useModernStyles: useModernStyles
+  })), upAndDown && /*#__PURE__*/_react["default"].createElement(S.Arrows, null, /*#__PURE__*/_react["default"].createElement(S.Arrow, {
+    onClick: handleUp,
+    $disabled: isIncrementDisabled
+  }, /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
+    isOpen: true,
+    outterSize: 12
+  })), /*#__PURE__*/_react["default"].createElement(S.Arrow, {
+    onClick: handleDown,
+    $disabled: isDecrementDisabled
+  }, /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
+    isOpen: false,
+    outterSize: 12
+  })))));
+};

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

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

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

@@ -0,0 +1,48 @@
+"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.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _addonActions = require("@storybook/addon-actions");
+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/PositiveIntegerInput',
+  component: _.PositiveIntegerInput,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Component = function Component(props) {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var handleChange = (0, _react.useCallback)(function (newValue) {
+    setValue(newValue);
+    (0, _addonActions.action)('onChange')(newValue);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_.PositiveIntegerInput, _extends({}, props, {
+    value: value,
+    onChange: handleChange
+  }));
+};
+var Default = exports.Default = {
+  args: {
+    max: 1000,
+    upAndDown: true,
+    label: 'Label',
+    placeholder: 'Placeholder',
+    hasError: false
+  },
+  render: Component
+};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Arrows: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Arrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $disabled: boolean;
+}>> & string;
+export declare const ControlWrapper: 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/PositiveIntegerInput/styles.js

@@ -0,0 +1,24 @@
+"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.ControlWrapper = exports.Arrows = exports.Arrow = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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); }
+var Arrows = exports.Arrows = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Arrows",
+  componentId: "sc-ctutr8-0"
+})(["display:flex;flex-direction:column;position:absolute;height:100%;justify-content:center;top:0;right:18px;"]);
+var Arrow = exports.Arrow = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Arrow",
+  componentId: "sc-ctutr8-1"
+})(["cursor:pointer;display:flex;user-select:none;", ""], function (_ref) {
+  var $disabled = _ref.$disabled;
+  return $disabled && (0, _styledComponents.css)(["opacity:0.4;pointer-events:none;"]);
+});
+var ControlWrapper = exports.ControlWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__ControlWrapper",
+  componentId: "sc-ctutr8-2"
+})(["position:relative;"]);

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

@@ -1,13 +1,32 @@
-import { FC, InputHTMLAttributes } from 'react';
-import { TPureInputPalette } from './palette';
-type TProps = InputHTMLAttributes<HTMLInputElement> & {
+import React, { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { TInputWithTypographyProps } from '../../common/Typography';
+export type TProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onBlur' | 'onChange' | 'onFocus'> & InputHTMLAttributes<HTMLInputElement> & Partial<Pick<TInputWithTypographyProps, 'variant'>> & {
     paddingLeft?: number;
     paddingRight?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    borderRadius?: number;
     hasError?: boolean;
     inFocus?: boolean;
     hasBorder?: boolean;
+    isOnlyNumbers?: boolean;
     className?: never;
-    palette?: Partial<TPureInputPalette>;
+    element?: 'input' | 'textarea';
+    renderedValue?: React.ReactNode;
+    useModernStyles?: boolean;
 };
-export declare const PureInput: FC<TProps>;
-export {};
+export declare const PureInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onFocus" | "onBlur" | "onChange"> & React.InputHTMLAttributes<HTMLInputElement> & Partial<Pick<TInputWithTypographyProps, "variant">> & {
+    paddingLeft?: number | undefined;
+    paddingRight?: number | undefined;
+    paddingTop?: number | undefined;
+    paddingBottom?: number | undefined;
+    borderRadius?: number | undefined;
+    hasError?: boolean | undefined;
+    inFocus?: boolean | undefined;
+    hasBorder?: boolean | undefined;
+    isOnlyNumbers?: boolean | undefined;
+    className?: undefined;
+    element?: "input" | "textarea" | undefined;
+    renderedValue?: React.ReactNode;
+    useModernStyles?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

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

@@ -5,39 +5,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PureInput = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
 var _palette = require("../../../palette");
-var _excluded = ["paddingLeft", "paddingRight", "hasError", "inFocus", "hasBorder", "className", "palette"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var PureInput = exports.PureInput = function PureInput(_ref) {
+var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderRadius", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element", "variant", "renderedValue", "useModernStyles", "id"];
+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 PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref$paddingLeft = _ref.paddingLeft,
-    paddingLeft = _ref$paddingLeft === void 0 ? 18 : _ref$paddingLeft,
+    paddingLeft = _ref$paddingLeft === void 0 ? 20 : _ref$paddingLeft,
     _ref$paddingRight = _ref.paddingRight,
-    paddingRight = _ref$paddingRight === void 0 ? 18 : _ref$paddingRight,
+    paddingRight = _ref$paddingRight === void 0 ? 12 : _ref$paddingRight,
+    _ref$paddingTop = _ref.paddingTop,
+    paddingTop = _ref$paddingTop === void 0 ? 13 : _ref$paddingTop,
+    _ref$paddingBottom = _ref.paddingBottom,
+    paddingBottom = _ref$paddingBottom === void 0 ? 13 : _ref$paddingBottom,
+    _ref$borderRadius = _ref.borderRadius,
+    borderRadius = _ref$borderRadius === void 0 ? 10 : _ref$borderRadius,
     _ref$hasError = _ref.hasError,
     hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     _ref$inFocus = _ref.inFocus,
     inFocus = _ref$inFocus === void 0 ? false : _ref$inFocus,
     _ref$hasBorder = _ref.hasBorder,
     hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
+    _ref$isOnlyNumbers = _ref.isOnlyNumbers,
+    isOnlyNumbers = _ref$isOnlyNumbers === void 0 ? false : _ref$isOnlyNumbers,
     className = _ref.className,
-    palette = _ref.palette,
+    onChange = _ref.onChange,
+    _ref$element = _ref.element,
+    element = _ref$element === void 0 ? 'input' : _ref$element,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'bodyMRegular' : _ref$variant,
+    renderedValue = _ref.renderedValue,
+    _ref$useModernStyles = _ref.useModernStyles,
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var mergedPalette = (0, _palette.useComponentPalette)('pureInput', palette);
+  var palette = (0, _palette.useComponentPalette)('pureInput');
+  var fallbackId = (0, _react.useId)();
+  var handleChange = (0, _react.useCallback)(function (event) {
+    var inputValue = event.target.value;
+    event.target.value = isOnlyNumbers ? inputValue.replace(/[^0-9]/g, '') : inputValue;
+    if (onChange) {
+      onChange(event);
+    }
+  }, [isOnlyNumbers, onChange]);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
-    variant: "bodyMRegular",
-    element: "input",
+    ref: ref,
+    variant: variant,
+    element: renderedValue ? 'div' : element,
     $paddingLeft: paddingLeft,
     $paddingRight: paddingRight,
+    $paddingTop: paddingTop,
+    $paddingBottom: paddingBottom,
     $hasError: hasError,
     $inFocus: inFocus,
-    $hasBorder: hasBorder,
-    $palette: mergedPalette
-  }, rest));
-};
+    $hasBorder: hasBorder && (!useModernStyles || hasError),
+    $palette: palette,
+    $borderRadius: borderRadius,
+    onChange: handleChange,
+    $useModernStyles: useModernStyles,
+    id: id !== null && id !== void 0 ? id : fallbackId
+  }, rest), renderedValue);
+});
+PureInput.displayName = 'PureInput';

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

@@ -18,6 +18,7 @@ var Default = exports.Default = {
     hasError: false,
     inFocus: false,
     hasBorder: true,
-    placeholder: 'Введите текст'
+    placeholder: 'Введите текст',
+    autoFocus: false
   }
 };

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

@@ -2,6 +2,7 @@ import { TAbstractPalette } from '../../../palette';
 export type TPureInputPalette = {
     text: string;
     bg: string;
+    bgOpened: string;
     error: string;
     border: string;
     borderFocus: string;

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

@@ -4,15 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generatePureInputPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generatePureInputPalette = exports.generatePureInputPalette = function generatePureInputPalette(abstractPalette) {
   return {
     text: abstractPalette.primary,
     bg: abstractPalette.base,
+    bgOpened: abstractPalette.neutralLight,
     error: abstractPalette.error,
     border: (0, _hexToRgba["default"])(abstractPalette.neutralBrutal, 0.3),
     borderFocus: abstractPalette.primary,
-    placeholder: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3)
+    placeholder: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5)
   };
 };

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

@@ -1,10 +1,28 @@
-/// <reference types="react" />
 import { TPureInputPalette } from './palette';
-export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps, {
+import { ElementType } from 'react';
+export declare const getPureInputStyled: (component: ElementType) => import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<any, {
     $paddingLeft: number;
     $paddingRight: number;
+    $paddingTop: number;
+    $paddingBottom: number;
+    $borderRadius: number;
     $hasError: boolean;
     $inFocus: boolean;
     $hasBorder: boolean;
     $palette: TPureInputPalette;
-}>> & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
+    $variant?: "headline1" | "headline2" | "headline3" | "headline4" | "headline5Desktop" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints" | undefined;
+    $useModernStyles?: boolean | undefined;
+}>> & string & ({} | Omit<import("react").ComponentClass<any, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<any>, keyof import("react").Component<any, {}, any>>);
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<any, {
+    $paddingLeft: number;
+    $paddingRight: number;
+    $paddingTop: number;
+    $paddingBottom: number;
+    $borderRadius: number;
+    $hasError: boolean;
+    $inFocus: boolean;
+    $hasBorder: boolean;
+    $palette: TPureInputPalette;
+    $variant?: "headline1" | "headline2" | "headline3" | "headline4" | "headline5Desktop" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints" | undefined;
+    $useModernStyles?: boolean | undefined;
+}>> & string & ({} | Omit<import("react").ComponentClass<any, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<any>, keyof import("react").Component<any, {}, any>>);