@cashub/ui 0.22.7 → 0.22.9

package/src/assets/css/normalize.css

@@ -0,0 +1,386 @@
+/*! Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) */
+
+/* Document */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+  font-size: 16px;
+  font-family: Helvetica;
+  overflow-x: hidden;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+/* Grouping content */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: Helvetica;
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+  text-decoration: none;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: Helvetica;
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: Helvetica;
+  font-size: 100%; /* 1 */
+  line-height: 1; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+
+/* Custom reset */
+
+ul {
+  padding: 0;
+  margin: 0;
+}
+
+li {
+  list-style: none;
+}
+
+figure {
+  margin: 0;
+}
+
+p,
+h3 {
+  margin: 0;
+}
+
+dl,
+dt,
+dd {
+  margin: 0;
+}

package/src/assets/icons/file.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="-56 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m352.402344 64.265625h-176.734375c-3.980469 0-7.792969 1.582031-10.605469 4.394531l-96.402344 96.402344c-2.8125 2.8125-4.394531 6.625-4.394531 10.605469v289.199219c0 25.988281 21.144531 47.132812 47.132813 47.132812h241c25.992187 0 47.132812-21.144531 47.132812-47.132812v-353.46875c.003906-25.988282-21.140625-47.132813-47.128906-47.132813zm0 0" fill="#3ab4fb"/><path d="m399.535156 111.398438v353.472656c0 25.988281-21.148437 47.128906-47.136718 47.128906h-152.632813v-447.730469h152.632813c25.988281 0 47.136718 21.140625 47.136718 47.128907zm0 0" fill="#1d9cfd"/><path d="m288.132812 0h-176.730468c-3.980469 0-7.792969 1.582031-10.605469 4.394531l-96.402344 96.398438c-2.8125 2.8125-4.394531 6.628906-4.394531 10.605469v289.203124c0 25.988282 21.144531 47.132813 47.132812 47.132813h241c25.988282 0 47.132813-21.144531 47.132813-47.132813v-353.46875c0-25.988281-21.144531-47.132812-47.132813-47.132812zm0 0" fill="#eff6fe"/><g fill="#d9e4ef"><path d="m95.335938 351.332031h80.332031c8.28125 0 15-6.714843 15-15 0-8.28125-6.71875-15-15-15h-80.332031c-8.285157 0-15 6.71875-15 15 0 8.285157 6.714843 15 15 15zm0 0"/><path d="m335.265625 47.128906v353.472656c0 25.988282-21.136719 47.128907-47.128906 47.128907h-88.371094v-447.730469h88.371094c25.992187 0 47.128906 21.140625 47.128906 47.128906zm0 0"/><path d="m95.335938 222.800781h144.597656c8.285156 0 15-6.714843 15-15 0-8.285156-6.714844-15-15-15h-144.597656c-8.285157 0-15 6.714844-15 15 0 8.285157 6.714843 15 15 15zm0 0"/><path d="m95.335938 287.066406h144.597656c8.285156 0 15-6.714844 15-15s-6.714844-15-15-15h-144.597656c-8.285157 0-15 6.714844-15 15s6.714843 15 15 15zm0 0"/></g><path d="m254.9375 207.800781c0 8.277344-6.71875 15-15 15h-40.171875v-30h40.171875c8.28125 0 15 6.71875 15 15zm0 0" fill="#c1cedb"/><path d="m254.9375 272.070312c0 8.28125-6.71875 15-15 15h-40.171875v-30h40.171875c8.28125 0 15 6.710938 15 15zm0 0" fill="#c1cedb"/><path d="m95.335938 112.46875c9.445312 0 17.132812-7.6875 17.132812-17.132812v-95.335938h-1.070312c-3.976563 0-7.792969 1.582031-10.605469 4.394531l-96.398438 96.398438c-2.8125 2.8125-4.394531 6.628906-4.394531 10.605469v1.070312zm0 0" fill="#d9e4ef"/></svg>

package/src/backdrop/BaseBackdrop.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const BaseBackdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--color-backdrop);
+  z-index: 50;
+`;
+
+export default BaseBackdrop;

package/src/backdrop/LoadingBackdrop.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import BaseBackdrop from './BaseBackdrop';
+
+const LoadingBackdrop = styled(BaseBackdrop)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary);
+`;
+
+export default LoadingBackdrop;

package/src/backdrop/ModalBackdrop.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import BaseBackdrop from './BaseBackdrop';
+
+const ModalBackdrop = styled(BaseBackdrop)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default ModalBackdrop;

package/src/backdrop/__test__/BaseBackdrop.test.js

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import BaseBackdrop from '../BaseBackdrop';
+import 'jest-styled-components';
+
+test('render Backdrop', () => {
+  const { container } = render(<BaseBackdrop />);
+  const backdrop = container.firstChild;
+
+  expect(backdrop).toBeInTheDocument();
+});

