rbro-tat-uds 1.6.35 → 2.0.0

package/build/cjs/components/Alert/Alert.cjs

@@ -0,0 +1,482 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var Icon = require('../Icon/Icon.cjs');
+var utils = require('../../utils');
+
+const sizeClasses = {
+  wrapper: {
+    small: {
+      wrapper: styled.css`
+        padding: 6px 8px;
+
+        & > div > .xKf9Lm2Pq7 {
+          font-size: 14px;
+        }
+      `,
+      icon: 14
+    },
+    medium: {
+      wrapper: styled.css`
+        padding: 8px 12px;
+
+        & > div > .xKf9Lm2Pq7 {
+          font-size: 16px;
+        }
+      `,
+      icon: 16
+    },
+    large: {
+      wrapper: styled.css`
+        padding: 8px 12px;
+
+        & > div > .xKf9Lm2Pq7 {
+          font-size: 18px;
+        }
+      `,
+      icon: 18
+    }
+  },
+  button: {
+    small: {
+      wrapper: styled.css`
+        padding: 6px 8px;
+
+        & > span {
+          font-size: 14px;
+        }
+      `,
+      icon: 14
+    },
+    medium: {
+      wrapper: styled.css`
+        padding: 8px 12px;
+
+        & > span {
+          font-size: 16px;
+        }
+      `,
+      icon: 16
+    },
+    large: {
+      wrapper: styled.css`
+        padding: 8px 12px;
+
+        & > span {
+          font-size: 18px;
+        }
+      `,
+      icon: 18
+    }
+  }
+};
+const intentClasses = {
+  wrapper: {
+    default: {
+      default: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.gray_950};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.white};
+          }
+        `,
+        icon: utils.colors.white
+      },
+      info: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.info_600};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.white};
+          }
+        `,
+        icon: utils.colors.white
+      },
+      featured: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.accent_500};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.gray_950};
+          }
+        `,
+        icon: utils.colors.gray_950
+      },
+      success: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.success_600};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.white};
+          }
+        `,
+        icon: utils.colors.white
+      },
+      danger: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.danger_500};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.white};
+          }
+        `,
+        icon: utils.colors.white
+      },
+      warning: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.warning_500};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.white};
+          }
+        `,
+        icon: utils.colors.white
+      }
+    },
+    light: {
+      default: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.gray_60};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.gray_950};
+          }
+        `,
+        icon: utils.colors.gray_950
+      },
+      info: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.info_100};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.info_700};
+          }
+        `,
+        icon: utils.colors.info_600
+      },
+      featured: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.accent_200};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.gray_950};
+          }
+        `,
+        icon: utils.colors.gray_950
+      },
+      success: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.success_100};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.success_700};
+          }
+        `,
+        icon: utils.colors.success_600
+      },
+      danger: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.danger_200};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.danger_700};
+          }
+        `,
+        icon: utils.colors.danger_600
+      },
+      warning: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.warning_100};
+
+          & > div > .xKf9Lm2Pq7 {
+            color: ${utils.colors.warning_700};
+          }
+        `,
+        icon: utils.colors.warning_600
+      }
+    }
+  },
+  button: {
+    default: {
+      default: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.gray_950};
+
+          & > span {
+            color: ${utils.colors.white};
+          }
+        `,
+        icon: utils.colors.white
+      },
+      info: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.info_600};
+
+          & > span {
+            color: ${utils.colors.white};
+          }
+        `,
+        icon: utils.colors.white
+      },
+      featured: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.accent_500};
+
+          & > span {
+            color: ${utils.colors.gray_950};
+          }
+        `,
+        icon: utils.colors.gray_950
+      },
+      success: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.success_600};
+
+          & > span {
+            color: ${utils.colors.white};
+          }
+        `,
+        icon: utils.colors.white
+      },
+      danger: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.danger_500};
+
+          & > span {
+            color: ${utils.colors.white};
+          }
+        `,
+        icon: utils.colors.white
+      },
+      warning: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.warning_500};
+
+          & > span {
+            color: ${utils.colors.white};
+          }
+        `,
+        icon: utils.colors.white
+      }
+    },
+    light: {
+      default: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.gray_60};
+
+          & > span {
+            color: ${utils.colors.gray_950};
+          }
+        `,
+        icon: utils.colors.gray_950
+      },
+      info: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.info_100};
+
+          & > span {
+            color: ${utils.colors.info_700};
+          }
+        `,
+        icon: utils.colors.info_600
+      },
+      featured: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.accent_200};
+
+          & > span {
+            color: ${utils.colors.gray_950};
+          }
+        `,
+        icon: utils.colors.gray_950
+      },
+      success: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.success_100};
+
+          & > span {
+            color: ${utils.colors.success_700};
+          }
+        `,
+        icon: utils.colors.success_600
+      },
+      danger: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.danger_200};
+
+          & > span {
+            color: ${utils.colors.danger_700};
+          }
+        `,
+        icon: utils.colors.danger_600
+      },
+      warning: {
+        wrapper: styled.css`
+          background-color: ${utils.colors.warning_100};
+
+          & > span {
+            color: ${utils.colors.warning_700};
+          }
+        `,
+        icon: utils.colors.warning_600
+      }
+    }
+  }
+};
+const buttonFontWeight = {
+  400: styled.css`
+    font-weight: 400;
+  `,
+  500: styled.css`
+    font-weight: 500;
+  `,
+  600: styled.css`
+    font-weight: 600;
+  `,
+  700: styled.css`
+    font-weight: 700;
+  `,
+  800: styled.css`
+    font-weight: 800;
+  `,
+  900: styled.css`
+    font-weight: 900;
+  `
+};
+const AlertStyled = styled.div`
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-height: ${({ $size }) => $size && typeof $size === "string" && ["small", "medium", "large"].includes($size) ? $size === "large" ? "39px" : $size === "medium" ? "36px" : "30px" : "30px"};
+
+  & > div {
+    display: flex;
+    align-items: center;
+    border-radius: ${({ $showButton }) => $showButton ? "8px 0px 0px 8px" : "8px 8px 8px 8px"};
+    box-sizing: border-box;
+    flex: 1;
+
+    ${({ $intent, $variant }) => $intent && ["default", "info", "featured", "success", "danger"].includes(
+  $intent
+) || $variant && ["default", "light"].includes($variant) ? intentClasses.wrapper[$variant ?? "default"][$intent ?? "default"].wrapper : intentClasses.wrapper.default.default.wrapper}
+
+    ${({ $size }) => $size && typeof $size === "string" && ["small", "medium", "large"].includes($size) ? sizeClasses.wrapper[$size].wrapper : sizeClasses.wrapper.medium}
+
+    & > div {
+      gap: 8px;
+      display: flex;
+      align-items: flex-start;
+
+      & > .xKf9Lm2Pq7 {
+        font-weight: 400;
+        line-height: 120%;
+      }
+
+      & > .Zt8bX3mQ9p {
+        margin-top: ${({ $size }) => $size && typeof $size === "string" && ["small", "medium", "large"].includes($size) && ($size === "large" ? "3px" : "2px")};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  & > button {
+    min-height: 36px;
+    border: none;
+    outline: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border-radius: 0px 8px 8px 0px;
+    border-left: 1px solid ${utils.colors.white};
+    cursor: pointer;
+
+    & > div {
+      margin-top: ${({ $size }) => $size && typeof $size === "string" && ["small", "medium", "large"].includes($size) && ($size === "large" ? "3px" : "2px")};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    & > span {
+      ${({ $buttonFontWeight }) => $buttonFontWeight && Object.keys(buttonFontWeight).includes($buttonFontWeight) ? buttonFontWeight[$buttonFontWeight] : "400"}
+      line-height: 120%;
+    }
+
+    ${({ $size }) => $size && typeof $size === "string" && ["small", "medium", "large"].includes($size) ? sizeClasses.button[$size].wrapper : sizeClasses.button.medium}
+
+    ${({ $intent, $variant }) => $intent && ["default", "info", "featured", "success", "danger"].includes(
+  $intent
+) || $variant && ["default", "light"].includes($variant) ? intentClasses.button[$variant ?? "default"][$intent ?? "default"].wrapper : intentClasses.button.default.default.wrapper}
+  }
+`;
+const Alert = ({
+  intent = "default",
+  variant = "default",
+  icon,
+  size = "medium",
+  text = "Notification",
+  showButton = false,
+  buttonText,
+  buttonIcon,
+  buttonFontWeight: buttonFontWeight2 = "400",
+  buttonOnClick
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    AlertStyled,
+    {
+      $size: size,
+      $intent: intent,
+      $variant: variant,
+      $showButton: showButton,
+      $buttonFontWeight: buttonFontWeight2,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Zt8bX3mQ9p", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.default,
+            {
+              icon,
+              size: size && ["small", "medium", "large"].includes(size) ? sizeClasses.wrapper[size].icon : sizeClasses.wrapper.medium.icon,
+              color: intent && [
+                "default",
+                "info",
+                "featured",
+                "success",
+                "danger"
+              ].includes(intent) || variant && ["default", "light"].includes(variant) ? intentClasses.wrapper[variant ?? "default"][intent ?? "default"].icon : intentClasses.wrapper.default.default.icon
+            }
+          ) }),
+          text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xKf9Lm2Pq7", children: text })
+        ] }) }),
+        showButton && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: buttonOnClick, children: [
+          buttonText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonText }),
+          buttonIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.default,
+            {
+              icon: buttonIcon,
+              size: size && ["small", "medium", "large"].includes(size) ? sizeClasses.button[size].icon : sizeClasses.button.medium.icon,
+              color: intent && [
+                "default",
+                "info",
+                "featured",
+                "success",
+                "danger"
+              ].includes(intent) || variant && ["default", "light"].includes(variant) ? intentClasses.button[variant ?? "default"][intent ?? "default"].icon : intentClasses.button.default.default.icon
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+
+exports.default = Alert;

package/build/cjs/components/Alert/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Alert = require('./Alert.cjs');
+
+
+
+exports.default = Alert.default;

package/build/cjs/components/AppBranding/AppBranding.cjs

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var Logo = require('../Logo/Logo.cjs');
+var utils = require('../../utils');
+
+const AppBrandingStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    padding: 1px 6px 2px 6px;
+    border-radius: 4px;
+    background-color: ${({ $bgColor }) => $bgColor ? utils.colors[$bgColor] : utils.colors["gray_60"]};
+
+    & > span {
+      font-size: 12px;
+      text-align: center;
+      font-weight: 500;
+      color: ${({ $textColor }) => $textColor ? utils.colors[$textColor] : utils.colors["gray_950"]};
+    }
+  }
+`;
+const AppBranding = ({
+  text = "Smart Finance",
+  textColor = "gray_950",
+  bgColor = "gray_60",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(AppBrandingStyled, { $textColor: textColor, $bgColor: bgColor, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Logo.default, { size: 36 }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: text }) })
+  ] });
+};
+
+exports.default = AppBranding;

