master-components-react-ts 2.1.2 → 2.1.3

package/dist/components/FormInput/FormInput.js

@@ -0,0 +1,151 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./FormInput.module.scss.js";
+import { useRef, useState, useEffect } from "react";
+import { IconSearch } from "../../assets/Icons/IconSearch.js";
+import { IconCloseCircle } from "../../assets/Icons/IconCloseCircle.js";
+const FormInput = ({
+  label,
+  placeholder,
+  helperText,
+  required = false,
+  disabled = false,
+  readOnly = false,
+  withFocus = true,
+  withActive = true,
+  searchComponent = false,
+  size = "md",
+  toggleFocus = false,
+  rightSlot,
+  leftSlot,
+  helperSlot,
+  type = "text",
+  value,
+  maxLength,
+  forDropdown = false,
+  customFocus = null,
+  focus = false,
+  inputState = { error: false, success: false, loading: false },
+  inputSlot,
+  onChange,
+  onFocus,
+  onBlur,
+  onEnter,
+  onFocusChange,
+  formInputWrapperStyle,
+  inputWrapperStyle,
+  formInputStyle,
+  helperTextStyle,
+  labelStyle,
+  inputSlotStyle
+}) => {
+  const InputRef = useRef(null);
+  const [SearchValue, setSearchValue] = useState(value ?? "");
+  const [Focused, setFocused] = useState(false);
+  const [Active, setActive] = useState(false);
+  const Change = (event) => {
+    if (searchComponent) {
+      setSearchValue(event.target.value);
+    }
+    onChange?.(event.target.value);
+  };
+  const Focus = () => {
+    onFocus?.();
+    if (forDropdown) return;
+    setFocused(true);
+  };
+  const Blur = () => {
+    if (!toggleFocus) {
+      setFocused(false);
+    } else {
+      setFocused(customFocus ?? false);
+    }
+    onBlur?.();
+  };
+  const handleKeyDown = (event) => {
+    const input = event.currentTarget.value;
+    const isFirstCharacter = input.length === 0;
+    if (type === "number") {
+      if (event.keyCode === 69 || !isFirstCharacter && (event.keyCode === 187 || event.keyCode === 107 || event.keyCode === 189 || event.keyCode === 109)) {
+        event.preventDefault();
+      }
+    }
+    if (event.key === "Enter" && input && input.length > 0) {
+      onEnter?.();
+    }
+  };
+  const getSlot = (slot) => {
+    return slot;
+  };
+  const HandleSearch = () => {
+    if (!searchComponent) return;
+    setSearchValue("");
+    onChange?.("");
+  };
+  useEffect(() => {
+    onFocusChange?.(Focused);
+  }, [Focused]);
+  useEffect(() => {
+    if (customFocus !== void 0 && customFocus !== null) {
+      setFocused(customFocus);
+    }
+  }, [customFocus]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.inputWrapper} ${disabled ? style.disabled : ""} ${style[size]}`, style: inputWrapperStyle ?? {}, children: [
+    label && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.formInputLabelWrapper, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { style: labelStyle ?? {}, className: style.formInputLabel, children: [
+        label,
+        " ",
+        typeof label === "string" && required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: style.formInputRequired, children: "*" })
+      ] }),
+      helperSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputHelperSlot, children: getSlot(helperSlot) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: `${style.formInputWrapper} ${inputState.error ? style.errorState : ""} ${withFocus && Focused ? !inputState.error ? style.focused : style.errorFocused : ""} ${withActive && Active ? !inputState.error ? style.active : style.errorActive : ""} ${inputState.error ? style.error : ""} ${inputState.success ? style.success : ""}`,
+        style: formInputWrapperStyle ?? {},
+        onClick: () => toggleFocus && setFocused((state) => !state),
+        children: [
+          leftSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, children: getSlot(leftSlot) }),
+          searchComponent && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, children: getSlot(/* @__PURE__ */ jsxRuntimeExports.jsx(IconSearch, {})) }),
+          inputSlot ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, style: inputSlotStyle ?? {}, children: getSlot(inputSlot) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              className: style.formInput,
+              ref: InputRef,
+              style: formInputStyle ?? {},
+              type: type ?? "text",
+              value: searchComponent ? SearchValue : value,
+              onChange: (event) => Change(event),
+              onMouseDown: () => !forDropdown && setActive(true),
+              onMouseUp: () => !forDropdown && setActive(false),
+              onMouseLeave: () => !forDropdown && setActive(false),
+              onFocus: Focus,
+              onBlur: Blur,
+              disabled,
+              required,
+              onKeyDown: handleKeyDown,
+              readOnly,
+              spellCheck: false,
+              placeholder: placeholder ?? "",
+              autoComplete: "off",
+              maxLength
+            }
+          ),
+          rightSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: getSlot(rightSlot) }),
+          searchComponent && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: HandleSearch, style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: SearchValue?.length > 0 ? getSlot(/* @__PURE__ */ jsxRuntimeExports.jsx(IconCloseCircle, {})) : null }) })
+        ]
+      }
+    ),
+    helperText && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        style: helperTextStyle ?? {},
+        className: `${style.formInputHelperText} ${inputState.error ? style.errorHelperText : inputState.success ? style.successHelperText : ""}`,
+        children: helperText
+      }
+    )
+  ] });
+};
+export {
+  FormInput as default
+};

package/dist/components/FormInput/FormInput.module.scss.js

@@ -0,0 +1,62 @@
+const inputWrapper = "FormInput-module__inputWrapper";
+const sm = "FormInput-module__sm";
+const formInputWrapper = "FormInput-module__formInputWrapper";
+const md = "FormInput-module__md";
+const disabled = "FormInput-module__disabled";
+const formInputLabel = "FormInput-module__formInputLabel";
+const formInput = "FormInput-module__formInput";
+const formInputHelperText = "FormInput-module__formInputHelperText";
+const formInputLabelWrapper = "FormInput-module__formInputLabelWrapper";
+const formInputRequired = "FormInput-module__formInputRequired";
+const formInputHelperSlot = "FormInput-module__formInputHelperSlot";
+const errorState = "FormInput-module__errorState";
+const focused = "FormInput-module__focused";
+const active = "FormInput-module__active";
+const errorFocused = "FormInput-module__errorFocused";
+const errorActive = "FormInput-module__errorActive";
+const formInputSlot = "FormInput-module__formInputSlot";
+const errorHelperText = "FormInput-module__errorHelperText";
+const successHelperText = "FormInput-module__successHelperText";
+const style = {
+  inputWrapper,
+  sm,
+  formInputWrapper,
+  md,
+  disabled,
+  formInputLabel,
+  formInput,
+  formInputHelperText,
+  formInputLabelWrapper,
+  formInputRequired,
+  formInputHelperSlot,
+  errorState,
+  focused,
+  active,
+  errorFocused,
+  errorActive,
+  formInputSlot,
+  errorHelperText,
+  successHelperText
+};
+export {
+  active,
+  style as default,
+  disabled,
+  errorActive,
+  errorFocused,
+  errorHelperText,
+  errorState,
+  focused,
+  formInput,
+  formInputHelperSlot,
+  formInputHelperText,
+  formInputLabel,
+  formInputLabelWrapper,
+  formInputRequired,
+  formInputSlot,
+  formInputWrapper,
+  inputWrapper,
+  md,
+  sm,
+  successHelperText
+};

package/dist/components/InlineLoading/InlineLoading.js

@@ -0,0 +1,24 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./InlineLoading.module.scss.js";
+import { IconErrorDash } from "../../assets/Icons/IconErrorDash.js";
+import { IconLoading } from "../../assets/Icons/IconLoading.js";
+import { IconSuccess } from "../../assets/Icons/IconSuccess.js";
+const InlineLoading = ({ loading, success, error, msg }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.inlineLoadingWrapper}`, children: [
+    loading?.state && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.loading, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(IconLoading, { color1: loading?.color1 ?? "#BCC1C2", color2: loading?.color2, size: loading?.size }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
+    ] }),
+    !loading?.state && success?.state && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(IconSuccess, { size: success?.size, color: success?.color }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
+    ] }),
+    !loading?.state && error?.state && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(IconErrorDash, { size: error?.size, color: error?.color }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
+    ] })
+  ] });
+};
+export {
+  InlineLoading as default
+};

