@cashub/ui-elv 1.0.0

package/form/SwitchButton.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const SwitchButton = _ref => {
+  let {
+    htmlFor,
+    text,
+    disabled,
+    checked = false,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, {
+    htmlFor: htmlFor,
+    disabled: disabled,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, {
+      onChange: () => {
+        onChange(checked ? 0 : 1);
+      },
+      checked: checked,
+      type: "checkbox",
+      id: htmlFor,
+      disabled: disabled
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchTrack, {
+        checked: checked
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchThumb, {
+        checked: checked
+      }), text]
+    })]
+  });
+};
+const Label = _styledComponents.default.label`
+  display: inline-block;
+
+  ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && (0, _styledComponents.css)`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `;
+}}
+`;
+const Checkbox = _styledComponents.default.input`
+  display: none;
+`;
+const Switch = _styledComponents.default.span`
+  color: var(--font-on-background);
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  ${_ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled && (0, _styledComponents.css)`
+      opacity: 0.5;
+    `;
+}}
+`;
+const SwitchTrack = _styledComponents.default.div`
+  position: relative;
+  width: 32px;
+  height: 16px;
+  border-radius: var(--border-radius);
+  background: ${_ref4 => {
+  let {
+    checked
+  } = _ref4;
+  return !checked ? 'var(--color-grey)' : 'var(--color-primary)';
+}};
+  opacity: 0.5;
+  margin-right: calc(var(--spacing-xs) + 12px);
+  left: ${_ref5 => {
+  let {
+    checked
+  } = _ref5;
+  return checked ? '0' : '12px';
+}};
+`;
+const SwitchThumb = _styledComponents.default.span`
+  width: 24px;
+  height: 24px;
+  background: var(--color-grey);
+  border-radius: var(--border-radius-round);
+  position: absolute;
+  transition: 0.3s;
+
+  ${_ref6 => {
+  let {
+    checked
+  } = _ref6;
+  return !checked ? 'left: 0;' : 'left: 20px;  background: var(--color-primary);';
+}}
+`;
+var _default = exports.default = SwitchButton;

package/form/Textarea.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPlaceholder"));
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Textarea = _styledComponents.default.textarea`
+  display: block;
+  width: 100%;
+  border: var(--border-width) solid var(--border-color);
+  padding: 10px var(--spacing-s);
+  border-radius: var(--border-radius);
+  background: transparent;
+  color: var(--font-on-background);
+  transition: 0.3s;
+  line-height: 1.5;
+
+  /* disable resize because currently cannot fully control the resizer element */
+  resize: none;
+
+  ${_scrollbar.default}
+
+  &:focus {
+    border: var(--border-width) solid var(--color-primary);
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  ${(0, _inputPlaceholder.default)`
+    color: var(--font-on-mute);
+  `}
+`;
+var _default = exports.default = Textarea;

package/form/TreeView.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Label = _interopRequireDefault(require("./Label"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _container = require("../container");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TreeView = _ref => {
+  let {
+    data,
+    onChange,
+    onBlur
+  } = _ref;
+  const renderList = function (data) {
+    let parentPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(UnorderedList, {
+      children: data.map(item => {
+        const id = `${parentPath.join('')}${item.id}`.replace(/\s/g, '');
+        const currentPath = parentPath.concat(item.id);
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          children: [item.type === 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+            noMargin: true,
+            htmlFor: id,
+            checked: item.value,
+            text: item.text,
+            onChange: event => {
+              onChange(event, currentPath);
+            },
+            disabled: item.disabled
+          }), item.type === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_container.FlexContainer, {
+            alignCenter: true,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
+              noMarginBottom: true,
+              htmlFor: id,
+              children: item.text
+            }), "\xA0", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+              autoWidth: true,
+              type: "text",
+              id: id,
+              value: item.value,
+              onChange: event => {
+                onChange(event, currentPath);
+              },
+              onBlur: event => {
+                onBlur(event, currentPath);
+              },
+              disabled: item.disabled
+            })]
+          }), item.children?.length > 0 ? renderList(item.children, parentPath.concat(item.id)) : null]
+        }, item.id);
+      })
+    });
+  };
+  return renderList(data);
+};
+const UnorderedList = _styledComponents.default.ul`
+  color: var(--font-on-background);
+
+  ul {
+    margin-left: var(--spacing-s);
+  }
+
+  li {
+    margin-top: var(--spacing-xs);
+  }
+`;
+var _default = exports.default = TreeView;