package/build/cjs/components/AppBranding/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AppBranding = require('./AppBranding.cjs');
+
+
+
+exports.default = AppBranding.default;

package/build/cjs/components/AutosaveStatus/AutosaveStatus.cjs

@@ -0,0 +1,58 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+var Spinner = require('../Spinner/Spinner.cjs');
+var Icon = require('../Icon/Icon.cjs');
+
+const AutosaveStatusStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+
+  & > .a7Xp9Kf3zL {
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+    text-align: right;
+
+    & > span:nth-of-type(1) {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 120%;
+      color: ${utils.colors.gray_950};
+    }
+
+    & > span:nth-of-type(2) {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 120%;
+      color: ${utils.colors.gray_600};
+    }
+  }
+`;
+const AutosaveStatus = ({
+  label = "",
+  info = "",
+  loadingLabel = "",
+  loadingInfo = "",
+  loading = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(AutosaveStatusStyled, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "a7Xp9Kf3zL", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: loading ? loadingLabel : label }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: loading ? loadingInfo : info })
+    ] }),
+    loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner.default, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(Icon.default, { icon: "checkmark_filled", size: 20, color: utils.colors.success_500 })
+  ] });
+};
+
+exports.default = AutosaveStatus;

package/build/cjs/components/AutosaveStatus/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AutosaveStatus = require('./AutosaveStatus.cjs');
+
+
+
+exports.default = AutosaveStatus.default;

package/build/cjs/components/Bar/Bar.cjs

@@ -0,0 +1,54 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const _constraint_height = [8, 12, 16, 24, 32, 40];
+const _constraint_radius = [2, 4, 8, 12, 16];
+const StyledBar = styled.div`
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  height: ${(props) => props.$height && _constraint_height.includes(props.$height) ? props.$height + "px" : "24px"};
+  background-color: ${(props) => props.$rightColor && Object.keys(utils.colors).includes(props.$rightColor) ? utils.colors[props.$rightColor] : utils.colors.gray_60};
+  border-radius: ${(props) => props.$radius && _constraint_radius.includes(props.$radius) ? props.$radius + "px" : "4px"};
+
+  &:after {
+    content: "";
+    width: ${(props) => typeof props.$value === "number" ? props.$value * 100 + "%" : "50%"};
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: ${(props) => props.$leftColor && Object.keys(utils.colors).includes(props.$leftColor) ? utils.colors[props.$leftColor] : utils.colors.gray_950};
+  }
+`;
+const Bar = ({
+  value = 0,
+  leftColor = "gray_950",
+  rightColor = "gray_60",
+  height = 24,
+  radius = 4,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledBar,
+    {
+      $value: value,
+      $leftColor: leftColor,
+      $rightColor: rightColor,
+      $height: height,
+      $radius: radius,
+      ...rest
+    }
+  );
+};
+
+exports.default = Bar;

package/build/cjs/components/Bar/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Bar = require('./Bar.cjs');
+
+
+
+exports.default = Bar.default;