rbro-tat-uds 1.6.36 → 2.0.0

package/build/esm/components/Modal/Modal.js

@@ -0,0 +1,143 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Children } from 'react';
+import styled, { createGlobalStyle, css } from 'styled-components';
+import IconButton from '../IconButton/IconButton.js';
+import { colors } from '../../utils';
+
+const GlobalStyle = createGlobalStyle`
+    &:has(.uds-mc) {
+      overflow: hidden;
+    }
+`;
+const ModalStyled = styled.div`
+  display: ${(props) => props.$show ? "flex" : "none"};
+  background-color: ${colors.gray_1000_60};
+  width: 100%;
+  min-height: 100vh;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 400;
+  box-shadow: 0px 6px 20px 0px rgba(19, 20, 22, 0.2),
+    0px 2px 6px 0px rgba(19, 20, 22, 0.15);
+  padding: 48px;
+  box-sizing: border-box;
+  touch-action: none;
+
+  & > div {
+    background-color: ${colors.white};
+    overflow: hidden;
+    border-radius: 16px;
+    max-width: ${(props) => props.$width && typeof props.$width === "number" ? props.$width + "px" : "680px"};
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+
+    & > .uds-mt {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 12px 14px 12px 24px;
+      border-bottom: 1px solid ${colors.gray_150};
+      box-sizing: border-box;
+
+      & > span {
+        font-size: 20px;
+        font-weight: 700;
+        color: ${colors.gray_950};
+        line-height: 32px;
+      }
+    }
+
+    & > .uds-mc {
+      width: 100%;
+      padding: ${({ $contentPadding }) => $contentPadding && typeof $contentPadding === "string" ? $contentPadding : "24px"};
+      box-sizing: border-box;
+      overflow-y: ${({ $contentOverflow }) => $contentOverflow || "scroll"};
+      height: 100%;
+      overscroll-behavior: contain;
+
+      ${(props) => props.$showFooter && css`
+          border-bottom: 1px solid ${colors.gray_150};
+        `}
+    }
+
+    & > .uds-mf {
+      width: 100%;
+      padding: 12px 24px 12px 24px;
+      box-sizing: border-box;
+    }
+  }
+`;
+const Modal = ({
+  show = false,
+  title = "Title",
+  width = 680,
+  showFooter = false,
+  onClose,
+  showCloseButton = true,
+  children,
+  contentPadding = "24px",
+  contentOverflow = "scroll",
+  contentBodyStyle = {},
+  ...rest
+}) => {
+  let _contentSlot = null;
+  let _footerSlot = null;
+  Children.toArray(children).filter(Boolean).forEach((child) => {
+    const element = child;
+    if (element.type === ContentSlot) {
+      _contentSlot = child;
+    }
+    if (element.type === FooterSlot) {
+      _footerSlot = child;
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    ModalStyled,
+    {
+      $show: show,
+      $width: width,
+      $showFooter: showFooter,
+      $contentPadding: contentPadding,
+      $contentOverflow: contentOverflow,
+      ...rest,
+      children: [
+        show && /* @__PURE__ */ jsx(GlobalStyle, {}),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "uds-mt", children: [
+            /* @__PURE__ */ jsx("span", { children: title }),
+            showCloseButton && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onClose,
+                icon: "close",
+                size: "small",
+                intent: "accent",
+                variant: "tertiary"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "uds-mc", style: contentBodyStyle, children: _contentSlot && _contentSlot }),
+          showFooter && /* @__PURE__ */ jsx("div", { className: "uds-mf", children: _footerSlot && _footerSlot })
+        ] })
+      ]
+    }
+  );
+};
+const ContentSlot = ({ children }) => children;
+const FooterSlot = ({ children }) => children;
+Modal.ContentSlot = ContentSlot;
+Modal.FooterSlot = FooterSlot;
+
+export { Modal as default };

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

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

package/build/esm/components/Numpad/Numpad.js

