@invoicebox/ui 0.1.0-alpha.4 → 0.1.0-alpha.41

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

@@ -0,0 +1,83 @@
+"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 _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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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(arr) { if (Array.isArray(arr)) return arr; }
+var meta = {
+  title: 'form/Select',
+  component: _.Select,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var selectOptions = [{
+  label: 'Option 1',
+  value: 'option-1'
+}, {
+  label: 'Option 2',
+  value: 'option-2'
+}, {
+  label: 'Option 3',
+  value: 'option-3'
+}, {
+  label: 'Option 4',
+  value: 'option-4'
+}, {
+  label: 'Option 5',
+  value: 'option-5'
+}, {
+  label: 'Option 6',
+  value: 'option-6'
+}, {
+  label: 'Option 7',
+  value: 'option-7'
+}, {
+  label: 'Option 8',
+  value: 'option-8'
+}, {
+  label: 'Option 9',
+  value: 'option-9'
+}, {
+  label: 'Option 10',
+  value: 'option-10'
+}, {
+  label: 'Option 11',
+  value: 'option-11'
+}, {
+  label: 'Option 12',
+  value: 'option-12'
+}];
+var Default = exports.Default = {
+  args: {
+    hasError: false,
+    label: 'Label',
+    name: 'name',
+    onBlur: (0, _addonActions.action)('blur'),
+    onFocus: (0, _addonActions.action)('focus'),
+    placeholder: 'Placeholder'
+  },
+  render: function Component(props) {
+    var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/_react["default"].createElement(_.Select, _extends({}, props, {
+      value: value,
+      onChange: setValue,
+      options: selectOptions
+    }));
+  }
+};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const InputWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Options: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Option: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps, import("styled-components/dist/types").BaseObject>> & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Options = exports.Option = exports.InputWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../../common/Typography");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1x9n0z5-0"
+})(["position:relative;width:100%;"]);
+var InputWrapper = exports.InputWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__InputWrapper",
+  componentId: "sc-1x9n0z5-1"
+})(["cursor:pointer;input{cursor:pointer;}"]);
+var Options = exports.Options = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Options",
+  componentId: "sc-1x9n0z5-2"
+})(["display:flex;flex-direction:column;"]);
+var Option = exports.Option = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "styles__Option",
+  componentId: "sc-1x9n0z5-3"
+})(["overflow:hidden;display:flex;width:100%;text-align:left;flex-direction:column;padding:12px 20px;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;&:hover{background-color:rgba(241,242,246,0.5);}"]);

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useOutsideClick: (onClick: () => void) => import("react").RefObject<HTMLDivElement>;

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOutsideClick = void 0;
+var _react = require("react");
+var useOutsideClick = exports.useOutsideClick = function useOutsideClick(onClick) {
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var handleOutsideClick = function handleOutsideClick(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClick();
+      }
+    };
+    document.addEventListener('mousedown', handleOutsideClick);
+    return function () {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [ref, onClick]);
+  return ref;
+};

package/dist/hooks/useInputFocus.d.ts

@@ -0,0 +1,11 @@
+type TProps<TEvent> = {
+    initialFocusFlag?: boolean;
+    onFocus?: (e: TEvent) => void;
+    onBlur?: (e: TEvent) => void;
+};
+export declare const useInputFocus: <TEvent>({ initialFocusFlag, onFocus, onBlur }?: TProps<TEvent>) => {
+    inFocus: boolean;
+    handleFocus: (event: TEvent) => void;
+    handleBlur: (event: TEvent) => void;
+};
+export {};

package/dist/hooks/useInputFocus.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInputFocus = void 0;
+var _react = require("react");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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(arr) { if (Array.isArray(arr)) return arr; }
+var useInputFocus = exports.useInputFocus = function useInputFocus() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$initialFocusFlag = _ref.initialFocusFlag,
+    initialFocusFlag = _ref$initialFocusFlag === void 0 ? false : _ref$initialFocusFlag,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur;
+  var _useState = (0, _react.useState)(initialFocusFlag),
+    _useState2 = _slicedToArray(_useState, 2),
+    inFocus = _useState2[0],
+    setInFocus = _useState2[1];
+  var handleFocus = function handleFocus(event) {
+    setInFocus(true);
+    if (onFocus) onFocus(event);
+  };
+  var handleBlur = function handleBlur(event) {
+    setInFocus(false);
+    if (onBlur) onBlur(event);
+  };
+  return {
+    inFocus: inFocus,
+    handleFocus: handleFocus,
+    handleBlur: handleBlur
+  };
+};

