@invoicebox/ui 0.1.0-alpha.176 → 0.1.0-alpha.178

package/dist/components/common/PointsLoader/index.d.ts

@@ -0,0 +1 @@
+export declare const PointsLoader: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/common/PointsLoader/index.js

@@ -0,0 +1,26 @@
+"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.PointsLoader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../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 && {}.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(e) { return e && e.__esModule ? e : { "default": e }; }
+var points = new Array(3).fill('').map(function (item, index) {
+  return index;
+});
+var PointsLoader = exports.PointsLoader = function PointsLoader() {
+  var palette = (0, _palette.useComponentPalette)('pointsLoader');
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, null, points.map(function (pointItem) {
+    return /*#__PURE__*/_react["default"].createElement(S.Point, {
+      key: pointItem,
+      $activeColor: palette.active,
+      $defaultColor: palette["default"]
+    });
+  }));
+};

package/dist/components/common/PointsLoader/index.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/react';
+import { PointsLoader } from '.';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj<typeof PointsLoader>;

package/dist/components/common/PointsLoader/index.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/PointsLoader',
+  component: _.PointsLoader,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {}
+};

package/dist/components/common/PointsLoader/palette.d.ts

@@ -0,0 +1,6 @@
+import { TAbstractPalette } from '../../../palette';
+export type TPointsLoaderPalette = {
+    active: string;
+    default: string;
+};
+export declare const generatePointsLoaderPalette: (abstractPalette: TAbstractPalette) => TPointsLoaderPalette;

package/dist/components/common/PointsLoader/palette.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatePointsLoaderPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generatePointsLoaderPalette = exports.generatePointsLoaderPalette = function generatePointsLoaderPalette(abstractPalette) {
+  return {
+    active: abstractPalette.primary,
+    "default": (0, _hexToRgba["default"])(abstractPalette.primary, 0.2)
+  };
+};

package/dist/components/common/PointsLoader/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Point: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $activeColor: string;
+    $defaultColor: string;
+}>> & string;

package/dist/components/common/PointsLoader/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Point = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-epi71s-0"
+})(["display:flex;align-items:center;gap:12px;height:18px;padding:6px;"]);
+var Point = exports.Point = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Point",
+  componentId: "sc-epi71s-1"
+})(["background-color:", ";@keyframes colorChange{0%,100%{background-color:", ";}33%{background-color:", ";}66%{background-color:", ";}}width:6px;height:6px;border-radius:50%;animation:colorChange 3s infinite;&:nth-child(2){animation-delay:1s;}&:nth-child(3){animation-delay:2s;}"], function (_ref) {
+  var $defaultColor = _ref.$defaultColor;
+  return $defaultColor;
+}, function (_ref2) {
+  var $defaultColor = _ref2.$defaultColor;
+  return $defaultColor;
+}, function (_ref3) {
+  var $activeColor = _ref3.$activeColor;
+  return $activeColor;
+}, function (_ref4) {
+  var $defaultColor = _ref4.$defaultColor;
+  return $defaultColor;
+});

package/dist/components/common/ReadOnlyLabelValueField/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { TSizes } from '../../form/constants';
+export type TProps = {
+    label: string;
+    value?: string;
+    size?: TSizes;
+};
+export declare const ReadOnlyLabelValueField: FC<TProps>;

package/dist/components/common/ReadOnlyLabelValueField/index.js

@@ -0,0 +1,34 @@
+"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.ReadOnlyLabelValueField = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _constants = require("../../form/constants");
+var _InputLabel = require("../../form/InputLabel");
+var _palette = require("../../../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 && {}.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(e) { return e && e.__esModule ? e : { "default": e }; }
+var ReadOnlyLabelValueField = exports.ReadOnlyLabelValueField = function ReadOnlyLabelValueField(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'M' : _ref$size;
+  var _SIZE_PARAMS_MAP$size = _constants.SIZE_PARAMS_MAP[size],
+    paddingBottom = _SIZE_PARAMS_MAP$size.paddingBottom,
+    paddingTop = _SIZE_PARAMS_MAP$size.paddingTop,
+    variant = _SIZE_PARAMS_MAP$size.variant;
+  var palette = (0, _palette.useComponentPalette)('readOnlyLabelValueField');
+  return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
+    label: label
+  }, /*#__PURE__*/_react["default"].createElement(S.Value, {
+    $color: palette.value,
+    $paddingTop: paddingTop,
+    $paddingBottom: paddingBottom,
+    variant: variant
+  }, value));
+};

