rbro-tat-uds 1.6.36 → 2.0.1

package/build/esm/components/TimedButton/TimedButton.js

@@ -0,0 +1,138 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import Icon from '../Icon/Icon.js';
+import { colors } from '../../utils';
+
+const buttonIntentColors = {
+  default: colors.info_800,
+  danger: colors.danger_600,
+  accent: colors.gray_950
+};
+const StyledTimedButton = styled.button`
+  outline: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  ${({ $intent, $size }) => $intent !== "default" && css`
+      & > span:first-of-type {
+        font-size: ${$size === "large" ? "16px" : "14px"};
+        font-weight: 500;
+        color: ${$intent === "success" ? colors.gray_600 : colors.danger_600};
+      }
+    `}
+
+  & > span:last-of-type {
+    color: ${({ $loading, $buttonIntent, $disabled }) => $disabled ? colors.gray_300 : $loading ? colors.info_200 : $buttonIntent && Object.keys(buttonIntentColors).includes($buttonIntent) ? buttonIntentColors[$buttonIntent] : colors.info_800};
+    font-size: ${({ $size }) => $size === "large" ? "16px" : "14px"};
+    font-weight: 500;
+    line-height: 120%;
+  }
+
+  ${({ $loading }) => $loading && css`
+      & > svg {
+        animation: spin 1s linear infinite;
+
+        @keyframes spin {
+          from {
+            transform: rotate(360deg);
+          }
+          to {
+            transform: rotate(0deg);
+          }
+        }
+      }
+    `}
+`;
+const TimedButton = ({
+  actionText = "Trimite cod prin SMS",
+  reActionText = "Retrimite",
+  intent = "default",
+  dangerLabel = "Codul nu a putut fi trimis",
+  successLabel = "Codul a fost trimis",
+  buttonIntent = "default",
+  disabled = false,
+  icon = "retry-1",
+  size = "medium",
+  delay = 10,
+  actionButtonOnClick,
+  reActionButtonOnClick,
+  ...rest
+}) => {
+  const [duration, setDuration] = useState(delay);
+  const [loading, setLoading] = useState(false);
+  const [retry, setRetry] = useState(false);
+  const onEvent = () => {
+    if (!loading && !disabled) {
+      if (!retry) {
+        setRetry(true);
+        actionButtonOnClick && actionButtonOnClick();
+        setLoading(true);
+      } else {
+        reActionButtonOnClick && reActionButtonOnClick();
+        setLoading(true);
+      }
+    }
+  };
+  useEffect(() => {
+    if (loading && !disabled) {
+      const interval = setInterval(() => {
+        setDuration((prevTime) => {
+          if (prevTime <= 1) {
+            clearInterval(interval);
+            setLoading(false);
+            return 0;
+          }
+          return prevTime - 1;
+        });
+      }, 1e3);
+      return () => {
+        clearInterval(interval);
+      };
+    } else {
+      setDuration(delay);
+    }
+  }, [delay, loading, disabled]);
+  return /* @__PURE__ */ jsxs(
+    StyledTimedButton,
+    {
+      disabled: loading || disabled,
+      onClick: onEvent,
+      $intent: intent,
+      $loading: loading,
+      $size: size,
+      $disabled: disabled,
+      $buttonIntent: buttonIntent,
+      type: "button",
+      ...rest,
+      children: [
+        intent !== "default" && /* @__PURE__ */ jsx("span", { children: intent === "success" ? successLabel : dangerLabel }),
+        loading ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "retry-1",
+            size: size === "large" ? 18 : 16,
+            color: colors.info_200
+          }
+        ) : icon !== void 0 && icon !== null && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon,
+            size: size === "large" ? 18 : 16,
+            color: disabled ? colors.gray_300 : loading ? colors.info_200 : buttonIntent && Object.keys(buttonIntentColors).includes(buttonIntent) ? buttonIntentColors[buttonIntent] : colors.info_800
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: loading ? `Retrimite in ${duration} secunde` : retry ? reActionText : actionText })
+      ]
+    }
+  );
+};
+
+export { TimedButton as default };

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

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

package/build/esm/components/TimelineSteps/TimelineSteps.js

