@cashub/ui-elv 1.0.0

package/select/index.js

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

package/select/subComponent/Checkbox.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _md = require("react-icons/md");
+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 Checkbox = _ref => {
+  let {
+    selected
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    selected: selected,
+    children: selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdDone, {})
+  });
+};
+const Container = _styledComponents.default.div`
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border: var(--border-width) solid var(--border-color);
+  margin-right: var(--spacing-xs);
+  border-radius: 4px;
+
+  ${_ref2 => {
+  let {
+    selected
+  } = _ref2;
+  return selected && (0, _styledComponents.css)`
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+    `;
+}}
+
+  > svg {
+    position: absolute;
+    color: var(--font-on-primary);
+    font-size: var(--font-h3);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+var _default = exports.default = Checkbox;

package/select/subComponent/Footer.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 Footer = _styledComponents.default.div`
+  padding: var(--spacing-s);
+  border-top: 1px solid var(--border-color);
+`;
+var _default = exports.default = Footer;

package/select/subComponent/ListBox.js

@@ -0,0 +1,30 @@
+"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 ListBox = _styledComponents.default.div`
+  visibility: ${_ref => {
+  let {
+    $display
+  } = _ref;
+  return $display ? 'visible' : 'hidden';
+}};
+  background: var(--color-background1);
+  color: var(--font-on-background);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  width: ${_ref2 => {
+  let {
+    width
+  } = _ref2;
+  return width;
+}}px;
+  z-index: 85;
+`;
+ListBox.displayName = 'ListBox';
+var _default = exports.default = ListBox;

package/select/subComponent/Option.js

@@ -0,0 +1,45 @@
+"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 Option = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  word-break: break-all;
+  padding: 12px var(--spacing-s);
+  background: var(--color-background1);
+  transition: background 0.3s;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  ${_ref => {
+  let {
+    selected,
+    focus
+  } = _ref;
+  return (selected || focus) && (0, _styledComponents.css)`
+      background: var(--color-hover);
+    `;
+}}
+
+  ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && (0, _styledComponents.css)`
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--font-on-mute);
+  `;
+}}
+`;
+Option.displayName = 'Option';
+var _default = exports.default = Option;

package/select/subComponent/OptionGroup.js

