@cashub/ui 0.25.5 → 0.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.25.5",
+  "version": "0.26.1",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",

package/select/Select.js

@@ -21,6 +21,8 @@ var _SearchBox = _interopRequireDefault(require("./subComponent/SearchBox"));
 var _Options = _interopRequireDefault(require("./subComponent/Options"));
 var _OptionGroup = _interopRequireDefault(require("./subComponent/OptionGroup"));
 var _Option = _interopRequireDefault(require("./subComponent/Option"));
+var _figure = require("../figure");
+var _image = require("../image");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -233,8 +235,10 @@ const Select = _ref => {
           }, value.id);
         });
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedSingle.default, {
-        children: selectedOptions[0].text
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectedSingle.default, {
+        children: [selectedOptions[0].icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          src: selectedOptions[0].icon
+        }), selectedOptions[0].text]
       });
     }
     return placeholder;
@@ -263,7 +267,7 @@ const Select = _ref => {
           })]
         }, option.text);
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Option.default, {
         role: "option",
         tabIndex: "0",
         id: option.id,
@@ -271,7 +275,9 @@ const Select = _ref => {
         focus: focusedOption && focusedOption.id === option.id.toString(),
         selected: option.selected,
         "aria-selected": option.selected,
-        children: option.text
+        children: [option.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          src: option.icon
+        }), option.text]
       }, option.id);
     });
   }, [optionList, focusedOption, handleOnSelect]);
@@ -548,45 +554,61 @@ const Select = _ref => {
     })]
   });
 };
-const Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  min-width: 160px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n  ", "\n  \n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref2 => {
+const Icon = _ref2 => {
   let {
-    disabled
+    src
   } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_figure.IconFigure, {
+      size: "medium",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.ImageFluid, {
+        crossOrigin: "anonymous",
+        src: src,
+        alt: "",
+        roundedS: true
+      })
+    }), "\xA0"]
+  });
+};
+const Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  min-width: 160px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n  ", "\n  \n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref3 => {
+  let {
+    disabled
+  } = _ref3;
   return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
-}, _ref3 => {
+}, _ref4 => {
   let {
     $display
-  } = _ref3;
+  } = _ref4;
   return $display && "\n      border-color: var(--color-primary);\n      outline: none;\n    ";
-}, _ref4 => {
+}, _ref5 => {
   let {
     disabled
-  } = _ref4;
+  } = _ref5;
   return disabled && 'cursor: not-allowed;opacity: 0.5;';
-}, _ref5 => {
+}, _ref6 => {
   let {
     placeholder
-  } = _ref5;
+  } = _ref6;
   return placeholder && 'color: var(--font-on-mute);';
-}, _ref6 => {
+}, _ref7 => {
   let {
     fullWidth
-  } = _ref6;
+  } = _ref7;
   return fullWidth ? 'width: 100%' : 'max-width: 320px';
-}, _ref7 => {
+}, _ref8 => {
   let {
     large
-  } = _ref7;
+  } = _ref8;
   return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
-}, _ref8 => {
+}, _ref9 => {
   let {
     $fill
-  } = _ref8;
+  } = _ref9;
   return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
-}, _ref9 => {
+}, _ref10 => {
   let {
     fillReverse
-  } = _ref9;
+  } = _ref10;
   return fillReverse && "\n      background: var(--color-background1);\n      border-color: transparent;\n    ";
 });
 Combobox.displayName = 'Combobox';

package/select/subComponent/Option.js

@@ -9,7 +9,7 @@ var _templateObject, _templateObject2;
 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; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Option = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 100%;\n  word-break: break-all;\n  padding: 12px var(--spacing-s);\n  background: var(--color-background1);\n  transition: background 0.3s;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  ", "\n"])), _ref => {
+const Option = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  max-width: 100%;\n  word-break: break-all;\n  padding: 12px var(--spacing-s);\n  background: var(--color-background1);\n  transition: background 0.3s;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  ", "\n"])), _ref => {
   let {
     selected,
     focus

package/select/subComponent/SelectedSingle.js

@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const SelectedSingle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--font-on-background);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+const SelectedSingle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: var(--font-on-background);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 SelectedSingle.displayName = 'SelectedSingle';
 var _default = exports.default = SelectedSingle;