package/dist/index.d.ts

@@ -1 +1,14 @@
-export { Button } from './stories/Button';
+export { Skeleton } from './components/common/Skeleton';
+export { InvoiceboxLoader } from './components/common/InvoiceboxLoader';
+export { Typography, TypographyGlobalStyle } from './components/common/Typography';
+export { InvoiceboxSpinner } from './components/common/InvoiceboxSpinner';
+export { SecondaryButton } from './components/common/SecondaryButton';
+export { Arrow } from './components/common/Arrow';
+export { InputLabel } from './components/form/InputLabel';
+export { PureInput } from './components/form/PureInput';
+export { PositiveIntegerInput } from './components/form/PositiveIntegerInput';
+export type { TProps as TPositiveIntegerInputProps } from './components/form/PositiveIntegerInput';
+export { Dropdown } from './components/common/Dropdown';
+export type { TProps as TDropdownProps } from './components/common/Dropdown';
+export { Scrollbar } from './components/common/Scrollbar';
+export { PaletteProvider } from './palette';

package/dist/index.js

@@ -1,5 +1,95 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-var Button_1 = require("./stories/Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Arrow", {
+  enumerable: true,
+  get: function get() {
+    return _Arrow.Arrow;
+  }
+});
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown.Dropdown;
+  }
+});
+Object.defineProperty(exports, "InputLabel", {
+  enumerable: true,
+  get: function get() {
+    return _InputLabel.InputLabel;
+  }
+});
+Object.defineProperty(exports, "InvoiceboxLoader", {
+  enumerable: true,
+  get: function get() {
+    return _InvoiceboxLoader.InvoiceboxLoader;
+  }
+});
+Object.defineProperty(exports, "InvoiceboxSpinner", {
+  enumerable: true,
+  get: function get() {
+    return _InvoiceboxSpinner.InvoiceboxSpinner;
+  }
+});
+Object.defineProperty(exports, "PaletteProvider", {
+  enumerable: true,
+  get: function get() {
+    return _palette.PaletteProvider;
+  }
+});
+Object.defineProperty(exports, "PositiveIntegerInput", {
+  enumerable: true,
+  get: function get() {
+    return _PositiveIntegerInput.PositiveIntegerInput;
+  }
+});
+Object.defineProperty(exports, "PureInput", {
+  enumerable: true,
+  get: function get() {
+    return _PureInput.PureInput;
+  }
+});
+Object.defineProperty(exports, "Scrollbar", {
+  enumerable: true,
+  get: function get() {
+    return _Scrollbar.Scrollbar;
+  }
+});
+Object.defineProperty(exports, "SecondaryButton", {
+  enumerable: true,
+  get: function get() {
+    return _SecondaryButton.SecondaryButton;
+  }
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function get() {
+    return _Skeleton.Skeleton;
+  }
+});
+Object.defineProperty(exports, "Typography", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.Typography;
+  }
+});
+Object.defineProperty(exports, "TypographyGlobalStyle", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.TypographyGlobalStyle;
+  }
+});
+var _Skeleton = require("./components/common/Skeleton");
+var _InvoiceboxLoader = require("./components/common/InvoiceboxLoader");
+var _Typography = require("./components/common/Typography");
+var _InvoiceboxSpinner = require("./components/common/InvoiceboxSpinner");
+var _SecondaryButton = require("./components/common/SecondaryButton");
+var _Arrow = require("./components/common/Arrow");
+var _InputLabel = require("./components/form/InputLabel");
+var _PureInput = require("./components/form/PureInput");
+var _PositiveIntegerInput = require("./components/form/PositiveIntegerInput");
+var _Dropdown = require("./components/common/Dropdown");
+var _Scrollbar = require("./components/common/Scrollbar");
+var _palette = require("./palette");

package/dist/palette/colors.stories.d.ts

@@ -0,0 +1,4 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Docs: StoryObj;

