@cashub/ui-elv 1.0.0

package/table/subComponent/BaseTableHeadCell.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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 BaseTableHeadCell = _styledComponents.default.th`
+  position: relative;
+  font-size: var(--font-body1);
+  font-weight: var(--font-bold);
+  width: ${_ref => {
+  let {
+    width
+  } = _ref;
+  return width || 'auto';
+}};
+  padding: var(--spacing-s) var(--spacing-xs);
+
+  > div {
+    display: flex;
+
+    > span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  ${_ref2 => {
+  let {
+    sortable
+  } = _ref2;
+  return sortable && (0, _styledComponents.css)`
+        cursor: pointer;
+
+        > div > span {
+          max-width: calc(100% - 1rem);
+          padding-right: var(--spacing-xs);
+        }
+      `;
+}}
+
+  ${_ref3 => {
+  let {
+    align
+  } = _ref3;
+  switch (align) {
+    case 'center':
+      return (0, _styledComponents.css)`
+          > div {
+            justify-content: center;
+          }
+        `;
+    default:
+      break;
+  }
+}}
+`;
+var _default = exports.default = BaseTableHeadCell;

package/table/subComponent/GridTableFooter.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _TableFooter = _interopRequireDefault(require("./TableFooter"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GridTableFooter = (0, _styledComponents.default)(_TableFooter.default)`
+  position: sticky;
+  bottom: 0;
+  height: 48px;
+  padding: 0 var(--spacing-xs);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  background: ${_ref => {
+  let {
+    backgroundReverse
+  } = _ref;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+`;
+var _default = exports.default = GridTableFooter;

package/table/subComponent/GridTableHeadCell.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _BaseTableHeadCell = _interopRequireDefault(require("./BaseTableHeadCell"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GridTableHeadCell = (0, _styledComponents.default)(_BaseTableHeadCell.default)`
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  background: ${_ref => {
+  let {
+    backgroundReverse
+  } = _ref;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+`;
+var _default = exports.default = GridTableHeadCell;

package/table/subComponent/Resizer.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Resizer = _ref => {
+  let {
+    index,
+    onResize
+  } = _ref;
+  const [parentNode, setParentNode] = (0, _react.useState)(null);
+  const handleMouseMove = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    let targetWidth = event.clientX - parentNode.getBoundingClientRect().left;
+    if (targetWidth < 1) {
+      targetWidth = 1;
+    }
+    parentNode.style.width = `${targetWidth}px`;
+    if (typeof onResize === 'function') {
+      onResize(index, targetWidth);
+    }
+  }, [parentNode, index, onResize]);
+  const handleMouseUp = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+    setParentNode(null);
+  }, [handleMouseMove]);
+  const initResize = _ref2 => {
+    let {
+      target
+    } = _ref2;
+    setParentNode(target.parentNode);
+  };
+  (0, _react.useEffect)(() => {
+    if (parentNode) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [parentNode, handleMouseMove, handleMouseUp]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColResize, {
+    onClick: event => {
+      event.stopPropagation();
+    },
+    onMouseDown: initResize
+  });
+};
+const ColResize = _styledComponents.default.div`
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  height: 100%;
+
+  &::after {
+    content: '';
+    width: 8px;
+    margin-right: -4px;
+    cursor: col-resize;
+  }
+
+  &:hover::after {
+    background: var(--color-hover);
+  }
+`;
+var _default = exports.default = Resizer;

package/table/subComponent/TableFooter.js

@@ -0,0 +1,31 @@
+"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 TableFooter = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  ${_ref => {
+  let {
+    center
+  } = _ref;
+  return center && `
+    flex-direction: column;
+    justify-content: center;
+  `;
+}}
+
+  ${_ref2 => {
+  let {
+    enableRowDrag
+  } = _ref2;
+  return enableRowDrag && 'padding-right: calc(1.5rem + 0.5rem);';
+}}
+`;
+var _default = exports.default = TableFooter;

package/table/subComponent/TableFooterInfo.js

@@ -0,0 +1,13 @@
+"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 TableFooterInfo = _styledComponents.default.p`
+  font-size: var(--font-body2);
+  color: var(--font-on-background);
+`;
+var _default = exports.default = TableFooterInfo;

package/table/subComponent/TableFooterPager.js

@@ -0,0 +1,33 @@
+"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 TableFooterPager = _styledComponents.default.div`
+  display: flex;
+
+  ${_ref => {
+  let {
+    center
+  } = _ref;
+  if (center) {
+    return `
+        flex-wrap: wrap;
+        justify-content: center;
+
+        > * {
+          margin-top: var(--spacing-xs);
+        }
+      `;
+  }
+  return `
+      > :last-child {
+        margin-left: var(--spacing-xs);
+      }
+    `;
+}}
+`;
+var _default = exports.default = TableFooterPager;

package/table/subComponent/TableHeadCell.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _BaseTableHeadCell = _interopRequireDefault(require("./BaseTableHeadCell"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TableHeadCell = (0, _styledComponents.default)(_BaseTableHeadCell.default)`
+  &:first-child {
+    padding-left: var(--spacing);
+  }
+
+  &:last-child {
+    padding-right: var(--spacing);
+  }
+`;
+var _default = exports.default = TableHeadCell;

package/table/subComponent/TableSort.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _fa = require("react-icons/fa");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TableSort = _styledComponents.default.div`
+  position: relative;
+
+  > svg {
+    color: var(--color-primary);
+    position: absolute;
+  }
+`;
+const UpIcon = (0, _styledComponents.default)(_fa.FaSortUp)`
+  top: -2px;
+  opacity: ${_ref => {
+  let {
+    $active
+  } = _ref;
+  return $active ? 1 : 0.5;
+}};
+`;
+const DownIcon = (0, _styledComponents.default)(_fa.FaSortDown)`
+  opacity: ${_ref2 => {
+  let {
+    $active
+  } = _ref2;
+  return $active ? 1 : 0.5;
+}};
+`;
+var _default = exports.default = Object.assign(TableSort, {
+  UpIcon,
+  DownIcon
+});

package/tagify/TagifyStyle.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// integrate tagify component
+const TagifyStyle = (0, _styledComponents.createGlobalStyle)`
+  .tagify__dropdown {
+    &__wrapper {
+      max-height: 320px;
+      border: 1px solid var(--border-color);
+      color: var(--font-on-background);
+      background: var(--color-background1);
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+      padding: var(--spacing-s) 0;
+      overflow-y: auto;
+      overflow-x: visible;
+
+      ${_scrollbar.default}
+    }
+
+    &__item {
+      max-width: 100%;
+      word-break: break-all;
+      padding: 12px var(--spacing-s);
+      background: var(--color-background1);
+      transition: 0.3s;
+
+      &:hover {
+        background: var(--color-hover);
+      }
+
+      &[data-value="__create__"] {
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+        border-top: 1px solid var(--border-color);
+        padding-top: var(--spacing);
+
+        &.fixed-bottom{
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          padding: var(--spacing-s);
+        }
+      }
+    }
+
+    &.has-fixed-bottom {
+      .tagify__dropdown__wrapper {
+        padding-bottom: 60px;
+      }
+    }
+  }
+`;
+var _default = exports.default = TagifyStyle;

package/tagify/Tags.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = _interopRequireDefault(require("@yaireo/tagify/dist/react.tagify"));
+require("@yaireo/tagify/dist/tagify.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    onChange,
+    settings,
+    tagifyProps,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
+      tagifyRef: ref,
+      settings: settings,
+      ...tagifyProps,
+      onChange: onChange,
+      ...props
+    })
+  });
+});
+const Wrapper = _styledComponents.default.div`
+  .tagify[readonly]:not(.tagify--mix):not(.tagify--select) {
+    opacity: 0.5;
+  }
+  .tagify {
+    --tags-disabled-bg: var(--font-on-mute);
+    --tags-border-color: var(--border-color);
+    --tags-hover-border-color: var(--border-color);
+    --tags-focus-border-color: var(--color-primary);
+    --tag-invalid-color: var(--color-danger);
+    --tag-remove-btn-bg--hover: var(--color-danger);
+    --input-color: var(--font-on-background);
+
+    border-radius: var(--border-radius-l);
+    width: 100%;
+
+    .tagify__tag {
+      > div::before {
+        border-radius: var(--border-radius-l);
+      }
+    }
+    .tagify__input::before {
+      color: var(--font-on-mute);
+    }
+  }
+`;
+var _default = exports.default = Tags;

package/tagify/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TagifyStyle", {
+  enumerable: true,
+  get: function () {
+    return _TagifyStyle.default;
+  }
+});
+Object.defineProperty(exports, "Tags", {
+  enumerable: true,
+  get: function () {
+    return _Tags.default;
+  }
+});
+Object.defineProperty(exports, "getCreateButtonTemplate", {
+  enumerable: true,
+  get: function () {
+    return _getCreateButtonTemplate.default;
+  }
+});
+var _Tags = _interopRequireDefault(require("./Tags"));
+var _TagifyStyle = _interopRequireDefault(require("./TagifyStyle"));
+var _getCreateButtonTemplate = _interopRequireDefault(require("./templates/getCreateButtonTemplate"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/tagify/templates/getCreateButtonTemplate.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const getCreateButtonTemplate = function (label) {
+  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const attrString = Object.entries(props).map(_ref => {
+    let [key, val] = _ref;
+    return `${key}="${val}"`;
+  }).join(' ');
+  return `
+    <div ${attrString} tabindex="0" role="option" data-value="__create__">
+      ${label}
+    </div>`;
+};
+var _default = exports.default = getCreateButtonTemplate;

package/text/Paragraph.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _color = _interopRequireDefault(require("../styles/mixin/color"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Paragraph = _styledComponents.default.p`
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  margin-bottom: var(--spacing-s);
+  word-break: break-word;
+  overflow-wrap: break-word;
+  position: relative;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  ${_ref => {
+  let {
+    flex
+  } = _ref;
+  return flex && 'display: flex;';
+}}
+
+  ${_ref2 => {
+  let {
+    justifyContentBetween
+  } = _ref2;
+  return justifyContentBetween && 'justify-content: space-between;';
+}}
+
+  ${_ref3 => {
+  let {
+    inline
+  } = _ref3;
+  return inline && `
+      display: inline;
+      margin-right: var(--spacing-s);
+    `;
+}}
+
+  ${_ref4 => {
+  let {
+    fontH3
+  } = _ref4;
+  return fontH3 && 'font-size: var(--font-h3);';
+}}
+
+  ${_ref5 => {
+  let {
+    fontWeightBold
+  } = _ref5;
+  return fontWeightBold && 'font-weight: bold;';
+}}
+
+  ${_ref6 => {
+  let {
+    marginBottomXS
+  } = _ref6;
+  return marginBottomXS && 'margin-bottom: var(--spacing-xs);';
+}}
+
+  ${_color.default}
+
+  ${_ref7 => {
+  let {
+    badge
+  } = _ref7;
+  return badge && `&:after {
+      content: '';
+      position: absolute;
+      top: -2px;
+      right: -12px;
+      height: 8px;
+      width: 8px;
+      border-radius: var(--border-radius);
+      background-color: var(--color-${badge});
+    }
+  `;
+}}
+`;
+var _default = exports.default = Paragraph;

package/text/index.js

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