@@ -0,0 +1,238 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../utils';
+import Icon from '../Icon/Icon.js';
+import Button from '../Button/Button.js';
+
+const NumpadStyled = styled.div`
+  background-color: ${colors.gray_950};
+  width: 244px;
+  border-radius: 16px;
+  box-shadow: 0px 6px 20px 0px #13141633, 0px 2px 6px 0px rgba(19, 20, 22, 0.15);
+  position: absolute;
+  z-index: 250;
+  margin-top: ${({ $offset }) => typeof $offset === "number" ? $offset + "px" : "10px"};
+
+  & > div:nth-child(1) {
+    padding: 12px;
+
+    & > div {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      align-items: center;
+      place-items: center;
+
+      & > button {
+        height: 56px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: ${colors.gray_900};
+        width: 100%;
+        cursor: pointer;
+        outline: none;
+        appearance: none;
+        border: none;
+
+        &:active {
+          background-color: ${colors.gray_700};
+        }
+
+        &:nth-child(1) {
+          border-radius: 8px 0px 0px 0px;
+        }
+
+        &:nth-child(3) {
+          border-radius: 0px 8px 0px 0px;
+        }
+
+        &:nth-child(10) {
+          border-radius: 0px 0px 0px 8px;
+        }
+
+        &:nth-child(12) {
+          border-radius: 0px 0px 8px 0px;
+        }
+
+        &:nth-child(-n + 3) {
+          border-bottom: 2px solid ${colors.gray_950};
+        }
+
+        &:nth-child(3n + 1) {
+          border-right: 2px solid ${colors.gray_950};
+        }
+
+        &:nth-child(3n) {
+          border-left: 2px solid ${colors.gray_950};
+        }
+
+        &:nth-child(n + 7) {
+          border-top: 2px solid ${colors.gray_950};
+        }
+
+        & > span {
+          font-size: 20px;
+          font-weight: 500;
+          color: ${colors.accent_500};
+        }
+      }
+    }
+  }
+
+  & > div:nth-child(2) {
+    padding: 0px 12px 12px 12px;
+  }
+`;
+const Numpad = ({
+  position = {
+    top: "100%",
+    left: "0px"
+  },
+  float = true,
+  getValue,
+  value = "0",
+  handleFooterButton = () => {
+  },
+  offset = 10,
+  withinPortal = false,
+  relativeRef,
+  ...rest
+}) => {
+  const [padInput, setPadInput] = useState(value.toString());
+  const numpadRef = useRef(null);
+  const [stylePosition, setStylePosition] = useState({});
+  const updatePosition = useCallback(() => {
+    if (!numpadRef.current) return;
+    const numpad = numpadRef.current;
+    const rect = numpad.getBoundingClientRect();
+    const parentRect = numpad.offsetParent?.getBoundingClientRect();
+    if (!parentRect) return;
+    const spaceBelow = window.innerHeight - parentRect.bottom;
+    const spaceAbove = parentRect.top;
+    const additionalSpaceBottom = 100;
+    const displayBelow = rect.height + additionalSpaceBottom > spaceBelow && spaceAbove > spaceBelow;
+    const newPosition = {
+      top: displayBelow ? `auto` : `100%`,
+      left: `${position.left}`,
+      right: `${position.right}`,
+      bottom: displayBelow ? "100%" : "auto",
+      marginTop: displayBelow ? "auto" : `${offset}px`,
+      marginBottom: displayBelow ? `${offset}px` : "auto"
+    };
+    setStylePosition((prev) => {
+      if (JSON.stringify(prev) === JSON.stringify(newPosition)) {
+        return prev;
+      }
+      return newPosition;
+    });
+  }, []);
+  const updatePositionPortal = useCallback(() => {
+    const numpadReference = numpadRef?.current;
+    const inputReference = relativeRef?.current;
+    if (!numpadReference || !inputReference) return;
+    const rect = numpadReference.getBoundingClientRect();
+    const parentRect = inputReference.getBoundingClientRect();
+    const x = parentRect.left + window.scrollX;
+    const y = parentRect.top + window.scrollY;
+    const spaceBelow = window.innerHeight - parentRect.bottom;
+    const spaceAbove = parentRect.top;
+    const displayBelow = rect.height + 50 > spaceBelow && spaceAbove + 150 > spaceBelow;
+    const newPosition = {
+      top: displayBelow ? `${y - rect.height - 10}px` : `${y + parentRect.height}px`,
+      left: `${x}px`,
+      marginTop: displayBelow ? "auto" : "10px",
+      marginBottom: displayBelow ? "10px" : "auto"
+    };
+    setStylePosition((prev) => {
+      if (JSON.stringify(prev) === JSON.stringify(newPosition)) {
+        return prev;
+      }
+      return newPosition;
+    });
+  }, []);
+  const isWithinPortalReposition = useCallback(() => {
+    return withinPortal ? updatePositionPortal() : updatePosition();
+  }, [withinPortal, updatePosition, updatePositionPortal]);
+  useEffect(() => {
+    isWithinPortalReposition();
+    window.addEventListener("resize", isWithinPortalReposition);
+    window.addEventListener("scroll", isWithinPortalReposition, true);
+    return () => {
+      window.removeEventListener("resize", isWithinPortalReposition);
+      window.removeEventListener("scroll", isWithinPortalReposition, true);
+    };
+  }, [isWithinPortalReposition]);
+  const handlePad = (input, clear = false) => {
+    if (clear) {
+      if (padInput === "0") return;
+      if (padInput.length === 1) {
+        return setPadInput("0");
+      }
+      setPadInput((prev) => prev.substring(0, prev.length - 1));
+      return;
+    }
+    if (input === "." && padInput.includes(".")) return;
+    if (padInput === "0") {
+      if (input === ".") return setPadInput((prev) => (prev + input).toString());
+      return setPadInput(input);
+    }
+    setPadInput((prev) => (prev + input).toString());
+  };
+  useEffect(() => {
+    getValue && getValue(padInput);
+  }, [padInput]);
+  useEffect(() => {
+    setPadInput(value.toString());
+  }, [value]);
+  return /* @__PURE__ */ jsxs(
+    NumpadStyled,
+    {
+      id: "rbro-numpad-wrapper",
+      ...rest,
+      $offset: offset,
+      ref: numpadRef,
+      style: {
+        top: stylePosition.top,
+        left: stylePosition.left,
+        bottom: stylePosition.bottom,
+        right: stylePosition.right,
+        margin: `${stylePosition.marginTop} auto ${stylePosition.marginBottom} auto`,
+        visibility: Object.keys(stylePosition).length === 0 ? "hidden" : "visible",
+        zIndex: "500"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("1"), children: /* @__PURE__ */ jsx("span", { children: "1" }) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("2"), children: /* @__PURE__ */ jsx("span", { children: "2" }) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("3"), children: /* @__PURE__ */ jsx("span", { children: "3" }) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("4"), children: /* @__PURE__ */ jsx("span", { children: "4" }) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("5"), children: /* @__PURE__ */ jsx("span", { children: "5" }) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("6"), children: /* @__PURE__ */ jsx("span", { children: "6" }) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("7"), children: /* @__PURE__ */ jsx("span", { children: "7" }) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("8"), children: /* @__PURE__ */ jsx("span", { children: "8" }) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("9"), children: /* @__PURE__ */ jsx("span", { children: "9" }) }),
+          /* @__PURE__ */ jsx("button", { disabled: !float, onClick: () => float && handlePad("."), children: /* @__PURE__ */ jsx("span", { children: float ? "." : "" }) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("0"), children: /* @__PURE__ */ jsx("span", { children: "0" }) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => handlePad("", true), children: /* @__PURE__ */ jsx(Icon, { icon: "clear-rec", size: 20, color: colors.accent_500 }) })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleFooterButton,
+            label: "OK",
+            variant: "primary",
+            intent: "accent",
+            size: "medium",
+            width: "100%"
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+export { Numpad as default };

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

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

package/build/esm/components/ObjectiveCard/ObjectiveCard.js

@@ -0,0 +1,90 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import styled from 'styled-components';
+import Button from '../Button/Button.js';
+import { colors } from '../../utils';
+
+const _constraint_textFontSize = [14, 16, 18, 20, 24];
+const _constraint_textFontWeight = [200, 300, 400, 500, 700, 800];
+const ObjectiveCardStyled = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  overflow: hidden;
+  width: ${(props) => props.$width && typeof props.$width === "string" && props.$width};
+  border: 1px solid ${colors.gray_150};
+  background-color: ${(props) => props.$disabled && props.$selected ? colors.gray_100 : props.$disabled ? colors.white : props.$selected ? colors.info_100 : colors.white};
+
+  & > img {
+    height: 119px;
+    width: 100%;
+    object-fit: cover;
+    filter: ${(props) => props.$disabled ? "saturate(30%)" : ""};
+    opacity: ${(props) => props.$disabled ? "0.5" : ""};
+  }
+
+  & > div {
+    padding: 12px 16px 16px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    flex-grow: 1;
+
+    & > span {
+      font-size: ${(props) => props.$textFontSize && _constraint_textFontSize.includes(props.$textFontSize) ? props.$textFontSize + "px" : "16px"};
+      font-weight: ${(props) => props.$textFontWeight && _constraint_textFontWeight.includes(props.$textFontWeight) ? props.$textFontWeight : 500};
+      flex-grow: 1;
+      color: ${(props) => props.$disabled ? colors.gray_600 : colors.gray_950};
+    }
+  }
+`;
+const ObjectiveCard = ({
+  text = "Text",
+  img,
+  textFontSize = 16,
+  textFontWeight = 500,
+  selected = false,
+  disabled = false,
+  buttonLabel,
+  width = "auto",
+  buttonOnClick,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    ObjectiveCardStyled,
+    {
+      $text: text,
+      $img: img,
+      $textFontSize: textFontSize,
+      $textFontWeight: textFontWeight,
+      $selected: selected,
+      $disabled: disabled,
+      $width: width,
+      ...rest,
+      children: [
+        img && /* @__PURE__ */ jsx("img", { src: img }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          text && typeof text === "string" && /* @__PURE__ */ jsx("span", { children: text }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled,
+              label: buttonLabel,
+              onClick: buttonOnClick,
+              intent: "info",
+              variant: !disabled ? selected ? "primary" : "secondaryOutlined" : "primary",
+              leftIcon: selected ? "checkmark_ring" : void 0,
+              size: "medium"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+export { ObjectiveCard as default };

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

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

package/build/esm/components/ObjectiveCardSmall/ObjectiveCardSmall.js

@@ -0,0 +1,80 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import styled, { css } from 'styled-components';
+import { colors } from '../../utils';
+
+const _constraint_textFontSize = [14, 16, 18, 20, 24];
+const _constraint_textFontWeight = [200, 300, 400, 500, 700, 800];
+const ObjectiveCardSmallStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid ${colors.gray_150};
+
+  ${(props) => !props.$disabled && css`
+      &:hover {
+        outline-width: 2px;
+        outline-style: solid;
+        outline-color: ${colors.info_800};
+        border-color: transparent;
+      }
+    `}
+
+  width: ${(props) => props.$width && typeof props.$width === "string" ? props.$width : "230px"};
+  background-color: ${(props) => props.$disabled && props.$selected ? colors.gray_100 : props.$disabled ? colors.white : props.$selected ? colors.info_100 : colors.white};
+
+  & > img {
+    height: 80px;
+    width: 100%;
+    object-fit: cover;
+    filter: ${(props) => props.$disabled ? "saturate(30%)" : ""};
+    opacity: ${(props) => props.$disabled ? "0.5" : ""};
+  }
+
+  & > div {
+    padding: 12px 16px 12px 16px;
+    flex-grow: 1;
+
+    & > span {
+      font-size: ${(props) => props.$textFontSize && _constraint_textFontSize.includes(props.$textFontSize) ? props.$textFontSize + "px" : "14px"};
+      font-weight: ${(props) => props.$textFontWeight && _constraint_textFontWeight.includes(props.$textFontWeight) ? props.$textFontWeight : 500};
+      line-height: 120%;
+      flex-grow: 1;
+      color: ${(props) => props.$disabled ? colors.gray_600 : props.$selected ? colors.gray_950 : colors.info_800};
+    }
+  }
+`;
+const ObjectiveCardSmall = ({
+  text = "Text",
+  img,
+  textFontSize = 14,
+  textFontWeight = 500,
+  width = "100%",
+  selected = false,
+  disabled = false,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    ObjectiveCardSmallStyled,
+    {
+      $text: text,
+      $textFontSize: textFontSize,
+      $textFontWeight: textFontWeight,
+      $width: width,
+      $selected: selected,
+      $disabled: disabled,
+      ...rest,
+      children: [
+        img && /* @__PURE__ */ jsx("img", { src: img }),
+        /* @__PURE__ */ jsx("div", { children: text && typeof text === "string" && /* @__PURE__ */ jsx("span", { children: text }) })
+      ]
+    }
+  );
+};
+
+export { ObjectiveCardSmall as default };

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

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