rbro-tat-uds 1.6.36 → 2.0.0

package/build/esm/components/BreadcrumbItem/BreadcrumbItem.js

@@ -0,0 +1,63 @@
+"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 BreadcrumbItemWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+  align-content: center;
+  cursor: ${(props) => !props.disabled && !props.selected && "pointer"};
+  &:hover {
+    & p {
+      color: ${(props) => {
+  if (props.disabled) return colors.gray_600;
+  if (props.selected) return colors.gray_950;
+  return colors.info_600;
+}};
+    }
+    & svg {
+      fill: ${(props) => {
+  if (props.disabled) return colors.gray_600;
+  if (props.selected) return colors.gray_950;
+  return colors.info_600;
+}};
+    }
+  }
+  & svg {
+    fill: ${(props) => {
+  if (props.disabled) return colors.gray_600;
+  if (props.selected) return colors.gray_950;
+  return colors.info_700;
+}};
+  }
+`;
+const BreadcrumbItemLabel = styled.p`
+  font-size: 14px;
+  line-height: 16.8px;
+  font-weight: 400;
+  margin: 0;
+  color: ${(props) => {
+  if (props.disabled) return colors.gray_600;
+  if (props.selected) return colors.gray_950;
+  return colors.info_700;
+}};
+`;
+const BreadcrumbItem = ({
+  label = "Label",
+  icon,
+  selected = false,
+  disabled = false,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(BreadcrumbItemWrapper, { ...rest, selected, disabled, children: [
+    icon && /* @__PURE__ */ jsx(Icon, { icon, size: 16 }),
+    /* @__PURE__ */ jsx(BreadcrumbItemLabel, { selected, disabled, children: label })
+  ] });
+};
+
+export { BreadcrumbItem as default };

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

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

package/build/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,21 @@
+"use strict";
+"use client";
+
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import styled from 'styled-components';
+
+const StyledBreadcrumbs = styled.div`
+  padding: ${(props) => props.$padding};
+  display: flex;
+  align-items: center;
+  gap: ${({ $gap }) => $gap}px;
+`;
+const Breadcrumbs = ({
+  gap = 8,
+  padding = "0px",
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(StyledBreadcrumbs, { $gap: gap, $padding: padding, ...rest, children });
+
+export { Breadcrumbs as default };

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

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

package/build/esm/components/Button/Button.js

@@ -0,0 +1,587 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '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 Icon from '../Icon/Icon.js';
+import Spinner from '../Spinner/Spinner.js';
+import { colors } from '../../utils';
+
+const stylesSize = {
+  small: css`
+    height: 32px;
+    padding: 0 12px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 120%;
+    border-radius: 8px;
+    gap: 8px;
+  `,
+  medium: css`
+    height: 40px;
+    padding: 0 16px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 120%;
+    border-radius: 8px;
+    gap: 8px;
+  `,
+  large: css`
+    height: 48px;
+    padding: 0 16px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 120%;
+    border-radius: 12px;
+    gap: 12px;
+  `
+};
+const stylesColorsIcons = {
+  accent: {
+    primary: {
+      default: colors.gray_950,
+      disabled: colors.gray_600
+    },
+    secondary: {
+      default: colors.gray_950,
+      disabled: colors.gray_600
+    },
+    secondaryOutlined: {
+      default: colors.gray_950,
+      disabled: colors.gray_300
+    },
+    tertiary: {
+      default: colors.info_800,
+      disabled: colors.gray_200
+    }
+  },
+  info: {
+    primary: {
+      default: colors.white,
+      disabled: colors.gray_600
+    },
+    secondary: {
+      default: colors.info_800,
+      disabled: colors.gray_600
+    },
+    secondaryOutlined: {
+      default: colors.info_800,
+      disabled: colors.gray_300
+    }
+  },
+  danger: {
+    primary: {
+      default: colors.white,
+      disabled: colors.gray_600
+    },
+    secondary: {
+      default: colors.danger_700,
+      disabled: colors.gray_600
+    },
+    secondaryOutlined: {
+      default: colors.danger_500,
+      disabled: colors.gray_300
+    },
+    tertiary: {
+      default: colors.danger_500,
+      disabled: colors.gray_300
+    }
+  }
+};
+const stylesIntentVariant = {
+  accent: {
+    primary: css`
+      background-color: ${colors.accent_600};
+      border: 1px solid ${colors.gray_1000_10};
+      color: ${colors.gray_950};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.accent_650};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.accent_700};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: ${colors.gray_100};
+        color: ${colors.gray_600};
+      }
+    `,
+    secondary: css`
+      background-color: ${colors.gray_60};
+      border: 1px solid ${colors.gray_1000_10};
+      color: ${colors.gray_950};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.gray_200};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.gray_400};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: ${colors.gray_100};
+        color: ${colors.gray_600};
+      }
+    `,
+    secondaryOutlined: css`
+      background-color: ${colors.white};
+      border: 1px solid ${colors.gray_1000_10};
+      color: ${colors.gray_950};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.gray_100};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.gray_200};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: ${colors.white};
+        color: ${colors.gray_300};
+      }
+    `,
+    tertiary: css`
+      background-color: transparent;
+      border: 1px solid transparent;
+      color: ${colors.info_800};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.gray_100};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.gray_300};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: transparent;
+        color: ${colors.gray_200};
+      }
+    `
+  },
+  info: {
+    primary: css`
+      background-color: ${colors.info_700};
+      border: 1px solid ${colors.gray_1000_10};
+      color: ${colors.white};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.info_600};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.info_500};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: ${colors.gray_100};
+        color: ${colors.gray_600};
+      }
+    `,
+    secondary: css`
+      background-color: ${colors.info_100};
+      border: 1px solid ${colors.gray_1000_10};
+      color: ${colors.info_800};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.info_150};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.info_200};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: ${colors.gray_100};
+        color: ${colors.gray_600};
+      }
+    `,
+    secondaryOutlined: css`
+      background-color: ${colors.white};
+      border: 1px solid ${colors.gray_1000_10};
+      color: ${colors.info_800};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.gray_100};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.gray_200};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: ${colors.white};
+        color: ${colors.gray_300};
+      }
+    `
+  },
+  danger: {
+    primary: css`
+      background-color: ${colors.danger_500};
+      border: 1px solid ${colors.gray_1000_10};
+      color: ${colors.white};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.danger_600};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.danger_700};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: ${colors.gray_100};
+        color: ${colors.gray_600};
+      }
+    `,
+    secondary: css`
+      background-color: ${colors.danger_100};
+      border: 1px solid ${colors.gray_1000_10};
+      color: ${colors.danger_700};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.danger_200};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.danger_250};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: ${colors.gray_100};
+        color: ${colors.gray_600};
+      }
+    `,
+    secondaryOutlined: css`
+      background-color: ${colors.white};
+      border: 1px solid ${colors.gray_1000_10};
+      color: ${colors.danger_500};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.gray_60};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.gray_300};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: ${colors.white};
+        color: ${colors.gray_300};
+      }
+    `,
+    tertiary: css`
+      background-color: transparent;
+      border: 1px solid transparent;
+      color: ${colors.danger_500};
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: ${colors.gray_200};
+          border: 1px solid ${colors.gray_1000_10};
+        }
+      }
+
+      &:active {
+        background-color: ${colors.gray_400};
+        border: 1px solid ${colors.gray_1000_10};
+      }
+
+      &:focus-visible {
+        outline: 3px solid ${colors.info_700_40};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        background-color: transparent;
+        color: ${colors.gray_300};
+      }
+    `
+  }
+};
+const StyledButton = styled.button`
+  cursor: pointer;
+
+  ${(props) => props.$intent && props.$variant && stylesIntentVariant[props.$intent][props.$variant]}
+
+  ${(props) => props.$width && typeof props.$width === "string" && css`
+      width: ${props.$width};
+    `}
+
+  ${(props) => props.$size && stylesSize[props.$size]}
+
+    ${(props) => (props.$leftIcon || props.$rightIcon) && css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    `}
+
+    ${(props) => props.$loading && css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-left: 35px;
+      padding-right: 35px;
+    `}
+`;
+const Button = ({
+  width = "auto",
+  type = "button",
+  intent = "accent",
+  variant = "primary",
+  label = "Label",
+  loading = false,
+  size = "medium",
+  leftIcon,
+  rightIcon,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    StyledButton,
+    {
+      $width: width,
+      $intent: intent,
+      $variant: variant,
+      $loading: loading,
+      $size: size,
+      type,
+      $leftIcon: leftIcon,
+      $rightIcon: rightIcon,
+      ...props,
+      children: [
+        leftIcon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: size === "small" || size === "medium" ? 16 : 20,
+            color: stylesColorsIcons?.[intent]?.[variant]?.[props.disabled ? "disabled" : "default"],
+            icon: leftIcon
+          }
+        ),
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: 20 }) : label,
+        rightIcon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: size === "small" || size === "medium" ? 16 : 20,
+            color: stylesColorsIcons?.[intent]?.[variant]?.[props.disabled ? "disabled" : "default"],
+            icon: rightIcon
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Button as default };

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

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