package/dist/components/InlineLoading/InlineLoading.module.scss.js

@@ -0,0 +1,11 @@
+const inlineLoadingWrapper = "InlineLoading-module__inlineLoadingWrapper";
+const loading = "InlineLoading-module__loading";
+const style = {
+  inlineLoadingWrapper,
+  loading
+};
+export {
+  style as default,
+  inlineLoadingWrapper,
+  loading
+};

package/dist/components/MainButton/MainButton.js

@@ -0,0 +1,72 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./MainButton.module.scss.js";
+import { useState, useRef, useEffect } from "react";
+import IconCircularLoading from "../../assets/Icons/IconCircularLoading.js";
+const MainButton = ({
+  label,
+  size = "md",
+  leftSlot,
+  rightSlot,
+  buttonSlot,
+  type = "button",
+  colorType = "neutral",
+  buttonType = "primary",
+  withFocus = false,
+  customFocus,
+  disabled,
+  loading = false,
+  spaceBetween = false,
+  buttonStyle,
+  mainButtonContentStyle,
+  mainButtonLabelStyle,
+  leftSlotStyle,
+  rightSlotStyle,
+  onClick
+}) => {
+  const [Focused, setFocused] = useState(customFocus || false);
+  const ButtonRef = useRef(null);
+  const Click = (e) => {
+    if (disabled || loading) return;
+    if (withFocus) {
+      setFocused((state) => !state);
+    }
+    onClick?.(e);
+  };
+  const getLoadingColor = () => {
+    let color = "#ffffff";
+    if (colorType === "neutral" && buttonType !== "primary") color = "#0058FF";
+    if (colorType === "positive" && buttonType !== "primary") color = "#328707";
+    if (colorType === "negative" && buttonType !== "primary") color = "#E3292F";
+    return color;
+  };
+  useEffect(() => {
+    const ClickHandler = (event) => {
+      if (!ButtonRef.current || disabled) return;
+      if (event.composedPath().includes(ButtonRef.current)) return;
+      setFocused(false);
+    };
+    document.addEventListener("click", ClickHandler);
+    return () => {
+      document.removeEventListener("click", ClickHandler);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      ref: ButtonRef,
+      style: buttonStyle,
+      type,
+      disabled,
+      className: `${style.mainButton} ${style[size]} ${loading ? style.loading : ""} ${Focused ? style.focused : ""} ${style[buttonType]} ${style[colorType]} ${disabled ? style.disabled : ""}`,
+      onClick: Click,
+      children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconCircularLoading, { size: 20, stroke: getLoadingColor() }) : buttonSlot || /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.mainButtonContent, style: { ...mainButtonContentStyle, justifyContent: spaceBetween ? "space-between" : "center" }, children: [
+        leftSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.leftSlot, style: leftSlotStyle, children: leftSlot }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.mainButtonLabel, style: mainButtonLabelStyle, children: label }),
+        rightSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.rightSlot, style: rightSlotStyle, children: rightSlot })
+      ] })
+    }
+  );
+};
+export {
+  MainButton as default
+};