package/form/index.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "Fieldset", {
+  enumerable: true,
+  get: function () {
+    return _Fieldset.default;
+  }
+});
+Object.defineProperty(exports, "FormItem", {
+  enumerable: true,
+  get: function () {
+    return _FormItem.default;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () {
+    return _Input.default;
+  }
+});
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function () {
+    return _Label.default;
+  }
+});
+Object.defineProperty(exports, "MutedText", {
+  enumerable: true,
+  get: function () {
+    return _MutedText.default;
+  }
+});
+Object.defineProperty(exports, "PasswordInput", {
+  enumerable: true,
+  get: function () {
+    return _PasswordInput.default;
+  }
+});
+Object.defineProperty(exports, "RadioButton", {
+  enumerable: true,
+  get: function () {
+    return _RadioButton.default;
+  }
+});
+Object.defineProperty(exports, "SearchSelect", {
+  enumerable: true,
+  get: function () {
+    return _SearchSelect.default;
+  }
+});
+Object.defineProperty(exports, "Searchbox", {
+  enumerable: true,
+  get: function () {
+    return _Searchbox.default;
+  }
+});
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () {
+    return _Slider.default;
+  }
+});
+Object.defineProperty(exports, "SwitchButton", {
+  enumerable: true,
+  get: function () {
+    return _SwitchButton.default;
+  }
+});
+Object.defineProperty(exports, "Textarea", {
+  enumerable: true,
+  get: function () {
+    return _Textarea.default;
+  }
+});
+Object.defineProperty(exports, "TreeView", {
+  enumerable: true,
+  get: function () {
+    return _TreeView.default;
+  }
+});
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _Fieldset = _interopRequireDefault(require("./Fieldset"));
+var _FormItem = _interopRequireDefault(require("./FormItem"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _Label = _interopRequireDefault(require("./Label"));
+var _MutedText = _interopRequireDefault(require("./MutedText"));
+var _PasswordInput = _interopRequireDefault(require("./PasswordInput"));
+var _RadioButton = _interopRequireDefault(require("./RadioButton"));
+var _Searchbox = _interopRequireDefault(require("./Searchbox"));
+var _Slider = _interopRequireDefault(require("./Slider"));
+var _SwitchButton = _interopRequireDefault(require("./SwitchButton"));
+var _Textarea = _interopRequireDefault(require("./Textarea"));
+var _TreeView = _interopRequireDefault(require("./TreeView"));
+var _SearchSelect = _interopRequireDefault(require("./SearchSelect"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/grid/Column.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Column = _styledComponents.default.div`
+  padding: 0 calc(var(--spacing) / 2);
+  grid-column-end: span ${_ref => {
+  let {
+    desktop
+  } = _ref;
+  return desktop;
+}};
+
+  ${_ref2 => {
+  let {
+    laptop
+  } = _ref2;
+  return laptop && _media.default.laptop`
+        grid-column-end: span ${laptop};
+      `;
+}}
+
+  ${_ref3 => {
+  let {
+    tablet
+  } = _ref3;
+  return tablet && _media.default.tablet`
+        grid-column-end: span ${tablet};
+      `;
+}}
+
+  ${_ref4 => {
+  let {
+    mobile
+  } = _ref4;
+  return mobile && _media.default.mobile`
+        grid-column-end: span ${mobile};
+      `;
+}}
+`;
+var _default = exports.default = Column;

package/grid/Grid.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Grid = _styledComponents.default.div`
+  display: grid;
+  grid-template-columns: repeat(${_ref => {
+  let {
+    columns
+  } = _ref;
+  return columns;
+}}, minmax(0, 1fr));
+  margin: 0 calc(var(--spacing) * -1 / 2);
+
+  > * {
+    grid-column-end: span ${_ref2 => {
+  let {
+    columns
+  } = _ref2;
+  return columns;
+}};
+  }
+
+  ${_ref3 => {
+  let {
+    alignCenter
+  } = _ref3;
+  return alignCenter && 'align-items: center;';
+}}
+`;
+var _default = exports.default = Grid;

package/grid/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Column", {
+  enumerable: true,
+  get: function () {
+    return _Column.default;
+  }
+});
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
+var _Grid = _interopRequireDefault(require("./Grid"));
+var _Column = _interopRequireDefault(require("./Column"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/heading/Heading1.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Heading1 = _styledComponents.default.h1`
+  font-size: var(--font-h1);
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ${_ref => {
+  let {
+    center
+  } = _ref;
+  return center && 'text-align: center;';
+}}
+`;
+var _default = exports.default = Heading1;

package/heading/Heading2.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Heading2 = _styledComponents.default.h2`
+  font-size: var(--font-h2);
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ${_ref => {
+  let {
+    center
+  } = _ref;
+  return center && 'text-align: center;';
+}}
+
+  ${_ref2 => {
+  let {
+    marginBottom
+  } = _ref2;
+  return marginBottom && 'margin-bottom: var(--spacing);';
+}}
+`;
+var _default = exports.default = Heading2;

package/heading/Heading3.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Heading3 = _styledComponents.default.h3`
+  font-size: var(--font-h3);
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ${_ref => {
+  let {
+    center
+  } = _ref;
+  return center && 'text-align: center;';
+}}
+
+  ${_ref2 => {
+  let {
+    fontWeightNormal
+  } = _ref2;
+  return fontWeightNormal && 'font-weight: normal;';
+}}
+
+  ${_ref3 => {
+  let {
+    marginBottomS
+  } = _ref3;
+  return marginBottomS && 'margin-bottom: var(--spacing-s);';
+}}
+
+  ${_ref4 => {
+  let {
+    marginBottomXS
+  } = _ref4;
+  return marginBottomXS && 'margin-bottom: var(--spacing-xs);';
+}}
+
+  ${_ref5 => {
+  let {
+    paddingBottomXS
+  } = _ref5;
+  return paddingBottomXS && 'padding-bottom: var(--spacing-xs);';
+}}
+`;
+var _default = exports.default = Heading3;

package/heading/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Heading1", {
+  enumerable: true,
+  get: function () {
+    return _Heading.default;
+  }
+});
+Object.defineProperty(exports, "Heading2", {
+  enumerable: true,
+  get: function () {
+    return _Heading2.default;
+  }
+});
+Object.defineProperty(exports, "Heading3", {
+  enumerable: true,
+  get: function () {
+    return _Heading3.default;
+  }
+});
+var _Heading = _interopRequireDefault(require("./Heading1"));
+var _Heading2 = _interopRequireDefault(require("./Heading2"));
+var _Heading3 = _interopRequireDefault(require("./Heading3"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/helmet/Helmet.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactHelmetAsync = require("react-helmet-async");
+var _jsxRuntime = require("react/jsx-runtime");
+const Helmet = _ref => {
+  let {
+    title,
+    description
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactHelmetAsync.Helmet, {
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+      children: title
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("meta", {
+      name: "description",
+      content: description
+    })]
+  });
+};
+var _default = exports.default = Helmet;

package/helmet/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Helmet", {
+  enumerable: true,
+  get: function () {
+    return _Helmet.default;
+  }
+});
+Object.defineProperty(exports, "HelmetProvider", {
+  enumerable: true,
+  get: function () {
+    return _reactHelmetAsync.HelmetProvider;
+  }
+});
+var _Helmet = _interopRequireDefault(require("./Helmet"));
+var _reactHelmetAsync = require("react-helmet-async");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/iconbox/ApplicationIconBox.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
+var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ApplicationIconBox = _styledComponents.default.div`
+  margin-bottom: var(--spacing);
+
+  ${_ref => {
+  let {
+    clickable
+  } = _ref;
+  return clickable && 'cursor: pointer';
+}};
+`;
+const Body = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--spacing-xs);
+  border: var(--border-width) solid transparent;
+
+  ${_ref2 => {
+  let {
+    horizontal
+  } = _ref2;
+  return horizontal && 'flex-direction: row;';
+}}
+  ${_ref3 => {
+  let {
+    alignCenter
+  } = _ref3;
+  return alignCenter && 'text-align: center;';
+}}
+  ${_ref4 => {
+  let {
+    selected
+  } = _ref4;
+  return selected && `
+      border-color: var(--border-color);
+      border-radius: var(--border-radius);
+      box-shadow: var(--box-shadow);
+    `;
+}}
+`;
+const Description = _styledComponents.default.div`
+  min-width: 0;
+`;
+const Title = _styledComponents.default.div`
+  font-weight: var(--font-bold);
+  font-size: var(--font-body1);
+  margin-bottom: var(--spacing-xs);
+  color: var(--font-on-background);
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+
+  a {
+    color: var(--font-on-background);
+  }
+`;
+const Content = _styledComponents.default.div`
+  font-size: var(--font-body1);
+  color: var(--font-on-mute);
+  margin-bottom: var(--spacing-xs);
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+`;
+var _default = exports.default = Object.assign(ApplicationIconBox, {
+  Body,
+  Description,
+  Title,
+  Content,
+  Figure: _IconBoxFigure.default,
+  Image: _IconBoxImage.default
+});