package/dist/components/common/ReadOnlyLabelValueField/index.stories.d.ts

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

package/dist/components/common/ReadOnlyLabelValueField/index.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/ReadOnlyLabelValueField',
+  component: _.ReadOnlyLabelValueField,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    label: 'Label',
+    value: 'Value',
+    size: 'L'
+  }
+};

package/dist/components/common/ReadOnlyLabelValueField/palette.d.ts

@@ -0,0 +1,5 @@
+import { TAbstractPalette } from '../../../palette';
+export type TReadOnlyLabelValueFieldPalette = {
+    value: string;
+};
+export declare const generateReadOnlyLabelValueFieldPalette: (abstractPalette: TAbstractPalette) => TReadOnlyLabelValueFieldPalette;

package/dist/components/common/ReadOnlyLabelValueField/palette.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateReadOnlyLabelValueFieldPalette = void 0;
+var generateReadOnlyLabelValueFieldPalette = exports.generateReadOnlyLabelValueFieldPalette = function generateReadOnlyLabelValueFieldPalette(abstractPalette) {
+  return {
+    value: abstractPalette.primary
+  };
+};

package/dist/components/common/ReadOnlyLabelValueField/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Value: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
+    $paddingTop: number;
+    $paddingBottom: number;
+    $color: string;
+}>> & string & Omit<import("react").FC<import("../Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common/ReadOnlyLabelValueField/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Value = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Value = exports.Value = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "styles__Value",
+  componentId: "sc-630k3x-0"
+})(["padding-left:20px;padding-right:12px;padding-top:", "px;padding-bottom:", "px;color:", ";"], function (_ref) {
+  var $paddingTop = _ref.$paddingTop;
+  return $paddingTop;
+}, function (_ref2) {
+  var $paddingBottom = _ref2.$paddingBottom;
+  return $paddingBottom;
+}, function (_ref3) {
+  var $color = _ref3.$color;
+  return $color;
+});

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { Select } from './components/form/Select';
 export type { TProps as TSelectProps } from './components/form/Select';
 export { Toggle } from './components/form/Toggle';
 export type { TProps as TToggleProps } from './components/form/Toggle';
+export { PointsLoader } from './components/common/PointsLoader';
 export { Calendar } from './components/common/Calendar';
 export type { TProps as TCalendarProps } from './components/common/Calendar';
 export { DateInput } from './components/form/DateInput';
@@ -29,6 +30,8 @@ export { WarningIcon } from './components/common/WarningIcon';
 export type { TProps as TWarningIconProps } from './components/common/WarningIcon';
 export { Divider } from './components/common/Divider';
 export type { TProps as TDividerProps } from './components/common/Divider';
+export { ReadOnlyLabelValueField } from './components/common/ReadOnlyLabelValueField';
+export type { TProps as TReadOnlyLabelValueFieldProps } from './components/common/ReadOnlyLabelValueField';
 export { SearchInput } from './components/form/SearchInput';
 export type { TProps as TSearchInputProps } from './components/form/SearchInput';
 export { CodeInput } from './components/form/CodeInput';

package/dist/index.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "PhoneInput", {
     return _PhoneInput.PhoneInput;
   }
 });
