@cashub/ui-elv 1.0.2 → 1.0.3

package/esm/select/index.js

@@ -0,0 +1,2 @@
+export { default as Select } from './Select';
+export { default as InputSelect } from './InputSelect';

package/esm/select/subComponent/Checkbox.js

@@ -0,0 +1,40 @@
+import styled, { css } from 'styled-components';
+import { MdDone } from 'react-icons/md/index.esm';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Checkbox = _ref => {
+  let {
+    selected
+  } = _ref;
+  return /*#__PURE__*/_jsx(Container, {
+    selected: selected,
+    children: selected && /*#__PURE__*/_jsx(MdDone, {})
+  });
+};
+const Container = styled.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 && 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%);
+  }
+`;
+export default Checkbox;

package/esm/select/subComponent/Footer.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+const Footer = styled.div`
+  padding: var(--spacing-s);
+  border-top: 1px solid var(--border-color);
+`;
+export default Footer;

package/esm/select/subComponent/ListBox.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+const ListBox = styled.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';
+export default ListBox;

package/esm/select/subComponent/Option.js

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components';
+const Option = styled.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) && css`
+      background: var(--color-hover);
+    `;
+}}
+
+  ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && css`
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--font-on-mute);
+  `;
+}}
+`;
+Option.displayName = 'Option';
+export default Option;

package/esm/select/subComponent/OptionGroup.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+const OptionGroup = styled.div`
+  [role='presentation'] {
+    font-weight: bold;
+
+    &:hover {
+      background: var(--color-background1);
+    }
+  }
+
+  [role='option'] {
+    padding-left: calc(var(--spacing-s) * 2);
+  }
+`;
+OptionGroup.displayName = 'OptionGroup';
+export default OptionGroup;

package/esm/select/subComponent/Options.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import scrollbar from '../../styles/mixin/scrollbar';
+const Options = styled.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}
+`;
+Options.displayName = 'Options';
+export default Options;

package/esm/select/subComponent/SearchBox.js

@@ -0,0 +1,51 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { GoSearch } from 'react-icons/go/index.esm';
+import inputPlaceholder from '../../styles/mixin/inputPlaceholder';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SearchBox = /*#__PURE__*/forwardRef((props, ref) => {
+  const handleClick = event => {
+    event.stopPropagation();
+  };
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    onClick: handleClick,
+    children: [/*#__PURE__*/_jsx(GoSearch, {}), /*#__PURE__*/_jsx(SearchInput, {
+      type: "text",
+      ref: ref,
+      ...props
+    })]
+  });
+});
+const Wrapper = styled.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 = styled.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;
+  }
+
+  ${inputPlaceholder`
+    color: var(--font-on-mute);
+  `}
+`;
+SearchInput.displayName = 'SearchInput';
+export default SearchBox;

package/esm/select/subComponent/SelectedMultipleCount.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SelectedMultipleCount = _ref => {
+  let {
+    placeholder,
+    count
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Text, {
+    children: [placeholder, count > 0 && /*#__PURE__*/_jsx(CountBadge, {
+      children: count
+    })]
+  });
+};
+const Text = styled.span`
+  color: var(--font-on-background);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+`;
+const CountBadge = styled.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;
+`;
+export default SelectedMultipleCount;

package/esm/select/subComponent/SelectedMultipleTags.js

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { FaTimes } from 'react-icons/fa/index.esm';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SelectedMultipleTags = _ref => {
+  let {
+    content,
+    onClick,
+    disabled
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Selected, {
+    $disabled: disabled,
+    children: [!disabled && /*#__PURE__*/_jsx("span", {
+      onClick: onClick,
+      "data-testid": "removeOption",
+      children: /*#__PURE__*/_jsx(FaTimes, {})
+    }), content]
+  });
+};
+const Selected = styled.div`
+  align-items: center;
+  display: flex;
+  background: var(--color-primary);
+  border-radius: var(--border-radius-l);
+  padding: 0.25rem calc(var(--spacing-xs) + 4px);
+  margin: 4px 10px 4px 0;
+  color: var(--font-on-primary);
+  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-primary);
+    }
+  }
+
+  ${_ref2 => {
+  let {
+    $disabled
+  } = _ref2;
+  return $disabled && 'cursor: not-allowed;opacity: 0.5;';
+}}
+`;
+export default SelectedMultipleTags;

package/esm/select/subComponent/SelectedMultipleText.js

@@ -0,0 +1,63 @@
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SelectedMultipleText = _ref => {
+  let {
+    children
+  } = _ref;
+  const textRef = useRef(null);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  const [show, setShow] = 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__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Text, {
+      ref: textRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: () => {
+        setShow(false);
+      },
+      children: children
+    }), show && /*#__PURE__*/_jsx(Tooltip, {
+      style: {
+        left: position.x,
+        top: position.y
+      },
+      children: children
+    })]
+  });
+};
+const Text = styled.span`
+  color: var(--font-on-background);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Tooltip = styled.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;
+`;
+export default SelectedMultipleText;

package/esm/select/subComponent/SelectedSingle.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+const SelectedSingle = styled.div`
+  display: flex;
+  align-items: center;
+  color: var(--font-on-background);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+SelectedSingle.displayName = 'SelectedSingle';
+export default SelectedSingle;

package/esm/styles/GlobalStyle.js

@@ -0,0 +1,328 @@
+import { createGlobalStyle } from 'styled-components';
+import 'normalize.css';
+import '../assets/css/global.css';
+const GlobalStyle = createGlobalStyle`
+  body {
+    --color-white: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colorWhite;
+}};
+    --color-dark: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colorDark;
+}};
+    --color-grey: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colorGrey;
+}};
+    --color-primary: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colorPrimary;
+}};
+    --color-success: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colorSuccess;
+}};
+    --color-warning: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colorWarning;
+}};
+    --color-danger: ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colorDanger;
+}};
+    --color-hover: ${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colorHover;
+}};
+    --color-active: ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colorActive;
+}};
+    --color-scroll-bar: ${_ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.scrollBarColor;
+}};
+    --color-background1: ${_ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.bgColor1;
+}};
+    --color-background2: ${_ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.bgColor2;
+}};
+    --color-background3: ${_ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.bgColor3;
+}};
+    --color-backdrop: ${_ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.backdropBg;
+}};
+
+    --font-h1: ${_ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.fontH1;
+}};
+    --font-h2: ${_ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.fontH2;
+}};
+    --font-h3: ${_ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.fontH3;
+}};
+    --font-body1: ${_ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.fontBody1;
+}};
+    --font-body2: ${_ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.fontBody2;
+}};
+    --font-button: ${_ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.fontButton;
+}};
+    --font-caption: ${_ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.fontCaption;
+}};
+    --font-family: ${_ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.fontFamily;
+}};
+    --font-normal: ${_ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.fontWeightNormal;
+}};
+    --font-bold: ${_ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.fontWeightBold;
+}};
+    --font-on-primary: ${_ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.fontOnPrimary;
+}};
+    --font-on-success: ${_ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.fontOnSuccess;
+}};
+    --font-on-warning: ${_ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.fontOnWarning;
+}};
+    --font-on-danger: ${_ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.fontOnDanger;
+}};
+    --font-on-background: ${_ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.fontOnBg;
+}};
+    --font-on-mute: ${_ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.fontMutedColor;
+}};
+
+    --box-shadow: ${_ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.boxShadow;
+}};
+    --border-color: ${_ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.borderColor;
+}};
+    --border-color-transparent: ${_ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.borderColorTransparent;
+}};
+    --border-width: ${_ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.borderWidth;
+}};
+    --border-radius-s: ${_ref35 => {
+  let {
+    theme
+  } = _ref35;
+  return theme.borderRadiusS;
+}};
+    --border-radius: ${_ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.borderRadius;
+}};
+    --border-radius-l: ${_ref37 => {
+  let {
+    theme
+  } = _ref37;
+  return theme.borderRadiusL;
+}};
+    --border-radius-round: ${_ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.borderRadiusRound;
+}};
+
+    --spacing-xs: ${_ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.spacerXS;
+}};
+    --spacing-s: ${_ref40 => {
+  let {
+    theme
+  } = _ref40;
+  return theme.spacerS;
+}};
+    --spacing: ${_ref41 => {
+  let {
+    theme
+  } = _ref41;
+  return theme.spacer;
+}};
+    --spacing-l: ${_ref42 => {
+  let {
+    theme
+  } = _ref42;
+  return theme.spacerL;
+}};
+
+    /* Global style */
+    font-size: 16px;
+    font-family: Helvetica;
+    overflow-x: hidden;
+    background: var(--color-background1);
+  }
+
+  /* Custom normalize */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    line-height: 1;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+  
+  a {
+    text-decoration: none;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    line-height: 1;
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  figure {
+    margin: 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  dl,
+  dt,
+  dd {
+    margin: 0;
+  }
+
+  .margin-bottom-s {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+export default GlobalStyle;

package/esm/styles/config/breakpoint.style.js

@@ -0,0 +1,7 @@
+const breakpoints = {
+  desktop: 1920,
+  laptop: 1200,
+  tablet: 768,
+  mobile: 576
+};
+export default breakpoints;

package/esm/styles/config/header.style.js

@@ -0,0 +1,4 @@
+const headerStyle = {
+  height: '64px'
+};
+export default headerStyle;