@cashub/ui 0.1.0

package/animate/Collapse.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Collapse = function Collapse(_ref) {
+  var inProp = _ref.in,
+      _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? 1000 : _ref$duration,
+      _children = _ref.children,
+      onEntered = _ref.onEntered,
+      onExit = _ref.onExit,
+      onExited = _ref.onExited;
+  var childRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)({
+    show: inProp,
+    height: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var defaultStyle = (0, _react.useMemo)(function () {
+    var style = {
+      transition: "height ".concat(duration, "ms ease-in-out"),
+      height: state.height,
+      overflow: "hidden"
+    };
+    return style;
+  }, [duration, state.height]);
+  var transitionStyles = (0, _react.useMemo)(function () {
+    return {
+      entering: {
+        height: state.height
+      },
+      entered: {
+        height: state.height
+      },
+      exiting: {
+        height: 0
+      },
+      exited: {
+        height: 0
+      }
+    };
+  }, [state.height]);
+  (0, _react.useEffect)(function () {
+    setState({
+      show: inProp,
+      height: childRef.current.clientHeight
+    });
+  }, [inProp]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
+    in: state.show,
+    timeout: duration,
+    onEntered: onEntered,
+    onExit: onExit,
+    onExited: onExited,
+    children: function children(state) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state]),
+        children: /*#__PURE__*/(0, _react.cloneElement)(_children, {
+          ref: childRef
+        })
+      });
+    }
+  });
+};
+
+var _default = Collapse;
+exports.default = _default;

package/animate/Loader.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _LoadingBackdrop = _interopRequireDefault(require("../backdrop/LoadingBackdrop"));
+
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Loader = function Loader(_ref) {
+  var transparent = _ref.transparent,
+      backgroundFill = _ref.backgroundFill,
+      _ref$$loading = _ref.$loading,
+      $loading = _ref$$loading === void 0 ? true : _ref$$loading,
+      text = _ref.text;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    transparent: transparent,
+    backgroundFill: backgroundFill,
+    $loading: $loading,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {}), text && /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
+      children: text
+    })]
+  });
+};
+
+var Wrapper = (0, _styledComponents.default)(_LoadingBackdrop.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: 200;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
+  var transparent = _ref2.transparent;
+  return transparent && 'background: transparent;';
+}, function (_ref3) {
+  var backgroundFill = _ref3.backgroundFill;
+  return backgroundFill && 'background: var(--color-background1);';
+}, function (_ref4) {
+  var $loading = _ref4.$loading;
+  return !$loading && 'display: none;';
+});
+
+var Text = _styledComponents.default.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: var(--spacing) 0;\n  font-size: var(--font-h2);\n"])));
+
+var _default = Loader;
+exports.default = _default;

package/animate/NumberCounter.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var NumberCounter = function NumberCounter(_ref) {
+  var start = _ref.start,
+      end = _ref.end,
+      duration = _ref.duration;
+
+  var _useState = (0, _react.useState)(start),
+      _useState2 = _slicedToArray(_useState, 2),
+      number = _useState2[0],
+      setNumber = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (end === null || end === undefined) return;
+    if (start === end) return;
+    var range = end - start;
+    var current = start;
+    var increment = end > start ? 1 : -1;
+    var stepTime = Math.abs(Math.floor(duration / range));
+    var timer = setInterval(function () {
+      current += increment;
+      setNumber(current);
+
+      if (current === end) {
+        clearInterval(timer);
+      }
+    }, stepTime);
+    return function () {
+      clearInterval(timer);
+    };
+  }, [start, end, duration]);
+  return number;
+};
+
+var _default = NumberCounter;
+exports.default = _default;

package/animate/PulseRing.js

@@ -0,0 +1,34 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _Pulse = _interopRequireDefault(require("../keyframe/Pulse"));
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var PulseRing = _styledComponents.default.span.attrs(function () {
+  return {
+    role: 'presentation'
+  };
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  border-radius: var(--border-radius-round);\n  height: 40px;\n  width: 40px;\n  position: absolute;\n  top: 0;\n  z-index: -1;\n  opacity: 0;\n  border: 4px solid var(--color-primary);\n\n  ", "\n"])), function (_ref) {
+  var play = _ref.play;
+  return play && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      animation: ", " 3.5s ease-out;\n      animation-iteration-count: infinite;\n    "])), _Pulse.default);
+});
+
+var _default = PulseRing;
+exports.default = _default;

package/animate/Spinner.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Spin = _interopRequireDefault(require("../keyframe/Spin"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Spinner = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: 0.3rem solid var(--color-background2);\n  border-top-color: var(--color-primary);\n  animation: 1s ", " infinite linear;\n"])), _Spin.default);
+
+var _default = Spinner;
+exports.default = _default;

package/animate/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Collapse", {
+  enumerable: true,
+  get: function get() {
+    return _Collapse.default;
+  }
+});
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function get() {
+    return _Loader.default;
+  }
+});
+Object.defineProperty(exports, "NumberCounter", {
+  enumerable: true,
+  get: function get() {
+    return _NumberCounter.default;
+  }
+});
+Object.defineProperty(exports, "PulseRing", {
+  enumerable: true,
+  get: function get() {
+    return _PulseRing.default;
+  }
+});
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function get() {
+    return _Spinner.default;
+  }
+});
+
+var _Collapse = _interopRequireDefault(require("./Collapse"));
+
+var _Loader = _interopRequireDefault(require("./Loader"));
+
+var _NumberCounter = _interopRequireDefault(require("./NumberCounter"));
+
+var _PulseRing = _interopRequireDefault(require("./PulseRing"));
+
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/backdrop/BaseBackdrop.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BaseBackdrop = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--color-backdrop);\n  z-index: 50;\n"])));
+
+var _default = BaseBackdrop;
+exports.default = _default;

package/backdrop/LoadingBackdrop.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _BaseBackdrop = _interopRequireDefault(require("./BaseBackdrop"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var LoadingBackdrop = (0, _styledComponents.default)(_BaseBackdrop.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-primary);\n"])));
+var _default = LoadingBackdrop;
+exports.default = _default;

package/backdrop/ModalBackdrop.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _BaseBackdrop = _interopRequireDefault(require("./BaseBackdrop"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var ModalBackdrop = (0, _styledComponents.default)(_BaseBackdrop.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var _default = ModalBackdrop;
+exports.default = _default;

package/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _animate = require("./animate");
+
+Object.keys(_animate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _animate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _animate[key];
+    }
+  });
+});

package/keyframe/Pulse.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Pulse = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0.1, 0.1);\n    opacity: 0;\n  }\n  10% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1.2, 1.2);\n    opacity: 0;\n  }\n"])));
+var _default = Pulse;
+exports.default = _default;

package/keyframe/Spin.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Spin = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var _default = Spin;
+exports.default = _default;

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@cashub/ui",
+  "version": "0.1.0",
+  "private": false,
+  "author": "CASHUB Team",
+  "description": "CASHUB UI components library",
+  "main": "index.js",
+  "keywords": [
+    "CASHUB"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "styled-components": "^5.3.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}