@perawallet/react-ui-toolkit 2.0.0-beta.0

package/dist/main.css

@@ -0,0 +1,703 @@
+/* stylelint-disable color-no-hex */
+:root {
+  --text-color: black;
+  --invalid-text-color: #a43030;
+  --placeholder-text-color: #757575;
+  --disabled-text-color: #6c6e76;
+  --default-border-color: #ebebeb;
+  --default-box-shadow: 0 0 5px #ebebeb;
+}
+
+/* stylelint-enable color-no-hex */
+:root {
+  --small-radius-size: 2px;
+}
+.spinner {
+  animation: spinner 1.7s linear infinite;
+}
+
+@keyframes spinner {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.button {
+  --button-width: max-content;
+  --button-height: 35px;
+  --button-bg: black;
+  --button-color: white;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--button-width);
+  height: var(--button-height);
+  color: var(--button-color);
+  background-color: var(--button-bg);
+  border: none;
+  border-radius: var(--small-radius-size);
+  outline: none;
+  cursor: pointer;
+}
+.button:focus {
+  box-shadow: var(--default-box-shadow);
+}
+
+.button--is-inactive {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.button__spinner-container {
+  position: absolute;
+  width: 100%;
+  background-color: var(--button-bg);
+}
+
+.button__spinner .spinner__background {
+  background: var(--button-bg);
+}
+.file-input__container {
+  position: relative;
+}
+
+.file-input {
+  position: absolute;
+  z-index: -1;
+  width: 0.1px;
+  height: 0.1px;
+  overflow: hidden;
+  opacity: 0;
+}
+.file-input:focus + .file-input__label {
+  box-shadow: var(--default-box-shadow);
+}
+.file-input + .file-input__label--is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.file-input__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  cursor: pointer;
+}
+
+.file-input__spinner {
+  margin: 0 0 0 16px;
+}
+.file-input__spinner .spinner__background {
+  background-color: var(--button-bg);
+}
+.date-timer {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 60px);
+  width: 100%;
+}
+
+.date-timer-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.date-timer-box__title {
+  margin-top: 8px;
+}
+.date-timer-box__count {
+  font-variant-numeric: tabular-nums;
+}
+.list-item__click-wrapper {
+  cursor: pointer;
+}
+.list {
+  padding: 0;
+  list-style-type: none;
+}
+.form-field {
+  margin-bottom: 25px;
+}
+
+.form-field__label {
+  display: block;
+}
+
+.form-field__title {
+  display: block;
+  margin-bottom: 8px;
+}
+.form-field-message-row {
+  margin: 8px 0;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 15px;
+}
+
+.form-field-message--is-error {
+  color: var(--invalid-text-color);
+}
+.checkbox-input-label {
+  --checkbox-border-color: black;
+  --checkbox-focus-border-color: black;
+  --checkbox-focus-bg: black;
+  --checkbox-icon-color: white;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  font-size: 16px;
+}
+
+.checkbox-input-label--is-selected .checkbox-input-label__icon {
+  background-color: var(--checkbox-focus-bg);
+  border-color: var(--checkbox-focus-border-color);
+}
+.checkbox-input-label--is-selected .checkbox-input-label__icon svg {
+  display: block;
+}
+.checkbox-input-label--is-selected .checkbox-input-label__icon svg path {
+  fill: var(--checkbox-icon-color);
+}
+
+.checkbox-input-label--is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.checkbox-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.checkbox-input:focus ~ .checkbox-input-label__icon {
+  border-color: var(--checkbox-focus-border-color);
+}
+.checkbox-input:disabled ~ .checkbox-input-label__icon {
+  pointer-events: none;
+}
+
+.checkbox-input-label__icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  margin-right: 10px;
+  border: 1px solid var(--checkbox-border-color);
+  border-radius: var(--small-radius-size);
+  transition: border-color 0.4s ease-in-out;
+}
+.input-container {
+  --input-height: 48px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.input-container__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: var(--input-height);
+}
+
+.input {
+  height: var(--input-height);
+  flex: 1;
+  padding: 0 14px;
+  color: var(--text-color);
+  border: 1px solid var(--default-border-color);
+  border-radius: var(--small-radius-size);
+}
+.input::placeholder {
+  color: var(--placeholder-text-color);
+}
+.input:focus {
+  outline: none;
+}
+
+.input-container--has-error {
+  border: 1px solid var(--invalid-text-color);
+}
+.radio-group {
+  list-style-type: none;
+  padding: 0;
+}
+.radio-input-label {
+  --radio-border-color: darkgrey;
+  --radio-focus-icon-color: black;
+  position: relative;
+  display: grid;
+  grid-template-columns: 30px 1fr;
+  margin-bottom: 10px;
+  color: var(--text-color);
+  cursor: pointer;
+  user-select: none;
+  font-size: 16px;
+}
+
+.radio-input-label--is-selected .radio-input-label__icon {
+  background-color: var(--radio-focus-icon-color);
+  border-color: transparent;
+}
+
+.radio-input-label--is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.radio-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.radio-input:focus ~ .radio-input-label__icon {
+  background-color: var(--radio-focus-icon-color);
+}
+.radio-input:checked ~ .radio-input-label__icon::after {
+  display: block;
+  background-color: white;
+}
+
+.radio-input-label__icon {
+  position: relative;
+  display: block;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+  box-sizing: border-box;
+  border: 1px solid var(--radio-border-color);
+  border-radius: 50%;
+  transition: background-color 0.2s ease-in-out;
+}
+.radio-input-label__icon::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: none;
+  width: 6px;
+  height: 6px;
+  background-color: var(--radio-focus-icon-color);
+  border-radius: 50%;
+  content: "";
+  transform: translate(-50%, -50%);
+}
+.password-input {
+  position: relative;
+}
+.password-input .input-container__right-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 48px;
+}
+
+.password-input__icon--is-visible {
+  display: inline-block;
+}
+.textarea-container {
+  --textarea-height: 72px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.textarea {
+  min-height: var(--textarea-height);
+  flex: 1;
+  padding: 0 14px;
+  color: var(--text-color);
+  border: 1px solid var(--default-border-color);
+  border-radius: var(--small-radius-size);
+  resize: none;
+  line-height: 24px;
+}
+.textarea::placeholder {
+  color: var(--text-color);
+}
+.textarea:focus {
+  background-color: transparent;
+  outline: none;
+}
+.textarea--has-error {
+  color: var(--invalid-text-color);
+  border: 1px solid var(--invalid-text-color);
+}
+.description-term__title {
+  font-weight: 600;
+}
+
+.description-term__description {
+  margin: 0;
+  padding: 4px 0 8px;
+}
+.progress-bar {
+  position: relative;
+  width: 100%;
+  min-height: 4px;
+  overflow: hidden;
+  border-radius: 8px;
+}
+.progress-bar__track {
+  position: absolute;
+  left: 0;
+  height: 100%;
+}
+.progress-bar__content {
+  position: relative;
+  width: max-content;
+  height: 100%;
+  margin: auto;
+  color: black;
+}
+.select {
+  position: relative;
+  width: max-content;
+}
+.select--is-open .select-trigger {
+  border-color: var(--disabled-text-color);
+}
+.select-content {
+  position: absolute;
+  z-index: 1;
+  width: max-content;
+  min-width: 100%;
+  margin-top: 15px;
+  padding: 6px 0;
+  background-color: white;
+  /* stylelint-disable-next-line color-no-hex */
+  border: 1px solid #dfe3ef;
+  border-radius: 6px;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+.select-content--is-visible {
+  opacity: 1;
+}
+.select-content .list {
+  margin: unset;
+}
+.select-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  outline: none;
+  cursor: pointer;
+}
+.select-item--is-focused, .select-item:hover {
+  color: white;
+  /* stylelint-disable-next-line color-no-hex */
+  background-color: #3687ff;
+}
+.select-item--is-selected.select-item--is-focused, .select-item--is-selected:hover {
+  color: black;
+  background-color: white;
+}
+.select-item--is-selected .check-icon path {
+  fill: black;
+}
+.select-item--is-disabled {
+  color: var(--disabled-text-color);
+  cursor: not-allowed;
+}
+.select-item--is-disabled.select-item--is-focused, .select-item--is-disabled:hover {
+  color: var(--disabled-text-color);
+  background-color: white;
+}
+.select-trigger {
+  --select-trigger-height: 48px;
+  --select-trigger-bg: white;
+  --select-trigger-color: black;
+  --select-trigger-border-radius: 6px;
+  --button-bg: var(--select-trigger-bg);
+  --button-height: auto;
+  --button-color: var(--select-trigger-color);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: var(--select-trigger-height);
+  padding: 16px;
+  /* stylelint-disable-next-line color-no-hex */
+  border: 1px solid #dfe3ef;
+  border-radius: var(--select-trigger-border-radius);
+}
+.select-trigger:focus, .select-trigger:focus-within {
+  /* stylelint-disable-next-line color-no-hex */
+  border: 1px solid #6c6e76;
+}
+.typeahead-select-trigger {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 0;
+  border: 1px solid var(--default-border-color);
+  border-radius: var(--small-border-radius);
+}
+
+.typeahead-select-trigger__tag-list {
+  list-style-type: none;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin: 8px;
+  padding: 0;
+}
+
+.typeahead-select-trigger__tag-list__item {
+  margin: 8px 0 0 8px;
+}
+.tag {
+  /* stylelint-disable color-no-hex */
+  --tag-bg: #ebebeb;
+  /* stylelint-enable color-no-hex */
+  display: flex;
+  align-items: center;
+  width: auto;
+  min-width: 0;
+  height: 100%;
+  padding: 3px 10px;
+  color: var(--text-color);
+  background-color: var(--tag-bg);
+  border: none;
+  border-radius: var(--small-border-radius);
+}
+
+.tag--is-removable {
+  cursor: pointer;
+}
+.tag--is-removable:hover path {
+  stroke: var(--text-color);
+}
+
+.tag__close-icon {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+  margin-left: 10px;
+}
+.tag__close-icon path {
+  transition: stroke 0.4s ease-in-out;
+}
+
+.tag__body {
+  display: inline-block;
+  max-width: calc(100% - 16px);
+  overflow: hidden;
+  vertical-align: top;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.typeahead-select {
+  width: 100%;
+}
+
+.typeahead-select__header-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid var(--default-border-color);
+  border-radius: var(--small-border-radius);
+}
+
+.typeahead-select--can-select-multiple .input {
+  height: auto;
+  min-height: 45px;
+  flex: 1;
+  border: none;
+}
+.typeahead-select--can-select-multiple .input:focus {
+  border: none;
+}
+
+.typeahead-select.select--is-open .typeahead-select__input {
+  position: relative;
+}
+
+.typeahead-select__input {
+  width: unset;
+  flex: auto;
+}
+.typeahead-select__input .input {
+  padding-left: 8px;
+}
+.switch {
+  --switch-controller-bg: lightgreen;
+  --switch-active-slider-bg: white;
+  --switch-inactive-slider-bg: darkgrey;
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+.switch--is-disabled {
+  cursor: not-allowed;
+}
+.switch--is-disabled .switch__slider {
+  pointer-events: none;
+}
+
+.switch__controller {
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.switch__controller:checked + .switch__slider {
+  background-color: var(--switch-controller-bg);
+}
+.switch__controller:focus + .switch__slider {
+  box-shadow: 0 0 1px var(--switch-controller-bg);
+}
+.switch__controller:checked + .switch__slider::before {
+  transform: translateX(26px);
+}
+
+.switch__slider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--switch-inactive-slider-bg);
+  border-radius: 34px;
+  cursor: pointer;
+  transition: 0.4s;
+}
+.switch__slider::before {
+  position: absolute;
+  bottom: 4px;
+  left: 4px;
+  width: 26px;
+  height: 26px;
+  background-color: var(--switch-active-slider-bg);
+  border-radius: 50%;
+  content: "";
+  transition: 0.4s;
+}
+.tab__header {
+  display: flex;
+}
+.tab-header-item {
+  --active-color: 50, 50, 211;
+  --disabled-color: 150, 150, 150;
+}
+.tab-header-item:not(:first-of-type) {
+  margin-left: 48px;
+}
+.tab-header-item .list-item__click-wrapper {
+  outline: none;
+}
+.tab-header-item .list-item__click-wrapper:focus {
+  color: rgba(var(--active-color), 0.7);
+}
+
+.tab-header-item--is-active {
+  color: rgba(var(--active-color), 1);
+}
+.tab-header-item--is-active .list-item__click-wrapper:focus {
+  color: rgba(var(--active-color), 1);
+}
+
+.tab-header-item--is-disabled {
+  color: rgba(var(--disabled-color), 1);
+}
+.tab-header-item--is-disabled .list-item__click-wrapper:hover {
+  cursor: not-allowed;
+}
+.tab-header-item--is-disabled .list-item__click-wrapper:focus {
+  color: rgba(var(--disabled-color), 1);
+}
+.toast-close-button {
+  position: relative;
+  z-index: 1;
+}
+#toast-root {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+}
+
+.toast-stack {
+  width: 300px;
+  max-height: 100vh;
+  overflow: auto;
+  padding: 24px;
+}
+.toggle {
+  --toggle-border-color: gray;
+  display: grid;
+  overflow: hidden;
+  padding: 0;
+  border: 1px solid var(--toggle-border-color);
+  border-radius: 8px;
+}
+.toggle--is-vertical {
+  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
+  width: max-content;
+}
+.toggle--is-horizontal {
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  min-height: 32px;
+}
+.toggle--is-disabled {
+  cursor: not-allowed;
+}
+.toggle--is-disabled .toggle-item {
+  pointer-events: none;
+}
+.toggle-item {
+  --toggle-active-bg: white;
+  --toggle-active-color: darkgray;
+  --toggle-inactive-bg: black;
+  --toggle-inactive-color: white;
+  --toggle-disabled-bg: gray;
+  --toggle-disabled-color: white;
+  list-style-type: none;
+  color: var(--toggle-inactive-color);
+  background-color: var(--toggle-inactive-bg);
+}
+.toggle-item--is-selected {
+  color: var(--toggle-active-color);
+  background-color: var(--toggle-active-bg);
+}
+.toggle-item--is-disabled {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--toggle-disabled-color);
+  background-color: var(--toggle-disabled-bg);
+  cursor: not-allowed;
+}
+.toggle-item--is-disabled * {
+  pointer-events: none;
+}
+.toggle-item__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.toggle-input {
+  display: none;
+}