@@ -0,0 +1,29 @@
+"use strict";
+"use client";
+
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+
+const TimelineStepsStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const TimelineSteps = ({ children, ...rest }) => {
+  const childrenArray = React__default.Children.toArray(children);
+  const modifiedChildren = childrenArray.map((child, index) => {
+    if (React__default.isValidElement(child)) {
+      if (index === childrenArray.length - 1) {
+        return React__default.cloneElement(child, {
+          last: true
+        });
+      }
+      return child;
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx(TimelineStepsStyled, { ...rest, children: modifiedChildren });
+};
+
+export { TimelineSteps as default };

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

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

package/build/esm/components/TimelineStepsItem/TimelineStepsItem.js

@@ -0,0 +1,77 @@
+"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 TimelineStepsItemStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  & > div:first-of-type {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    & > div:first-of-type {
+      width: 20px;
+      height: 20px;
+      border-radius: 9999px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: ${({ $status }) => $status === "done" ? colors.success_500 : $status === "error" ? colors.danger_500 : $status === "pending" ? colors.info_700 : colors.gray_300};
+    }
+
+    & > span {
+      font-size: 16px;
+      font-weight: 500;
+      color: ${({ $status }) => $status === "done" ? colors.success_600 : $status === "error" ? colors.danger_700 : $status === "pending" ? colors.gray_950 : colors.gray_300};
+    }
+  }
+
+  & > div:nth-of-type(2) {
+    display: flex;
+    align-items: stretch;
+
+    & > div:first-of-type {
+      width: 2px;
+      border-radius: 9999px;
+      background-color: ${colors.gray_300};
+      min-height: 16px;
+      margin-left: 9px;
+      margin-right: 9px;
+    }
+  }
+`;
+const TimelineStepsItem = ({
+  label = "",
+  status = "ongoing",
+  last = false,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(TimelineStepsItemStyled, { $status: status, ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: status === "done" ? "checkmark" : status === "error" ? "warning-exclamation" : status === "pending" ? "in-progress" : "in-queue",
+          size: 12,
+          color: colors.white
+        }
+      ) }),
+      /* @__PURE__ */ jsx("span", { children: label })
+    ] }),
+    (!last || status === "pending" || status === "error") && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", {}),
+      (status === "pending" || status === "error") && /* @__PURE__ */ jsx("div", { children })
+    ] })
+  ] });
+};
+
+export { TimelineStepsItem as default };

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

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

package/build/esm/components/Timer/Timer.js

@@ -0,0 +1,118 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import Icon from '../Icon/Icon.js';
+import { colors } from '../../utils';
+
+const TimerStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  background-color: ${({
+  $loadingBackgroundColor,
+  $intent,
+  $successBackgroundColor
+}) => $intent === "loading" ? $loadingBackgroundColor && Object.keys(colors).includes($loadingBackgroundColor) ? colors[$loadingBackgroundColor] : colors.white : $successBackgroundColor && Object.keys(colors).includes($successBackgroundColor) ? colors[$successBackgroundColor] : colors.white};
+  padding: ${({ $padding }) => $padding && typeof $padding === "string" ? $padding : "16px"};
+  border-radius: 8px;
+
+  & > span {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 130%;
+    color: ${({ $loadingTextColor, $intent, $successTextColor }) => $intent === "loading" ? $loadingTextColor && Object.keys(colors).includes($loadingTextColor) ? colors[$loadingTextColor] : colors.gray_950 : $successTextColor && Object.keys(colors).includes($successTextColor) ? colors[$successTextColor] : colors.gray_950};
+  }
+
+  ${({ $disabled }) => $disabled && css`
+      opacity: 0.5;
+      pointer-events: none;
+
+      & > div {
+        & > span {
+          color: ${colors.gray_300};
+        }
+      }
+    `}
+`;
+const Timer = ({
+  loadingBackgroundColor = "gray_100",
+  loadingTextColor = "info_700",
+  successBackgroundColor = "gray_100",
+  successTextColor = "gray_950",
+  padding = "8px",
+  successIcon = "checkmark_filled",
+  intent = "success",
+  disabled = false,
+  delay = 40,
+  buttonEventClick = () => {
+  },
+  timesUp = () => {
+  },
+  ...rest
+}) => {
+  const [duration, setDuration] = useState(delay);
+  useEffect(() => {
+    if (duration === 0) {
+      timesUp?.(true);
+    } else if (intent !== "loading") {
+      timesUp?.(false);
+    }
+  }, [duration, intent, timesUp]);
+  const onEvent = () => {
+    if (intent !== "loading" && !disabled) {
+      buttonEventClick?.();
+    }
+  };
+  useEffect(() => {
+    if (intent === "loading" && !disabled) {
+      const interval = setInterval(() => {
+        setDuration((prevTime) => {
+          if (prevTime <= 1) {
+            clearInterval(interval);
+            return 0;
+          }
+          return prevTime - 1;
+        });
+      }, 1e3);
+      return () => {
+        clearInterval(interval);
+      };
+    } else {
+      setDuration(delay);
+    }
+  }, [delay, intent, disabled]);
+  return /* @__PURE__ */ jsxs(
+    TimerStyled,
+    {
+      $loadingBackgroundColor: loadingBackgroundColor,
+      $loadingTextColor: loadingTextColor,
+      $successBackgroundColor: successBackgroundColor,
+      $successTextColor: successTextColor,
+      $padding: padding,
+      $intent: intent,
+      $disabled: disabled,
+      onClick: onEvent,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: intent === "loading" ? "history" : successIcon,
+            size: 20,
+            color: disabled ? colors.gray_300 : intent === "loading" ? colors[loadingTextColor || "gray_950"] : colors[successTextColor || "gray_950"]
+          }
+        ),
+        intent === "loading" && /* @__PURE__ */ jsxs("span", { children: [
+          duration,
+          " s"
+        ] })
+      ]
+    }
+  );
+};
+
+export { Timer as default };

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

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