package/dist/palette/colors.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Docs = void 0;
+var _constants = require("./constants");
+var _Typography = require("../components/common/Typography");
+var meta = {
+  title: 'palette/Colors'
+};
+var _default = exports["default"] = meta;
+var Docs = exports.Docs = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 30
+      }
+    }, Object.keys(_constants.defaultAbstractPalette).map(function (key) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 20
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          backgroundColor: _constants.defaultAbstractPalette[key],
+          width: 40,
+          height: 40,
+          borderRadius: '50%'
+        }
+      }), /*#__PURE__*/React.createElement(_Typography.Typography, {
+        variant: "bodyL"
+      }, key, " ", _constants.defaultAbstractPalette[key]));
+    }));
+  }
+};

package/dist/palette/constants.d.ts

@@ -0,0 +1,2 @@
+import { TAbstractPalette } from './types';
+export declare const defaultAbstractPalette: TAbstractPalette;

package/dist/palette/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultAbstractPalette = void 0;
+var defaultAbstractPalette = exports.defaultAbstractPalette = {
+  primary: '#353F47',
+  secondary: '#FAD247',
+  base: '#FFFFFF',
+  error: '#EB5757',
+  neutralLight: '#f9f9f9',
+  neutralUsual: '#f1f2f6',
+  neutralHeavy: '#ececf0',
+  neutralMassive: '#dee0e7',
+  neutralFoggy: '#ccc',
+  neutralBrutal: '#999'
+};

package/dist/palette/context.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { TSkeletonPalette } from '../components/common/Skeleton/palette';
+import { TInvoiceboxSpinnerPalette } from '../components/common/InvoiceboxSpinner/palette';
+import { TSecondaryButtonPalette } from '../components/common/SecondaryButton/palette';
+import { TArrowPalette } from '../components/common/Arrow/palette';
+import { TInputLabelPalette } from '../components/form/InputLabel/palette';
+import { TPureInputPalette } from '../components/form/PureInput/palette';
+import { TDropdownPalette } from '../components/common/Dropdown/palette';
+import { TScrollbarPalette } from '../components/common/Scrollbar/palette';
+type TContext = {
+    skeleton: TSkeletonPalette;
+    invoiceboxSpinner: TInvoiceboxSpinnerPalette;
+    secondaryButton: TSecondaryButtonPalette;
+    arrow: TArrowPalette;
+    inputLabel: TInputLabelPalette;
+    pureInput: TPureInputPalette;
+    dropdown: TDropdownPalette;
+    scrollbar: TScrollbarPalette;
+};
+export declare const PaletteContext: import("react").Context<TContext>;
+export {};

package/dist/palette/context.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaletteContext = void 0;
+var _react = require("react");
+var _constants = require("./constants");
+var _palette = require("../components/common/Skeleton/palette");
+var _palette2 = require("../components/common/InvoiceboxSpinner/palette");
+var _palette3 = require("../components/common/SecondaryButton/palette");
+var _palette4 = require("../components/common/Arrow/palette");
+var _palette5 = require("../components/form/InputLabel/palette");
+var _palette6 = require("../components/form/PureInput/palette");
+var _palette7 = require("../components/common/Dropdown/palette");
+var _palette8 = require("../components/common/Scrollbar/palette");
+var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
+  skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
+  invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
+  secondaryButton: (0, _palette3.generateSecondaryButtonPalette)(_constants.defaultAbstractPalette),
+  arrow: (0, _palette4.generateArrowPalette)(_constants.defaultAbstractPalette),
+  inputLabel: (0, _palette5.generateInputLabelPalette)(_constants.defaultAbstractPalette),
+  pureInput: (0, _palette6.generatePureInputPalette)(_constants.defaultAbstractPalette),
+  dropdown: (0, _palette7.generateDropdownPalette)(_constants.defaultAbstractPalette),
+  scrollbar: (0, _palette8.generateScrollbarPalette)(_constants.defaultAbstractPalette)
+});

package/dist/palette/index.d.ts

@@ -0,0 +1,3 @@
+export { PaletteProvider } from './provider';
+export type { TAbstractPalette } from './types';
+export { useComponentPalette } from './useComponentPalette';