package/dist/numberUtils-CMCFc8Kh.js

@@ -0,0 +1 @@
+"use strict";const e=["0","1","2","3","4","5","6","7","8","9"],t="undefined"!=typeof navigator?navigator.language:"en-GB";function n(){return void 0!==new Intl.NumberFormat&&void 0!==(new Intl.NumberFormat).formatToParts}function r(e){const{locale:n,...r}=e,o={style:"decimal",...r};let a;try{a=new Intl.NumberFormat(n||[t,"en-GB"],o)}catch{a={format:e=>e.toLocaleString(n)}}return e=>{let t="";return Object.is(e,NaN)||(t=a.format(e)),t}}function o(e=t){let r=",",o=".",a="-";if(n()){const t=new Intl.NumberFormat(e).formatToParts(-12345.6);r=t.find(e=>"group"===e.type).value,o=t.find(e=>"decimal"===e.type).value,a=t.find(e=>"minusSign"===e.type).value}return{THOUSANDTHS_SEPARATOR:r,DECIMAL_NUMBER_SEPARATOR:o,MINUS_SIGN:a}}function a(r=t){let o=e;return n()&&(o=new Intl.NumberFormat(r,{useGrouping:!1}).format(9876543210).split("").reverse()),o}function i(e=t){const n=a(e)[0],r=o(e).MINUS_SIGN;return{LOCALE_NEGATIVE_ZERO:`${r}${n}`,LOCALE_NEGATIVE_DOUBLE_ZERO:`${r}${n}${n}`,DEFAULT_NEGATIVE_ZERO:"-0",DEFAULT_NEGATIVE_DOUBLE_ZERO:"-00"}}exports.formatNumber=r,exports.getNegativeZero=i,exports.getNumberSeparators=o,exports.getThousandthSeparatorCount=function(e){return r({locale:"en"})(parseFloat(e)).match(/,/g)?.length||0},exports.isIntlAPISupported=n,exports.isNonNegativeNumber=function(e){return"number"==typeof e&&Number.isFinite(e)&&e>=0},exports.mapDigitsToLocalVersion=function({locale:e=t},n){return n.split("").map(function({locale:e=t}){const n=a(e),r=new Map(n.map((e,t)=>[t,e]));return e=>r.get(parseInt(e))}({locale:e})).join("")},exports.parseNumber=function(e,n){const{locale:r=t,maximumFractionDigits:i=0}=e,{THOUSANDTHS_SEPARATOR:l,DECIMAL_NUMBER_SEPARATOR:u}=o(r),s=a(r),E=new RegExp(`[${s.join("")}]`,"g"),p=(c=new Map(s.map((e,t)=>[e,t])),e=>{const t=c.get(e);return"number"==typeof t?String(t):""});var c;let m=n.replace(" ","").replace(new RegExp(`[${l}]`,"g"),"").replace(new RegExp(`[${u}]`),".").replace(E,p);if("number"==typeof i){const[e,t]=m.split(".");if(0===i)m=e;else if(t&&t.length===i+1)return m.slice(0,m.length-1)}else m=String(m);return m},exports.removeLeadingZeros=function(e=t,n){const{LOCALE_NEGATIVE_ZERO:r,LOCALE_NEGATIVE_DOUBLE_ZERO:a,DEFAULT_NEGATIVE_ZERO:l,DEFAULT_NEGATIVE_DOUBLE_ZERO:u}=i(e),s=o(e).MINUS_SIGN,E=n.split(".")[1];let p,c=n.split(".")[0];return c!==a&&c!==u||(c=l),c&&c.length!==String(parseInt(c)).length&&c!==s&&c!==r&&c!==l&&(c=String(parseInt(c))),p=n.match(/\.$/)?.length||E?`${c}.${E}`:c,p};

package/dist/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,20 @@
+import "./_progress-bar.scss";
+import type React from "react";
+export interface ProgressBarProps {
+    percentage: number;
+    style?: {
+        trackColor?: string;
+        backgroundColor?: string;
+        completedColor?: string;
+    };
+    ariaLabelledBy?: string;
+    ariaLabel?: string;
+    ariaValueText?: string;
+    ariaDescribedBy?: string;
+    title?: string;
+    children?: React.ReactNode;
+    customClassName?: string;
+    testid?: string;
+}
+declare function ProgressBar(props: ProgressBarProps): React.JSX.Element;
+export default ProgressBar;