+Object.defineProperty(exports, "PointsLoader", {
+  enumerable: true,
+  get: function get() {
+    return _PointsLoader.PointsLoader;
+  }
+});
 Object.defineProperty(exports, "PositiveIntegerInput", {
   enumerable: true,
   get: function get() {
@@ -171,6 +177,12 @@ Object.defineProperty(exports, "QRCode", {
     return _QRCode.QRCode;
   }
 });
+Object.defineProperty(exports, "ReadOnlyLabelValueField", {
+  enumerable: true,
+  get: function get() {
+    return _ReadOnlyLabelValueField.ReadOnlyLabelValueField;
+  }
+});
 Object.defineProperty(exports, "Scrollbar", {
   enumerable: true,
   get: function get() {
@@ -331,10 +343,12 @@ var _EntityAutocompleteOptionsDrawer = require("./components/common/EntityAutoco
 var _Scrollbar = require("./components/common/Scrollbar");
 var _Select = require("./components/form/Select");
 var _Toggle = require("./components/form/Toggle");
+var _PointsLoader = require("./components/common/PointsLoader");
 var _Calendar = require("./components/common/Calendar");
 var _DateInput = require("./components/form/DateInput");
 var _WarningIcon = require("./components/common/WarningIcon");
 var _Divider = require("./components/common/Divider");
+var _ReadOnlyLabelValueField = require("./components/common/ReadOnlyLabelValueField");
 var _SearchInput = require("./components/form/SearchInput");
 var _CodeInput = require("./components/form/CodeInput");
 var _Flag = require("./components/common/Flag");

package/dist/palette/context.d.ts

@@ -24,6 +24,8 @@ import { TEntityAutocompleteOptionsDrawerPalette } from '../components/common/En
 import { TCodeInputPalette } from '../components/form/CodeInput/palette';
 import { TResetButtonPalette } from '../components/form/ResetButton/palette';
 import { TTogglePalette } from '../components/form/Toggle/palette';
+import { TReadOnlyLabelValueFieldPalette } from '../components/common/ReadOnlyLabelValueField/palette';
+import { TPointsLoaderPalette } from '../components/common/PointsLoader/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
@@ -50,6 +52,8 @@ type TContext = {
     codeInput: TCodeInputPalette;
     resetButton: TResetButtonPalette;
     toggle: TTogglePalette;
+    readOnlyLabelValueField: TReadOnlyLabelValueFieldPalette;
+    pointsLoader: TPointsLoaderPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -31,6 +31,8 @@ var _palette22 = require("../components/common/EntityAutocompleteOptionsDrawer/p
 var _palette23 = require("../components/form/CodeInput/palette");
 var _palette24 = require("../components/form/ResetButton/palette");
 var _palette25 = require("../components/form/Toggle/palette");
+var _palette26 = require("../components/common/ReadOnlyLabelValueField/palette");
+var _palette27 = require("../components/common/PointsLoader/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
   invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
@@ -56,5 +58,7 @@ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createCont
   entityAutocompleteOptionsDrawer: (0, _palette22.generateEntityAutocompleteOptionsDrawerPalette)(_constants.defaultAbstractPalette),
   codeInput: (0, _palette23.generateCodeInputPalette)(_constants.defaultAbstractPalette),
   resetButton: (0, _palette24.generateResetButtonPalette)(_constants.defaultAbstractPalette),
-  toggle: (0, _palette25.generateTogglePalette)(_constants.defaultAbstractPalette)
+  toggle: (0, _palette25.generateTogglePalette)(_constants.defaultAbstractPalette),
+  readOnlyLabelValueField: (0, _palette26.generateReadOnlyLabelValueFieldPalette)(_constants.defaultAbstractPalette),
+  pointsLoader: (0, _palette27.generatePointsLoaderPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.js

@@ -32,6 +32,8 @@ var _palette22 = require("../components/common/EntityAutocompleteOptionsDrawer/p
 var _palette23 = require("../components/form/CodeInput/palette");
 var _palette24 = require("../components/form/ResetButton/palette");
 var _palette25 = require("../components/form/Toggle/palette");
+var _palette26 = require("../components/common/ReadOnlyLabelValueField/palette");
+var _palette27 = require("../components/common/PointsLoader/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 && {}.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 _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); }
@@ -76,7 +78,9 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
       entityAutocompleteOptionsDrawer: (0, _palette22.generateEntityAutocompleteOptionsDrawerPalette)(mergedAbstractPalette),
       codeInput: (0, _palette23.generateCodeInputPalette)(mergedAbstractPalette),
       resetButton: (0, _palette24.generateResetButtonPalette)(mergedAbstractPalette),
-      toggle: (0, _palette25.generateTogglePalette)(mergedAbstractPalette)
+      toggle: (0, _palette25.generateTogglePalette)(mergedAbstractPalette),
+      readOnlyLabelValueField: (0, _palette26.generateReadOnlyLabelValueFieldPalette)(mergedAbstractPalette),
+      pointsLoader: (0, _palette27.generatePointsLoaderPalette)(mergedAbstractPalette)
     };
   }, [mergedSkeletonPalette, mergedAbstractPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {

package/dist/palette/usePalette.d.ts

@@ -24,4 +24,6 @@ export declare const usePalette: () => {
     codeInput: import("../components/form/CodeInput/palette").TCodeInputPalette;
     resetButton: import("../components/form/ResetButton/palette").TResetButtonPalette;
     toggle: import("../components/form/Toggle/palette").TTogglePalette;
+    readOnlyLabelValueField: import("../components/common/ReadOnlyLabelValueField/palette").TReadOnlyLabelValueFieldPalette;
+    pointsLoader: import("../components/common/PointsLoader/palette").TPointsLoaderPalette;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.176",
+    "version": "0.1.0-alpha.178",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {