@cashub/ui-elv 1.0.1 → 1.0.3

package/esm/form/index.js

@@ -0,0 +1,14 @@
+export { default as Checkbox } from './Checkbox';
+export { default as Fieldset } from './Fieldset';
+export { default as FormItem } from './FormItem';
+export { default as Input } from './Input';
+export { default as Label } from './Label';
+export { default as MutedText } from './MutedText';
+export { default as PasswordInput } from './PasswordInput';
+export { default as RadioButton } from './RadioButton';
+export { default as Searchbox } from './Searchbox';
+export { default as Slider } from './Slider';
+export { default as SwitchButton } from './SwitchButton';
+export { default as Textarea } from './Textarea';
+export { default as TreeView } from './TreeView';
+export { default as SearchSelect } from './SearchSelect';

package/esm/grid/Column.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import media from '../styles/mixin/media';
+const Column = styled.div`
+  padding: 0 calc(var(--spacing) / 2);
+  grid-column-end: span ${_ref => {
+  let {
+    desktop
+  } = _ref;
+  return desktop;
+}};
+
+  ${_ref2 => {
+  let {
+    laptop
+  } = _ref2;
+  return laptop && media.laptop`
+        grid-column-end: span ${laptop};
+      `;
+}}
+
+  ${_ref3 => {
+  let {
+    tablet
+  } = _ref3;
+  return tablet && media.tablet`
+        grid-column-end: span ${tablet};
+      `;
+}}
+
+  ${_ref4 => {
+  let {
+    mobile
+  } = _ref4;
+  return mobile && media.mobile`
+        grid-column-end: span ${mobile};
+      `;
+}}
+`;
+export default Column;

package/esm/grid/Grid.js

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

package/esm/grid/index.js

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

package/esm/heading/Heading1.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+const Heading1 = styled.h1`
+  font-size: var(--font-h1);
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ${_ref => {
+  let {
+    center
+  } = _ref;
+  return center && 'text-align: center;';
+}}
+`;
+export default Heading1;

package/esm/heading/Heading2.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+const Heading2 = styled.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);';
+}}
+`;
+export default Heading2;

package/esm/heading/Heading3.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+const Heading3 = styled.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);';
+}}
+`;
+export default Heading3;

package/esm/heading/index.js

@@ -0,0 +1,3 @@
+export { default as Heading1 } from './Heading1';
+export { default as Heading2 } from './Heading2';
+export { default as Heading3 } from './Heading3';

package/esm/helmet/Helmet.js

@@ -0,0 +1,17 @@
+import { Helmet as ReactHelmet } from 'react-helmet-async';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Helmet = _ref => {
+  let {
+    title,
+    description
+  } = _ref;
+  return /*#__PURE__*/_jsxs(ReactHelmet, {
+    children: [title && /*#__PURE__*/_jsx("title", {
+      children: title
+    }), description && /*#__PURE__*/_jsx("meta", {
+      name: "description",
+      content: description
+    })]
+  });
+};
+export default Helmet;

package/esm/helmet/index.js

@@ -0,0 +1,2 @@
+export { default as Helmet } from './Helmet';
+export { HelmetProvider } from 'react-helmet-async';

package/esm/iconbox/ApplicationIconBox.js

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+import IconBoxFigure from './subComponent/IconBoxFigure';
+import IconBoxImage from './subComponent/IconBoxImage';
+const ApplicationIconBox = styled.div`
+  margin-bottom: var(--spacing);
+
+  ${_ref => {
+  let {
+    clickable
+  } = _ref;
+  return clickable && 'cursor: pointer';
+}};
+`;
+const Body = styled.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 = styled.div`
+  min-width: 0;
+`;
+const Title = styled.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 = styled.div`
+  font-size: var(--font-body1);
+  color: var(--font-on-mute);
+  margin-bottom: var(--spacing-xs);
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+`;
+export default Object.assign(ApplicationIconBox, {
+  Body,
+  Description,
+  Title,
+  Content,
+  Figure: IconBoxFigure,
+  Image: IconBoxImage
+});

package/esm/iconbox/IconBox.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+import IconBoxFigure from './subComponent/IconBoxFigure';
+import IconBoxImage from './subComponent/IconBoxImage';
+import bgChartTriangle from '../assets/images/bg-chart-triangle.png';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconBox = _ref => {
+  let {
+    icon,
+    title,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [/*#__PURE__*/_jsxs(IconBoxHead, {
+      children: [/*#__PURE__*/_jsx(IconBoxFigure, {
+        sizeXS: true,
+        marginRight: true,
+        children: /*#__PURE__*/_jsx(IconBoxImage, {
+          sizeXS: true,
+          src: icon,
+          alt: `${title}'s icon`
+        })
+      }), /*#__PURE__*/_jsx(IconBoxTitle, {
+        children: title
+      })]
+    }), /*#__PURE__*/_jsx(IconBoxBody, {
+      children: children
+    })]
+  });
+};
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-l);
+  margin-bottom: var(--spacing);
+  border-radius: var(--border-radius);
+  background: var(--color-background2);
+  color: var(--font-on-background);
+
+  background: var(--color-background2);
+  background-image: url(${bgChartTriangle});
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: 30% 70%;
+`;
+const IconBoxHead = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing);
+`;
+const IconBoxTitle = styled.div`
+  font-size: var(--font-h2);
+  font-weight: bold;
+  word-break: break-all;
+`;
+const IconBoxBody = styled.div`
+  font-size: var(--font-h1);
+  font-weight: bold;
+  text-align: center;
+`;
+export default IconBox;

package/esm/iconbox/IconBoxV2.js

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components';
+import IconBoxFigure from './subComponent/IconBoxFigure';
+import IconBoxImage from './subComponent/IconBoxImage';
+const IconBoxV2 = styled.div`
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+  background: var(--color-background1);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  border: 2px solid transparent;
+
+  ${_ref => {
+  let {
+    fullHeight
+  } = _ref;
+  return fullHeight && 'height: calc(100% - var(--spacing));';
+}}
+
+  ${_ref2 => {
+  let {
+    selected
+  } = _ref2;
+  return selected && css`
+      border-color: var(--color-primary);
+      background: color-mix(
+        in srgb,
+        var(--color-primary) 10%,
+        var(--color-background1)
+      );
+    `;
+}}
+`;
+const Body = styled.div`
+  display: flex;
+`;
+const Description = styled.div`
+  flex: 1 1 auto;
+  font-size: var(--font-body1);
+`;
+const Info = styled.div`
+  word-break: break-all;
+
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+const Tool = styled.div`
+  flex: 0 0 calc(var(--spacing-s) + 36px);
+  padding-left: var(--spacing-s);
+
+  > *:not(:last-child) {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+export default Object.assign(IconBoxV2, {
+  Body,
+  Description,
+  Info,
+  Tool,
+  Figure: IconBoxFigure,
+  Image: IconBoxImage
+});

package/esm/iconbox/index.js

@@ -0,0 +1,3 @@
+export { default as ApplicationIconBox } from './ApplicationIconBox';
+export { default as IconBox } from './IconBox';
+export { default as IconBoxV2 } from './IconBoxV2';

package/esm/iconbox/subComponent/IconBoxFigure.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+const IconBoxFigure = styled.figure`
+  flex: 0 0 120px;
+
+  ${_ref => {
+  let {
+    marginRight
+  } = _ref;
+  return marginRight && 'margin-right: var(--spacing);';
+}}
+  ${_ref2 => {
+  let {
+    paddingRight
+  } = _ref2;
+  return paddingRight && 'padding-right: var(--spacing);';
+}}
+  ${_ref3 => {
+  let {
+    paddingRightS
+  } = _ref3;
+  return paddingRightS && 'padding-right: var(--spacing-s);';
+}}
+  ${_ref4 => {
+  let {
+    paddingBottomS
+  } = _ref4;
+  return paddingBottomS && 'padding-bottom: var(--spacing-s);';
+}}
+
+  ${_ref5 => {
+  let {
+    sizeS
+  } = _ref5;
+  return sizeS && 'flex-basis: 80px;';
+}}
+  ${_ref6 => {
+  let {
+    sizeXS
+  } = _ref6;
+  return sizeXS && 'flex-basis: 40px;';
+}}
+`;
+export default IconBoxFigure;

package/esm/iconbox/subComponent/IconBoxImage.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+const IconBoxImage = styled.img.attrs(() => ({
+  crossOrigin: 'anonymous'
+}))`
+  width: 120px;
+  height: 120px;
+
+  ${_ref => {
+  let {
+    rounded
+  } = _ref;
+  return rounded && 'border-radius: var(--border-radius);';
+}}
+
+  ${_ref2 => {
+  let {
+    sizeS
+  } = _ref2;
+  return sizeS && `
+      width: 80px;
+      height: 80px;
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    sizeXS
+  } = _ref3;
+  return sizeXS && `
+      width: 40px;
+      height: 40px;
+    `;
+}}
+`;
+export default IconBoxImage;

package/esm/image/ImageFluid.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import rounded from '../styles/mixin/rounded';
+const ImageFluid = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  ${rounded}
+`;
+export default ImageFluid;