rbro-tat-uds 1.6.36 → 2.0.0

package/build/esm/components/Tab/Tab.js

@@ -0,0 +1,145 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import styled from 'styled-components';
+import Icon from '../Icon/Icon.js';
+import { colors } from '../../utils';
+
+const StyledTabWrapper = styled.div`
+  width: fit-content;
+  align-content: center;
+  cursor: ${(props) => !props.disabled && !props.selected && "pointer"};
+
+  & > div > svg {
+    fill: ${(props) => {
+  if (props.disabled) return colors.gray_600;
+  if (props.selected) return colors.gray_950;
+  return colors.gray_700;
+}};
+  }
+
+  & > div.tabActivityIndicator {
+    height: 3px;
+    border-radius: 4px 4px 0 0;
+    margin-bottom: -1px;
+    background-color: ${(props) => {
+  if (props.disabled) return "transparent";
+  if (props.selected) return colors.info_700;
+  return "transparent";
+}};
+  }
+
+  &:focus {
+    border: 2px solid ${colors.info_400};
+    border-radius: 8px 8px 0 0;
+
+    & > div.tabActivityIndicator {
+      background-color: ${colors.gray_100};
+    }
+  }
+
+  &:hover {
+    & > div.tabActivityIndicator {
+      background-color: ${(props) => {
+  if (props.disabled) return "transparent";
+  if (props.selected) return colors.info_700;
+  return colors.gray_100;
+}};
+    }
+    & > div > p {
+      font-weight: ${(props) => props.disabled ? 400 : 500};
+    }
+    & > div > svg,
+    & > div > p {
+      fill: ${(props) => {
+  if (props.disabled) return colors.gray_600;
+  if (props.selected) return colors.gray_950;
+  return colors.gray_950;
+}};
+      color: ${(props) => {
+  if (props.disabled) return colors.gray_600;
+  if (props.selected) return colors.gray_950;
+  return colors.gray_950;
+}};
+    }
+  }
+`;
+const StyledTabLabelWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  padding: 12px 20px;
+`;
+const StyledTabLabel = styled.p`
+  font-size: 14px;
+  line-height: 16.8px;
+  font-weight: ${(props) => {
+  if (props.disabled) return 400;
+  if (props.selected) return 500;
+  return 400;
+}};
+  margin: 0;
+  color: ${(props) => {
+  if (props.disabled) return colors.gray_400;
+  if (props.selected) return colors.gray_950;
+  return colors.gray_700;
+}};
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  &:after {
+    content: attr(data-text);
+    content: attr(data-text) / "";
+    height: 0;
+    visibility: hidden;
+    overflow: hidden;
+    user-select: none;
+    pointer-events: none;
+    font-weight: 500;
+
+    @media speech {
+      display: none;
+    }
+  }
+`;
+const Tab = ({
+  label = "Label",
+  icon,
+  selected = false,
+  disabled = false,
+  onClick,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    StyledTabWrapper,
+    {
+      selected,
+      disabled,
+      onClick: () => {
+        if (!selected && !disabled && onClick) {
+          onClick();
+        }
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(StyledTabLabelWrapper, { children: [
+          icon && /* @__PURE__ */ jsx(Icon, { icon, size: 16 }),
+          /* @__PURE__ */ jsx(
+            StyledTabLabel,
+            {
+              selected,
+              disabled,
+              "data-text": label,
+              children: label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "tabActivityIndicator" })
+      ]
+    }
+  );
+};
+
+export { Tab as default };

package/build/esm/components/Tab/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import Tab from './Tab.js';
+
+
+
+export { Tab as default };

package/build/esm/components/TextInput/TextInput.js

@@ -0,0 +1,429 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import '../../assets/icons/exit.svg.js';
+import '../../assets/icons/home.svg.js';
+import '../../assets/icons/go-right.svg.js';
+import '../../assets/icons/trash.svg.js';
+import '../../assets/icons/asterix.svg.js';
+import '../../assets/icons/hint.svg.js';
+import '../../assets/icons/info_filled.svg.js';
+import '../../assets/icons/checkmark_filled.svg.js';
+import '../../assets/icons/warning_filled.svg.js';
+import '../../assets/icons/checkmark.svg.js';
+import '../../assets/icons/checkmark_ring.svg.js';
+import '../../assets/icons/remove_person.svg.js';
+import '../../assets/icons/clear_filled.svg.js';
+import '../../assets/icons/satellite-2.svg.js';
+import '../../assets/icons/man-butterfly.svg.js';
+import '../../assets/icons/doc-sent.svg.js';
+import '../../assets/icons/warning-tr-filled.svg.js';
+import '../../assets/icons/minus.svg.js';
+import '../../assets/icons/add.svg.js';
+import '../../assets/icons/doc_edit.svg.js';
+import '../../assets/icons/calendar.svg.js';
+import '../../assets/icons/branch.svg.js';
+import '../../assets/icons/invoice_seal.svg.js';
+import '../../assets/icons/money-bag-incoming.svg.js';
+import '../../assets/icons/money-bag-Outlined.svg.js';
+import '../../assets/icons/forward.svg.js';
+import '../../assets/icons/money-investment.svg.js';
+import '../../assets/icons/libra.svg.js';
+import '../../assets/icons/offer.svg.js';
+import '../../assets/icons/man-outlined.svg.js';
+import '../../assets/icons/retry-1.svg.js';
+import '../../assets/icons/doc-error.svg.js';
+import '../../assets/icons/clear-ring-filled.svg.js';
+import '../../assets/icons/clear-ring-outlined.svg.js';
+import '../../assets/icons/clear-ring.svg.js';
+import '../../assets/icons/mail.svg.js';
+import '../../assets/icons/mobile.svg.js';
+import '../../assets/icons/to-person.svg.js';
+import '../../assets/icons/rejected.svg.js';
+import '../../assets/icons/new_tab.svg.js';
+import '../../assets/icons/money-return.svg.js';
+import '../../assets/icons/wallet-2.svg.js';
+import '../../assets/icons/back.svg.js';
+import '../../assets/icons/close.svg.js';
+import '../../assets/icons/card.svg.js';
+import '../../assets/icons/calculator-currency-3.svg.js';
+import '../../assets/icons/inn-1.svg.js';
+import '../../assets/icons/money.svg.js';
+import '../../assets/icons/down-ring.svg.js';
+import '../../assets/icons/up-ring.svg.js';
+import '../../assets/icons/card-heart.svg.js';
+import '../../assets/icons/premium.svg.js';
+import '../../assets/icons/flag.svg.js';
+import '../../assets/icons/document.svg.js';
+import '../../assets/icons/up.svg.js';
+import '../../assets/icons/plus.svg.js';
+import '../../assets/icons/go-left.svg.js';
+import '../../assets/icons/select-open-down.svg.js';
+import '../../assets/icons/search.svg.js';
+import '../../assets/icons/checkmark-part.svg.js';
+import '../../assets/icons/doc-new.svg.js';
+import '../../assets/icons/tag-price-4.svg.js';
+import '../../assets/icons/cube.svg.js';
+import '../../assets/icons/chat-ask-raif.svg.js';
+import '../../assets/icons/code-qr.svg.js';
+import '../../assets/icons/crane-1.svg.js';
+import '../../assets/icons/in-progress-ring.svg.js';
+import '../../assets/icons/people-2.svg.js';
+import '../../assets/icons/chart-bar-2.svg.js';
+import '../../assets/icons/certificate.svg.js';
+import '../../assets/icons/chart-line.svg.js';
+import '../../assets/icons/rating.svg.js';
+import '../../assets/icons/select-hide.svg.js';
+import '../../assets/icons/refresh-repeat.svg.js';
+import '../../assets/icons/clear-rec.svg.js';
+import '../../assets/icons/shield-check.svg.js';
+import '../../assets/icons/like.svg.js';
+import '../../assets/icons/mobile-connecting.svg.js';
+import '../../assets/icons/bundle-of-money.svg.js';
+import '../../assets/icons/eye-opened.svg.js';
+import '../../assets/icons/mountains.svg.js';
+import '../../assets/icons/autoservice-3.svg.js';
+import '../../assets/icons/payment-auto.svg.js';
+import '../../assets/icons/warning-tr.svg.js';
+import '../../assets/icons/safe.svg.js';
+import '../../assets/icons/lightining.svg.js';
+import '../../assets/icons/credit-cash.svg.js';
+import '../../assets/icons/atm-cards-1.svg.js';
+import '../../assets/icons/card-credit.svg.js';
+import '../../assets/icons/exchange-1.svg.js';
+import '../../assets/icons/cards.svg.js';
+import '../../assets/icons/airplane.svg.js';
+import '../../assets/icons/calculator-currency-2.svg.js';
+import '../../assets/icons/shield.svg.js';
+import '../../assets/icons/menu-up.svg.js';
+import '../../assets/icons/menu-down.svg.js';
+import '../../assets/icons/office-supplies.svg.js';
+import '../../assets/icons/city.svg.js';
+import '../../assets/icons/edit.svg.js';
+import '../../assets/icons/grocery-2.svg.js';
+import '../../assets/icons/other-goods.svg.js';
+import '../../assets/icons/credit-consumer.svg.js';
+import '../../assets/icons/acc-special.svg.js';
+import '../../assets/icons/world.svg.js';
+import '../../assets/icons/atm-cash-1.svg.js';
+import '../../assets/icons/grocery-1.svg.js';
+import '../../assets/icons/hand-cash-1.svg.js';
+import '../../assets/icons/chat-raif.svg.js';
+import '../../assets/icons/insurance-1.svg.js';
+import '../../assets/icons/doc-sign-and-send.svg.js';
+import '../../assets/icons/currency-transfer.svg.js';
+import '../../assets/icons/in-progress.svg.js';
+import '../../assets/icons/calculator.svg.js';
+import '../../assets/icons/card-get.svg.js';
+import '../../assets/icons/phone.svg.js';
+import '../../assets/icons/mail-in.svg.js';
+import '../../assets/icons/to-people.svg.js';
+import '../../assets/icons/cancel.svg.js';
+import '../../assets/icons/eye-closed.svg.js';
+import '../../assets/icons/ideas-raiting.svg.js';
+import '../../assets/icons/star-person-1.svg.js';
+import '../../assets/icons/history.svg.js';
+import '../../assets/icons/history-partial.svg.js';
+import '../../assets/icons/mobile-send-money.svg.js';
+import '../../assets/icons/cash-transactions.svg.js';
+import '../../assets/icons/heart-outlined.svg.js';
+import '../../assets/icons/task-done.svg.js';
+import '../../assets/icons/purchases.svg.js';
+import '../../assets/icons/card-raif.svg.js';
+import '../../assets/icons/credit-pay-part.svg.js';
+import '../../assets/icons/credit-pay-full.svg.js';
+import '../../assets/icons/notification-outlined.svg.js';
+import '../../assets/icons/mail-out.svg.js';
+import '../../assets/icons/chat-1.svg.js';
+import '../../assets/icons/people-1.svg.js';
+import '../../assets/icons/in-queue.svg.js';
+import '../../assets/icons/warning-exclamation.svg.js';
+import '../../assets/icons/warning-ring.svg.js';
+import { createPortal } from 'react-dom';
+import Icon from '../Icon/Icon.js';
+import Numpad from '../Numpad/Numpad.js';
+import Spinner from '../Spinner/Spinner.js';
+import { colors } from '../../utils';
+
+const _type = ["text", "email", "password", "number"];
+const sizesWrapperVariants = {
+  small: css`
+    height: 32px;
+    padding: 0px 10px 0px 12px;
+  `,
+  medium: css`
+    height: 40px;
+    padding: 0px 10px 0px 12px;
+  `,
+  large: css`
+    height: 48px;
+    padding: 0px 14px 0px 16px;
+  `
+};
+const TextInputStyledWrapper = styled.div`
+  width: 100%;
+  background-color: ${(props) => props.$disabled ? colors.gray_30 : props.$intent === "default_white" ? colors.white : colors.gray_100};
+  border-radius: 8px;
+  outline: none;
+  box-sizing: border-box;
+  border: 2px solid transparent;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  &:focus-within {
+    outline: 2px solid ${colors.accent_600};
+  }
+
+  ${(props) => (props.$leftButtonIcon || props.$leftText && typeof props.$leftText === "string" || props.$rightButtonIcon || props.$rightText && typeof props.$rightText === "string" || props.$intent === "success" || props.$loading || props.$clearButton) && css`
+      gap: 8px;
+    `}
+
+  ${(props) => props.$intent && props.$intent === "danger" && css`
+      border: 2px solid ${colors.danger_500};
+    `}
+
+  ${(props) => props.$size && typeof props.$size === "string" && sizesWrapperVariants[props.$size]};
+
+  ${(props) => (props.$leftText || props.$leftButtonIcon) && css`
+      & > .rnd8f3k9p2 {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        & > span {
+          color: ${(props2) => props2.$disabled ? colors.gray_300 : colors.gray_600};
+          font-weight: 400;
+          font-size: ${(props2) => props2.$size && typeof props2.$size === "string" && (props2.$size === "large" ? "16px" : "14px")};
+        }
+      }
+    `}
+
+  ${(props) => (props.$rightText || props.$rightButtonIcon || props.$clearButton || props.$intent === "success") && css`
+      & > .rnd9x7m2k4l {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        & > span {
+          color: ${(props2) => props2.$disabled ? colors.gray_300 : colors.gray_600};
+          font-weight: 400;
+          font-size: ${(props2) => props2.$size && typeof props2.$size === "string" && (props2.$size === "large" ? "16px" : "14px")};
+        }
+      }
+    `}
+`;
+const TextInputStyled = styled.input`
+  background-color: transparent;
+  flex: 1;
+  width: inherit;
+  color: ${(props) => props.disabled ? colors.gray_500 : colors.gray_950};
+  font-weight: 400;
+  outline: none;
+  border: none;
+  font-family: Amalia, sans-serif;
+  height: 100%;
+  padding: 0px;
+  font-size: ${(props) => props.$size && typeof props.$size === "string" && (props.$size === "large" ? "16px" : "14px")};
+  text-align: left;
+
+  &::placeholder {
+    color: ${(props) => props.disabled ? colors.gray_500 : colors.gray_600};
+  }
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+`;
+const restrictType = (type, numpad) => {
+  if (type && typeof type === "string" && _type.includes(type)) {
+    if (numpad) return "text";
+    return type;
+  } else {
+    return "text";
+  }
+};
+const TextInput = ({
+  id,
+  type = "text",
+  name,
+  placeholder,
+  value,
+  setValue,
+  size = "medium",
+  intent = "default",
+  loading = false,
+  clearButton = false,
+  leftText,
+  rightText,
+  leftButtonIcon,
+  rightButtonIcon,
+  rightButtonOnClick,
+  onCloseNumpad,
+  numpad = false,
+  numpadOffset = 10,
+  numpadFloatNumber = true,
+  numpadPosition = {
+    left: "-4px",
+    top: "100%"
+  },
+  numpadPortal = false,
+  numpadAllowPaste = false,
+  ...props
+}) => {
+  const refTextInputWrapper = useRef(null);
+  const [openNumpad, setOpenNumpad] = useState(false);
+  const [isReadOnly, setIsReadOnly] = useState(numpad ? true : false);
+  const onHandlePaste = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const pastedText = e.clipboardData.getData("text").replace(/[^0-9]/g, "");
+    if (pastedText) {
+      setValue(pastedText);
+    }
+  };
+  const onClear = () => {
+    setValue("");
+  };
+  const handleChange = (value2) => {
+    setValue && setValue(value2);
+  };
+  const handleTextInputClick = (e) => {
+    if (numpad && !loading) {
+      if (numpadPortal) {
+        const openRace = setTimeout(() => setOpenNumpad(true), 100);
+        return () => clearTimeout(openRace);
+      } else {
+        setOpenNumpad(true);
+      }
+    }
+    props?.onClick && props.onClick(e);
+  };
+  useEffect(() => {
+    const textInputReference = refTextInputWrapper?.current;
+    const handleOutside = (e) => {
+      const numpadElement = document.getElementById("rbro-numpad-wrapper");
+      const isClickInsideNumpad = numpadElement?.contains(e.target);
+      if (textInputReference && !textInputReference.contains(e.target) && !isClickInsideNumpad) {
+        onCloseNumpad && onCloseNumpad();
+        setOpenNumpad(false);
+      }
+    };
+    if (openNumpad) {
+      document.addEventListener("mousedown", handleOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleOutside);
+      };
+    }
+  }, [openNumpad, refTextInputWrapper, onCloseNumpad]);
+  return /* @__PURE__ */ jsxs(
+    TextInputStyledWrapper,
+    {
+      ref: refTextInputWrapper,
+      $leftButtonIcon: leftButtonIcon,
+      $leftText: leftText,
+      $rightButtonIcon: rightButtonIcon,
+      $rightText: rightText,
+      $rightButtonOnClick: rightButtonOnClick,
+      $size: size,
+      $intent: intent,
+      $disabled: props.disabled,
+      $clearButton: clearButton,
+      $loading: loading,
+      children: [
+        numpad && openNumpad && (numpadPortal ? createPortal(
+          /* @__PURE__ */ jsx(
+            Numpad,
+            {
+              value,
+              getValue: (v) => handleChange(v),
+              handleFooterButton: () => {
+                onCloseNumpad && onCloseNumpad();
+                setOpenNumpad(false);
+              },
+              offset: numpadOffset,
+              float: numpadFloatNumber,
+              withinPortal: true,
+              relativeRef: refTextInputWrapper
+            }
+          ),
+          document.body
+        ) : /* @__PURE__ */ jsx(
+          Numpad,
+          {
+            value,
+            getValue: (v) => handleChange(v),
+            handleFooterButton: () => {
+              onCloseNumpad && onCloseNumpad();
+              setOpenNumpad(false);
+            },
+            offset: numpadOffset,
+            float: numpadFloatNumber,
+            position: numpadPosition
+          }
+        )),
+        (leftButtonIcon || leftText && typeof leftText === "string") && /* @__PURE__ */ jsxs("div", { className: "rnd8f3k9p2", children: [
+          leftButtonIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: leftButtonIcon,
+              size: 20,
+              color: props.disabled ? colors.gray_300 : colors.gray_500
+            }
+          ),
+          leftText && typeof leftText === "string" && /* @__PURE__ */ jsx("span", { children: leftText })
+        ] }),
+        /* @__PURE__ */ jsx(
+          TextInputStyled,
+          {
+            ...props,
+            $size: size,
+            $intent: intent,
+            $type: type,
+            id,
+            name,
+            type: restrictType(type, numpad),
+            placeholder,
+            value,
+            readOnly: isReadOnly,
+            onChange: (e) => {
+              if (numpad) return;
+              handleChange(e.target.value);
+            },
+            onClick: handleTextInputClick,
+            onPaste: numpad && numpadAllowPaste ? onHandlePaste : void 0,
+            onFocus: () => numpad && numpadAllowPaste && setIsReadOnly(false),
+            onBlur: () => numpad && numpadAllowPaste && setIsReadOnly(true)
+          }
+        ),
+        loading ? /* @__PURE__ */ jsx(Spinner, { style: { opacity: props.disabled ? 0.3 : 1 }, size: 20 }) : (rightButtonIcon || rightText && typeof rightText === "string" || intent && intent === "success" || clearButton) && /* @__PURE__ */ jsxs("div", { className: "rnd9x7m2k4l", children: [
+          rightText && typeof rightText === "string" && intent !== "success" && /* @__PURE__ */ jsx("span", { children: rightText }),
+          (rightButtonIcon || intent === "success" || clearButton && !!value) && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              onClick: !props.disabled ? rightButtonIcon ? rightButtonOnClick : onClear : void 0,
+              style: {
+                cursor: rightButtonOnClick || clearButton ? "pointer" : "default"
+              },
+              icon: intent === "success" ? "checkmark_filled" : rightButtonIcon ? rightButtonIcon : "clear_filled",
+              size: 20,
+              color: props.disabled ? colors.gray_300 : intent === "success" ? colors.success_600 : colors.gray_500
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+export { TextInput as default };

package/build/esm/components/TextInput/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import TextInput from './TextInput.js';
+
+
+
+export { TextInput as default };