@@ -0,0 +1,23 @@
+"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 OptionGroup = _styledComponents.default.div`
+  [role='presentation'] {
+    font-weight: bold;
+
+    &:hover {
+      background: var(--color-background1);
+    }
+  }
+
+  [role='option'] {
+    padding-left: calc(var(--spacing-s) * 2);
+  }
+`;
+OptionGroup.displayName = 'OptionGroup';
+var _default = exports.default = OptionGroup;

package/select/subComponent/Options.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _scrollbar = _interopRequireDefault(require("../../styles/mixin/scrollbar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Options = _styledComponents.default.div`
+  position: relative;
+  padding: var(--spacing-xs) 0;
+  max-height: min(320px, calc(50vh - 36px - 20px - 36px));
+  overflow-y: auto;
+  overflow-x: visible;
+  border-radius: var(--border-radius);
+
+  ${_ref => {
+  let {
+    allowSearch
+  } = _ref;
+  return allowSearch && `
+      padding-top: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    `;
+}}
+
+  ${_scrollbar.default}
+`;
+Options.displayName = 'Options';
+var _default = exports.default = Options;

package/select/subComponent/SearchBox.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _go = require("react-icons/go");
+var _inputPlaceholder = _interopRequireDefault(require("../../styles/mixin/inputPlaceholder"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SearchBox = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const handleClick = event => {
+    event.stopPropagation();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    onClick: handleClick,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_go.GoSearch, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchInput, {
+      type: "text",
+      ref: ref,
+      ...props
+    })]
+  });
+});
+const Wrapper = _styledComponents.default.div`
+  position: relative;
+  padding: var(--spacing-xs);
+
+  > svg {
+    color: var(--font-on-mute);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: calc(var(--spacing-s) + var(--spacing-xs));
+  }
+`;
+Wrapper.displayName = 'Wrapper';
+const SearchInput = _styledComponents.default.input`
+  background: var(--color-background1);
+  color: var(--font-on-background);
+  border-radius: var(--border-radius-l);
+  border: var(--border-width) solid var(--border-color);
+  outline: none;
+  width: 100%;
+  padding: 10px var(--spacing-s) 10px calc(var(--spacing-s) * 2 + 8px);
+  max-height: 36px;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  ${(0, _inputPlaceholder.default)`
+    color: var(--font-on-mute);
+  `}
+`;
+SearchInput.displayName = 'SearchInput';
+var _default = exports.default = SearchBox;

package/select/subComponent/SelectedMultipleCount.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SelectedMultipleCount = _ref => {
+  let {
+    placeholder,
+    count
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Text, {
+    children: [placeholder, count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(CountBadge, {
+      children: count
+    })]
+  });
+};
+const Text = _styledComponents.default.span`
+  color: var(--font-on-background);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+`;
+const CountBadge = _styledComponents.default.span`
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 6px;
+  border-radius: var(--border-radius-l);
+  background: var(--color-primary);
+  color: #fff;
+  font-size: var(--font-caption);
+  line-height: 18px;
+`;
+var _default = exports.default = SelectedMultipleCount;

package/select/subComponent/SelectedMultipleTags.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _fa = require("react-icons/fa");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SelectedMultipleTags = _ref => {
+  let {
+    content,
+    onClick,
+    disabled
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Selected, {
+    $disabled: disabled,
+    children: [!disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      onClick: onClick,
+      "data-testid": "removeOption",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
+    }), content]
+  });
+};
+const Selected = _styledComponents.default.div`
+  align-items: center;
+  display: flex;
+  background: var(--color-background3);
+  border-radius: var(--border-radius-l);
+  padding: 0.25rem calc(var(--spacing-xs) + 4px);
+  margin: 4px 10px 4px 0;
+  color: var(--font-on-background);
+  font-weight: var(--font-normal);
+  word-break: break-all;
+
+  > span {
+    display: flex;
+    align-items: center;
+
+    > svg {
+      margin-right: var(--spacing-xs);
+      color: var(--font-on-background);
+    }
+  }
+
+  ${_ref2 => {
+  let {
+    $disabled
+  } = _ref2;
+  return $disabled && 'cursor: not-allowed;opacity: 0.5;';
+}}
+`;
+var _default = exports.default = SelectedMultipleTags;

package/select/subComponent/SelectedMultipleText.js

@@ -0,0 +1,70 @@
+"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 SelectedMultipleText = _ref => {
+  let {
+    children
+  } = _ref;
+  const textRef = (0, _react.useRef)(null);
+  const [position, setPosition] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const [show, setShow] = (0, _react.useState)(false);
+  const handleMouseEnter = () => {
+    const element = textRef.current;
+    // show tooltip on content width exceeds container width only
+    if (element.scrollWidth > element.clientWidth) {
+      const rect = element.getBoundingClientRect();
+      setPosition({
+        x: rect.left,
+        y: rect.bottom + 8
+      });
+      setShow(true);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
+      ref: textRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: () => {
+        setShow(false);
+      },
+      children: children
+    }), show && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+      style: {
+        left: position.x,
+        top: position.y
+      },
+      children: children
+    })]
+  });
+};
+const Text = _styledComponents.default.span`
+  color: var(--font-on-background);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Tooltip = _styledComponents.default.div`
+  position: fixed;
+  border: 1px solid var(--border-color);
+  color: var(--font-on-background);
+  background: var(--color-background2);
+  box-shadow: var(--box-shadow);
+  border-radius: calc(var(--border-radius) / 2);
+  padding: var(--spacing-xs);
+  font-size: var(--font-body1);
+  font-weight: var(--font-normal);
+  z-index: 90;
+  width: max-content;
+  max-width: 50vw;
+`;
+var _default = exports.default = SelectedMultipleText;

package/select/subComponent/SelectedSingle.js

@@ -0,0 +1,17 @@
+"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 SelectedSingle = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  color: var(--font-on-background);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+SelectedSingle.displayName = 'SelectedSingle';
+var _default = exports.default = SelectedSingle;