package/dist/components/MainButton/MainButton.module.scss.js

@@ -0,0 +1,56 @@
+const mainButton = "MainButton-module__mainButton";
+const sm = "MainButton-module__sm";
+const md = "MainButton-module__md";
+const lg = "MainButton-module__lg";
+const mainButtonContent = "MainButton-module__mainButtonContent";
+const mainButtonLabel = "MainButton-module__mainButtonLabel";
+const primary = "MainButton-module__primary";
+const neutral = "MainButton-module__neutral";
+const loading = "MainButton-module__loading";
+const disabled = "MainButton-module__disabled";
+const focused = "MainButton-module__focused";
+const positive = "MainButton-module__positive";
+const negative = "MainButton-module__negative";
+const secondary = "MainButton-module__secondary";
+const tertiary = "MainButton-module__tertiary";
+const tertiaryV2 = "MainButton-module__tertiaryV2";
+const tertiaryV3 = "MainButton-module__tertiaryV3";
+const style = {
+  mainButton,
+  sm,
+  md,
+  lg,
+  mainButtonContent,
+  mainButtonLabel,
+  primary,
+  neutral,
+  loading,
+  disabled,
+  focused,
+  positive,
+  negative,
+  secondary,
+  tertiary,
+  tertiaryV2,
+  tertiaryV3
+};
+export {
+  style as default,
+  disabled,
+  focused,
+  lg,
+  loading,
+  mainButton,
+  mainButtonContent,
+  mainButtonLabel,
+  md,
+  negative,
+  neutral,
+  positive,
+  primary,
+  secondary,
+  sm,
+  tertiary,
+  tertiaryV2,
+  tertiaryV3
+};

package/dist/components/NotificationToast/NotificationContext.js

@@ -0,0 +1,57 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { createContext, useState, useCallback } from "react";
+import NotificationToast from "./NotificationToast.js";
+import style from "./NotificationToast.module.scss.js";
+const ToastContext = createContext(null);
+let idCounter = 0;
+const ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+  const showToast = (props) => {
+    setToasts((prev) => {
+      const max = props.max ?? Infinity;
+      if (prev.length >= max) return prev;
+      const id = idCounter++;
+      setTimeout(() => {
+        setToasts((prev2) => prev2.filter((t) => t.id !== id));
+      }, props.timeout || 4e3);
+      return [...prev, { id, props }];
+    });
+  };
+  const getPosition = useCallback(() => {
+    if (toasts.length > 0) {
+      switch (toasts[0]?.props?.position) {
+        case "top-left":
+          return { top: "20px", left: "20px" };
+        case "top-right":
+          return { top: "20px", right: "20px" };
+        case "bottom-left":
+          return { bottom: "20px", left: "20px" };
+        case "bottom-right":
+          return { bottom: "20px", right: "20px" };
+        case "top-center":
+          return { top: "20px", left: "50%", transform: "translateX(-50%)" };
+        case "bottom-center":
+          return { bottom: "20px", left: "50%", transform: "translateX(-50%)" };
+        default:
+          return {};
+      }
+    }
+  }, [toasts.length]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ToastContext.Provider, { value: { showToast }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.toastContainer, style: getPosition(), children: toasts.map(({ id, props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      NotificationToast,
+      {
+        ...props,
+        onClose: () => {
+          setToasts((prev) => prev.filter((t) => t.id !== id));
+        }
+      },
+      id
+    )) })
+  ] });
+};
+export {
+  ToastContext,
+  ToastProvider as default
+};

package/dist/components/NotificationToast/NotificationToast.js