package/src/backdrop/__test__/LoadingBackdrop.test.js

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import LoadingBackdrop from '../LoadingBackdrop';
+
+test('render LoadingBackdrop', () => {
+  const { container } = render(<LoadingBackdrop />);
+  const loadingBackdrop = container.firstChild;
+
+  expect(loadingBackdrop).toBeInTheDocument();
+});

package/src/backdrop/__test__/ModalBackdrop.test.js

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import ModalBackdrop from '../ModalBackdrop';
+
+test('render ModalBackdrop', () => {
+  const { container } = render(<ModalBackdrop />);
+
+  expect(container.firstChild).toBeInTheDocument();
+});

package/src/backdrop/index.js

@@ -0,0 +1,3 @@
+export { default as BaseBackdrop } from './BaseBackdrop';
+export { default as LoadingBackdrop } from './LoadingBackdrop';
+export { default as ModalBackdrop } from './ModalBackdrop';

package/src/badge/Badge.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import color from '../styles/mixin/color';
+import borderColor from '../styles/mixin/borderColor';
+
+const Badge = styled.span`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  width: auto;
+  font-size: inherit;
+  padding: 0.25rem 0.5rem;
+  margin: 0 var(--spacing-xs) var(--spacing-xs) 0;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-l);
+
+  ${color}
+  ${borderColor}
+`;
+
+export default Badge;

package/src/badge/BadgeDot.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import backgroundColor from '../styles/mixin/backgroundColor';
+
+const BadgeDot = styled.span`
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: var(--border-radius);
+
+  ${backgroundColor}
+`;
+
+export default BadgeDot;

package/src/badge/BadgeFill.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import backgroundColor from '../styles/mixin/backgroundColor';
+import colorOnBackground from '../styles/mixin/colorOnBackground';
+
+const BadgeFill = styled.span.attrs(() => ({
+  primary: true,
+}))`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  width: auto;
+  border-radius: var(--border-radius-l);
+  font-size: 1rem;
+  padding: 0.5rem;
+  margin: 0;
+  color: var(--font-on-background);
+
+  ${backgroundColor}
+  ${colorOnBackground}
+
+  ${({ extraSmall }) => extraSmall && 'font-size: 0.75rem; padding: 0.125rem;'}
+
+  ${({ small }) => small && 'font-size: 1rem; padding: 0.25rem;'}
+
+  ${({ large }) => large && 'font-size: 2rem;'}
+`;
+
+export default BadgeFill;

package/src/badge/BadgeWithText.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const BadgeWithText = ({ children }) => {
+  return <Wrapper>{children}</Wrapper>;
+};
+
+const Wrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: var(--spacing-s);
+
+  :not(:last-child) {
+    margin-right: var(--spacing-s);
+  }
+
+  > :first-child {
+    margin-right: var(--spacing-xs);
+  }
+`;
+
+export default BadgeWithText;

package/src/badge/__stories__/Badge.stories.js

@@ -0,0 +1,43 @@
+import Badge from '../Badge';
+
+const metadata = {
+  title: 'Badge/Badge',
+  component: Badge,
+  argTypes: {
+    children: {
+      description: 'status text',
+      control: 'radio',
+      options: ['Enable', 'Disabled', 'Unknown'],
+    },
+    primary: {
+      description: 'text and border color',
+    },
+    success: {
+      description: 'text and border color',
+    },
+    warning: {
+      description: 'text and border color',
+    },
+    danger: {
+      description: 'text and border color',
+    },
+  },
+};
+
+const Template = (args) => (
+  <>
+    <Badge {...args}></Badge>
+  </>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  children: 'Enable',
+  primary: false,
+  success: true,
+  warning: false,
+  danger: false,
+};
+
+export default metadata;
+export { Default };

package/src/badge/__stories__/BadgeDot.stories.js

@@ -0,0 +1,23 @@
+import BadgeDot from '../BadgeDot';
+
+const metadata = {
+  title: 'Badge/BadgeDot',
+  component: BadgeDot,
+};
+
+const Template = (args) => (
+  <>
+    <BadgeDot {...args}></BadgeDot>
+  </>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  primary: false,
+  success: true,
+  warning: false,
+  danger: false,
+};
+
+export default metadata;
+export { Default };

package/src/badge/__stories__/BadgeFill.stories.js

@@ -0,0 +1,29 @@
+import BadgeFill from '../BadgeFill';
+import { FaInfo } from 'react-icons/fa';
+
+const metadata = {
+  title: 'Badge/BadgeFill',
+  component: BadgeFill,
+};
+
+const Template = (args) => (
+  <>
+    <BadgeFill {...args}>
+      <FaInfo />
+    </BadgeFill>
+  </>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  extraSmall: false,
+  small: false,
+  large: false,
+  primary: false,
+  success: true,
+  warning: false,
+  danger: false,
+};
+
+export default metadata;
+export { Default };