package/dist/palette/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PaletteProvider", {
+  enumerable: true,
+  get: function get() {
+    return _provider.PaletteProvider;
+  }
+});
+Object.defineProperty(exports, "useComponentPalette", {
+  enumerable: true,
+  get: function get() {
+    return _useComponentPalette.useComponentPalette;
+  }
+});
+var _provider = require("./provider");
+var _useComponentPalette = require("./useComponentPalette");

package/dist/palette/index.stories.d.ts

@@ -0,0 +1,4 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Docs: StoryObj;

package/dist/palette/index.stories.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Docs = void 0;
+var _Skeleton = require("../components/common/Skeleton");
+var _provider = require("./provider");
+var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
+var _Typography = require("../components/common/Typography");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Example = function Example(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 100,
+      height: 40
+    }
+  }, children);
+};
+var meta = {
+  title: 'palette/Palette'
+};
+var _default = exports["default"] = meta;
+var Docs = exports.Docs = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(_Typography.Typography, {
+      variant: "bodyL"
+    }, /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n# \u0421\u0438\u0441\u0442\u0435\u043C\u0430 \u0446\u0432\u0435\u0442\u043E\u0432\n\n### \u041F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E\n\n\u041C\u043E\u0436\u043D\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B \u0431\u0435\u0437 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0446\u0432\u0435\u0442\u043E\u0432, \u0442\u043E\u0433\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u044B \u0446\u0432\u0435\u0442\u0430 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E.\n\n```ts\n<Skeleton />\n```\n"), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null)), /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n### \u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0446\u0432\u0435\u0442\u043E\u0432 \u043D\u0430 \u0443\u0440\u043E\u0432\u043D\u0435 \u0432\u044B\u0437\u043E\u0432\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430\n\n\u041C\u043E\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u0446\u0432\u0435\u0442\u0430 \u043D\u0430 \u0443\u0440\u043E\u0432\u043D\u0435 \u0432\u044B\u0437\u043E\u0432\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430, \u0434\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u0441\u043E\u0439\u0441\u0442\u0432\u043E `palette`.\n\n```ts\n<Skeleton palette={{ bg: '#c9c', flicker: '#5a5' }} />\n```\n"), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
+      palette: {
+        bg: '#c9c',
+        flicker: '#5a5'
+      }
+    })), /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n### \u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0446\u0432\u0435\u0442\u043E\u0432 \u043A\u043E\u043D\u043A\u0440\u0435\u0442\u043D\u043E\u0433\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430\n\n\u041C\u043E\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u043A\u043E\u043D\u043A\u0440\u0435\u0442\u043D\u043E\u0433\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430. \u0414\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 `PaletteProvider`\n\u0438 \u0435\u0433\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0435\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0443.\n\n```ts\n<PaletteProvider skeleton={{ bg: '#39c', flicker: '#5cc' }}>\n    <Skeleton />\n</PaletteProvider>\n```\n"), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
+      skeleton: {
+        bg: '#39c',
+        flicker: '#5cc'
+      }
+    }, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n### \u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0445 \u0446\u0432\u0435\u0442\u043E\u0432\n\n\u0412\u0441\u0435 \u0446\u0432\u0435\u0442\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432 \u0441\u043E\u0437\u0434\u0430\u044E\u0442\u0441\u044F \u0438\u0437 \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0445 \u0446\u0432\u0435\u0442\u043E\u0432. \u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u044F\u044F \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430, \u043C\u043E\u0436\u043D\u043E \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \n\u0446\u0432\u0435\u0442\u043E\u0432\u0443\u044E \u043F\u0430\u043B\u0438\u0442\u0440\u0443 \u0432\u0441\u0435\u0445 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432 \u0440\u0430\u0437\u043E\u043C. \u042D\u0442\u043E \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u043E\u043B\u0435\u0437\u043D\u043E \u0434\u043B\u044F \u0442\u0435\u043C\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F.\n\u0414\u043B\u044F \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0445 \u0446\u0432\u0435\u0442\u043E\u0432 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 `PaletteProvider` \u0438 \u0435\u0433\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E `abstract`.\n\n```ts\n<PaletteProvider abstract={{ neutralUsual: '#c93', neutralLight: '#cc5' }}>\n    <Skeleton />\n</PaletteProvider>\n```\n"), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
+      "abstract": {
+        neutralUsual: '#c93',
+        neutralLight: '#cc5'
+      }
+    }, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n### \u041F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442 \u0446\u0432\u0435\u0442\u043E\u0432\n\n\u0421\u0430\u043C\u044B\u0439 \u0432\u044B\u0441\u043E\u043A\u0438\u0439 \u043F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442 \u0438\u043C\u0435\u044E\u0442 \u0446\u0432\u0435\u0442\u0430 \u043D\u0430 \u0443\u0440\u043E\u0432\u043D\u0435 \u0432\u044B\u0437\u043E\u0432\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430. \u0417\u0430\u0442\u0435\u043C \u0446\u0432\u0435\u0442\u0430 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E, \n\u043D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u043D\u044B\u0435 \u043F\u0440\u0438 \u043F\u043E\u043C\u043E\u0449\u0438 `PaletteProvider` \u0438 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0435\u0433\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430. \u0417\u0430\u0442\u0435\u043C \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430, \n\u043D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u043D\u044B\u0435 \u043F\u0440\u0438 \u043F\u043E\u043C\u043E\u0449\u0438 `PaletteProvider` \u0438 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 `abstract`.\n\n```ts\n<PaletteProvider abstract={{ neutralUsual: 'red' }} skeleton={{ bg: 'green' }}>\n    <Skeleton palette={{ bg: 'blue' }}/>\n</PaletteProvider>\n```\n"), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
+      "abstract": {
+        neutralUsual: 'red'
+      },
+      skeleton: {
+        bg: 'green'
+      }
+    }, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
+      palette: {
+        bg: 'blue'
+      }
+    }))), /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n```ts\n<PaletteProvider abstract={{ neutralUsual: 'red' }} skeleton={{ bg: 'green' }}>\n    <Skeleton />\n</PaletteProvider>\n```\n"), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
+      "abstract": {
+        neutralUsual: 'red'
+      },
+      skeleton: {
+        bg: 'green'
+      }
+    }, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n```ts\n<PaletteProvider abstract={{ neutralUsual: 'red' }}>\n    <Skeleton />\n</PaletteProvider>\n```\n"), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
+      "abstract": {
+        neutralUsual: 'red'
+      }
+    }, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n### \u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0438 \u043F\u043E\u043B\u043D\u043E\u0435 \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0446\u0432\u0435\u0442\u043E\u0432\n\n\u041D\u0430 \u043B\u044E\u0431\u043E\u043C \u0443\u0440\u043E\u0432\u043D\u0435 \u043C\u043E\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u043B\u044E\u0431\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0446\u0432\u0435\u0442\u043E\u0432.\n\n```ts\n<Skeleton palette={{ bg: 'pink' }}/>\n```\n"), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
+      palette: {
+        bg: 'pink'
+      }
+    })), /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n```ts\n<Skeleton palette={{ flicker: 'brown' }}/>\n```\n"), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
+      palette: {
+        flicker: 'brown'
+      }
+    })), /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n```ts\n<Skeleton palette={{ bg: 'pink', flicker: 'brown' }}/>\n```\n"), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
+      palette: {
+        bg: 'pink',
+        flicker: 'brown'
+      }
+    })));
+  }
+};

package/dist/palette/provider.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react';
+import { TSkeletonPalette } from '../components/common/Skeleton/palette';
+import { TAbstractPalette } from './types';
+import { TInvoiceboxSpinnerPalette } from '../components/common/InvoiceboxSpinner/palette';
+import { TSecondaryButtonPalette } from '../components/common/SecondaryButton/palette';
+import { TArrowPalette } from '../components/common/Arrow/palette';
+import { TInputLabelPalette } from '../components/form/InputLabel/palette';
+import { TPureInputPalette } from '../components/form/PureInput/palette';
+type TProps = {
+    children: ReactNode;
+    abstract?: Partial<TAbstractPalette>;
+    skeleton?: Partial<TSkeletonPalette>;
+    invoiceboxSpinner?: Partial<TInvoiceboxSpinnerPalette>;
+    secondaryButton?: Partial<TSecondaryButtonPalette>;
+    arrow?: Partial<TArrowPalette>;
+    inputLabel?: Partial<TInputLabelPalette>;
+    pureInput?: Partial<TPureInputPalette>;
+};
+export declare const PaletteProvider: FC<TProps>;
+export {};