@@ -0,0 +1,66 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { IconCloseBlack } from "../../assets/Icons/IconClose.js";
+import style from "./NotificationToast.module.scss.js";
+import { useState, useEffect } from "react";
+import { IconExclamation } from "../../assets/Icons/IconExclamation.js";
+import { IconCheck } from "../../assets/Icons/IconCheck.js";
+const NotificationToast = ({
+  title,
+  colorType = "neutral",
+  filled = false,
+  withClose = false,
+  withUndo = false,
+  withInfoIcon = true,
+  description,
+  customAction,
+  timeout = 4e3,
+  children,
+  onUndo,
+  onClose
+}) => {
+  const [animationClass, setAnimationClass] = useState("fadeIn");
+  useEffect(() => {
+    const duration = timeout;
+    const fadeDuration = 300;
+    const hideTimeout = setTimeout(() => {
+      setAnimationClass("fadeOut");
+      setTimeout(() => {
+        onClose?.();
+      }, fadeDuration);
+    }, duration);
+    return () => {
+      clearTimeout(hideTimeout);
+    };
+  }, [onClose]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: `${style.notificationToast} ${style[colorType]} ${filled ? style.filled : ""} ${style[animationClass]}`,
+      style: description ? { padding: "12px" } : {},
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContent, style: description ? { alignItems: "flex-start" } : {}, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContentLeft, style: description ? { alignItems: "flex-start" } : {}, children: [
+          withInfoIcon && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.notificationToastContentInfoIcon, children: colorType === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconCheck, { color: filled ? "#328707" : "#fff" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconExclamation, { color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : "#0058FF" : "#fff" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContentLeftText, children: [
+            title && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.notificationToastContentLeftTextTitle, children: title }),
+            description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.notificationToastContentLeftTextDescription, children: description }),
+            children && children
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.notificationToastContentDescription }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContentRight, children: [
+          customAction && customAction,
+          !description && withUndo && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.notificationToastContentRightUndoText, onClick: () => onUndo?.(), children: "Undo" }),
+          withClose && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.notificationToastContentRightClose, style: description || !withUndo ? { border: "none" } : {}, onClick: () => onClose?.(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            IconCloseBlack,
+            {
+              color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : colorType === "info" ? "#0058FF" : "#328707" : "#fff"
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  NotificationToast as default
+};

package/dist/components/NotificationToast/NotificationToast.module.scss.js

@@ -0,0 +1,59 @@
+const toastContainer = "NotificationToast-module__toastContainer";
+const notificationToast = "NotificationToast-module__notificationToast";
+const fadeIn = "NotificationToast-module__fadeIn";
+const fadeOut = "NotificationToast-module__fadeOut";
+const neutral = "NotificationToast-module__neutral";
+const filled = "NotificationToast-module__filled";
+const notificationToastContentLeftTextTitle = "NotificationToast-module__notificationToastContentLeftTextTitle";
+const notificationToastContentRightUndoText = "NotificationToast-module__notificationToastContentRightUndoText";
+const notificationToastContentLeftTextDescription = "NotificationToast-module__notificationToastContentLeftTextDescription";
+const info = "NotificationToast-module__info";
+const error = "NotificationToast-module__error";
+const success = "NotificationToast-module__success";
+const notificationToastContent = "NotificationToast-module__notificationToastContent";
+const notificationToastContentLeft = "NotificationToast-module__notificationToastContentLeft";
+const notificationToastContentInfoIcon = "NotificationToast-module__notificationToastContentInfoIcon";
+const notificationToastContentLeftText = "NotificationToast-module__notificationToastContentLeftText";
+const notificationToastContentRight = "NotificationToast-module__notificationToastContentRight";
+const notificationToastContentRightClose = "NotificationToast-module__notificationToastContentRightClose";
+const style = {
+  toastContainer,
+  notificationToast,
+  fadeIn,
+  fadeOut,
+  neutral,
+  filled,
+  notificationToastContentLeftTextTitle,
+  notificationToastContentRightUndoText,
+  notificationToastContentLeftTextDescription,
+  info,
+  error,
+  success,
+  notificationToastContent,
+  notificationToastContentLeft,
+  notificationToastContentInfoIcon,
+  notificationToastContentLeftText,
+  notificationToastContentRight,
+  notificationToastContentRightClose
+};
+export {
+  style as default,
+  error,
+  fadeIn,
+  fadeOut,
+  filled,
+  info,
+  neutral,
+  notificationToast,
+  notificationToastContent,
+  notificationToastContentInfoIcon,
+  notificationToastContentLeft,
+  notificationToastContentLeftText,
+  notificationToastContentLeftTextDescription,
+  notificationToastContentLeftTextTitle,
+  notificationToastContentRight,
+  notificationToastContentRightClose,
+  notificationToastContentRightUndoText,
+  success,
+  toastContainer
+};

package/dist/components/NotificationToast/createNotificationToast.js

@@ -0,0 +1,10 @@
+import { ToastContext } from "./NotificationContext.js";
+import { useContext } from "react";
+const createNotificationToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error("createNotificationToast must be used within ToastProvider");
+  return context.showToast;
+};
+export {
+  createNotificationToast as default
+};