master-components-react-ts 2.1.7 → 2.1.8

package/dist/components/FormInput/FormInput.js

@@ -1,151 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-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__ */ jsxs("div", { className: `${style.inputWrapper} ${disabled ? style.disabled : ""} ${style[size]}`, style: inputWrapperStyle ?? {}, children: [
-    label && /* @__PURE__ */ jsxs("div", { className: style.formInputLabelWrapper, children: [
-      /* @__PURE__ */ jsxs("label", { style: labelStyle ?? {}, className: style.formInputLabel, children: [
-        label,
-        " ",
-        typeof label === "string" && required && /* @__PURE__ */ jsx("span", { className: style.formInputRequired, children: "*" })
-      ] }),
-      helperSlot && /* @__PURE__ */ jsx("div", { className: style.formInputHelperSlot, children: getSlot(helperSlot) })
-    ] }),
-    /* @__PURE__ */ 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__ */ jsx("div", { className: style.formInputSlot, children: getSlot(leftSlot) }),
-          searchComponent && /* @__PURE__ */ jsx("div", { className: style.formInputSlot, children: getSlot(/* @__PURE__ */ jsx(IconSearch, {})) }),
-          inputSlot ? /* @__PURE__ */ jsx("div", { className: style.formInputSlot, style: inputSlotStyle ?? {}, children: getSlot(inputSlot) }) : /* @__PURE__ */ 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__ */ jsx("div", { style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: getSlot(rightSlot) }),
-          searchComponent && /* @__PURE__ */ jsx("div", { className: style.formInputSlot, children: /* @__PURE__ */ jsx("div", { onClick: HandleSearch, style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: SearchValue?.length > 0 ? getSlot(/* @__PURE__ */ jsx(IconCloseCircle, {})) : null }) })
-        ]
-      }
-    ),
-    helperText && /* @__PURE__ */ 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

@@ -1,62 +0,0 @@
-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

@@ -1,24 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-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__ */ jsxs("div", { className: `${style.inlineLoadingWrapper}`, children: [
-    loading?.state && /* @__PURE__ */ jsxs("div", { className: style.loading, children: [
-      /* @__PURE__ */ jsx(IconLoading, { color1: loading?.color1 ?? "#BCC1C2", color2: loading?.color2, size: loading?.size }),
-      /* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
-    ] }),
-    !loading?.state && success?.state && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(IconSuccess, { size: success?.size, color: success?.color }),
-      /* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
-    ] }),
-    !loading?.state && error?.state && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(IconErrorDash, { size: error?.size, color: error?.color }),
-      /* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
-    ] })
-  ] });
-};
-export {
-  InlineLoading as default
-};

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

@@ -1,11 +0,0 @@
-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

@@ -1,72 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ 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__ */ jsx(IconCircularLoading, { size: 20, stroke: getLoadingColor() }) : buttonSlot || /* @__PURE__ */ jsxs("div", { className: style.mainButtonContent, style: { ...mainButtonContentStyle, justifyContent: spaceBetween ? "space-between" : "center" }, children: [
-        leftSlot && /* @__PURE__ */ jsx("div", { className: style.leftSlot, style: leftSlotStyle, children: leftSlot }),
-        /* @__PURE__ */ jsx("p", { className: style.mainButtonLabel, style: mainButtonLabelStyle, children: label }),
-        rightSlot && /* @__PURE__ */ jsx("div", { className: style.rightSlot, style: rightSlotStyle, children: rightSlot })
-      ] })
-    }
-  );
-};
-export {
-  MainButton as default
-};

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

@@ -1,56 +0,0 @@
-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

@@ -1,57 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-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__ */ jsxs(ToastContext.Provider, { value: { showToast }, children: [
-    children,
-    /* @__PURE__ */ jsx("div", { className: style.toastContainer, style: getPosition(), children: toasts.map(({ id, props }) => /* @__PURE__ */ jsx(
-      NotificationToast,
-      {
-        ...props,
-        onClose: () => {
-          setToasts((prev) => prev.filter((t) => t.id !== id));
-        }
-      },
-      id
-    )) })
-  ] });
-};
-export {
-  ToastContext,
-  ToastProvider as default
-};

package/dist/components/NotificationToast/NotificationToast.js

@@ -1,66 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsx(
-    "div",
-    {
-      className: `${style.notificationToast} ${style[colorType]} ${filled ? style.filled : ""} ${style[animationClass]}`,
-      style: description ? { padding: "12px" } : {},
-      children: /* @__PURE__ */ jsxs("div", { className: style.notificationToastContent, style: description ? { alignItems: "flex-start" } : {}, children: [
-        /* @__PURE__ */ jsxs("div", { className: style.notificationToastContentLeft, style: description ? { alignItems: "flex-start" } : {}, children: [
-          withInfoIcon && /* @__PURE__ */ jsx("div", { className: style.notificationToastContentInfoIcon, children: colorType === "success" ? /* @__PURE__ */ jsx(IconCheck, { color: filled ? "#328707" : "#fff" }) : /* @__PURE__ */ jsx(IconExclamation, { color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : "#0058FF" : "#fff" }) }),
-          /* @__PURE__ */ jsxs("div", { className: style.notificationToastContentLeftText, children: [
-            title && /* @__PURE__ */ jsx("p", { className: style.notificationToastContentLeftTextTitle, children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: style.notificationToastContentLeftTextDescription, children: description }),
-            children && children
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: style.notificationToastContentDescription }),
-        /* @__PURE__ */ jsxs("div", { className: style.notificationToastContentRight, children: [
-          customAction && customAction,
-          !description && withUndo && /* @__PURE__ */ jsx("p", { className: style.notificationToastContentRightUndoText, onClick: () => onUndo?.(), children: "Undo" }),
-          withClose && /* @__PURE__ */ jsx("div", { className: style.notificationToastContentRightClose, style: description || !withUndo ? { border: "none" } : {}, onClick: () => onClose?.(), children: /* @__PURE__ */ 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

@@ -1,59 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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
-};