@fctc/sme-widget-ui 1.7.5 → 1.7.7

package/dist/index.mjs

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment32 = REACT_FRAGMENT_TYPE;
+        var Fragment33 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment32;
+        exports.Fragment = Fragment33;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal2;
@@ -7725,16 +7725,6 @@ var COLORS = [
   }
 ];
 var DOTS = "...";
-var typeStyles = {
-  primary: "bg-blue-500 text-white",
-  secondary: "bg-lime-600 text-white",
-  danger: "bg-[rgba(237,28,36,0.1)]  text-[#F5222D]",
-  info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
-  success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
-  warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
-  default: "bg-[#dee2e6]",
-  light: "bg-white text-gray-800 shadow-md"
-};
 var SearchType = {
   FILTER: "filter_by",
   SEARCH: "search_by",
@@ -18380,6 +18370,58 @@ var BinaryField = (props) => {
 
 // src/widgets/basic/button-badge-field/button-badge.tsx
 import { jsx as jsx71 } from "react/jsx-runtime";
+var typeStyles = {
+  primary: {
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    border: "1px solid #fff"
+  },
+  secondary: {
+    backgroundColor: "#EBF1FF",
+    color: "#2597D0",
+    border: "1px solid #35ADE9"
+  },
+  danger: {
+    backgroundColor: "#FFEBEC",
+    color: "#E93544",
+    border: "1px solid #FB2B3D"
+  },
+  info: {
+    backgroundColor: "rgba(5,152,237,0.12)",
+    color: "rgb(5,152,237)",
+    border: "1px solid rgb(5,152,237)"
+  },
+  success: {
+    backgroundColor: "#E0FAEB",
+    color: "#12AF53",
+    border: "1px solid #1FC163"
+  },
+  warning: {
+    backgroundColor: "#FFFAEB",
+    color: "#E6A819)",
+    border: "1px solid #F6B51E"
+  },
+  default: {
+    backgroundColor: "#dee2e6",
+    color: "#000",
+    border: "1px solid #000"
+  },
+  light: {
+    backgroundColor: "#fff",
+    color: "#1f2937",
+    border: "1px solid #1f2937"
+  }
+};
+var baseStyle = {
+  borderRadius: "4px",
+  fontSize: "12px",
+  padding: "4px 8px",
+  width: "fit-content",
+  textAlign: "center",
+  fontWeight: 500,
+  cursor: "pointer",
+  transition: "all 0.3s ease-in-out"
+};
 var ButtonBadgeField = (props) => {
   const { defaultValue, selection, value, formValues, domainHelper } = props;
   const decorationSuccess = props["decoration-success"] && domainHelper.checkDomain(formValues, props["decoration-success"]);
@@ -18387,31 +18429,21 @@ var ButtonBadgeField = (props) => {
   const decorationDanger = props["decoration-danger"] && domainHelper.checkDomain(formValues, props["decoration-danger"]);
   const decorationWarning = props["decoration-warning"] && domainHelper.checkDomain(formValues, props["decoration-warning"]);
   const getType = () => {
-    if (decorationInfo) {
-      return typeStyles["info"];
-    }
-    if (decorationSuccess) {
-      return typeStyles["success"];
-    }
-    if (decorationDanger) {
-      return typeStyles["danger"];
-    }
-    if (decorationWarning) {
-      return typeStyles["warning"];
-    }
+    if (decorationInfo) return typeStyles["info"];
+    if (decorationSuccess) return typeStyles["success"];
+    if (decorationDanger) return typeStyles["danger"];
+    if (decorationWarning) return typeStyles["warning"];
     return typeStyles["default"];
   };
-  const baseStyle = "rounded-full text-xs px-[0.82rem] w-fit py-1 text-center font-medium cursor-pointer transition duration-300 ease-in-out transform";
-  const buttonClass = `${baseStyle} ${getType()}`;
   const getLabel = (value2) => {
     if (!value2) return "";
-    const item = selection?.find((item2) => {
-      return Array.isArray(item2) && item2[0] === value2;
-    });
+    const item = selection?.find(
+      (item2) => Array.isArray(item2) && item2[0] === value2
+    );
     return item ? item[1] : "";
   };
   const label = getLabel(defaultValue ?? value);
-  return label ? /* @__PURE__ */ jsx71("div", { className: buttonClass, children: i18n_default.t(label) }) : null;
+  return label ? /* @__PURE__ */ jsx71("div", { style: { ...baseStyle, ...getType() }, children: i18n_default.t(label) }) : null;
 };
 
 // src/widgets/basic/button-field/button.tsx
@@ -35151,86 +35183,140 @@ var StatusbarDurationField = (props) => {
 
 // src/widgets/basic/status-bar-field/option/option.tsx
 import { useMemo as useMemo11 } from "react";
-import { jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo11(() => selection, [selection]);
+  const indexInProgress = memoizedStatusOptions?.findIndex(
+    (option) => option?.[0] === defaultValue
+  );
   return /* @__PURE__ */ jsx107(
     "div",
     {
       style: {
         display: "flex",
         alignItems: "center",
-        flexWrap: "wrap",
-        overflow: "hidden"
+        flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        const value = option?.[0] === defaultValue;
-        return /* @__PURE__ */ jsxs73(
-          "label",
-          {
-            style: {
-              position: "relative",
-              flexShrink: 0,
-              cursor: "default",
-              height: "36px",
-              display: "flex",
-              alignItems: "center",
-              paddingLeft: "32px",
-              // pl-8
-              paddingRight: "20px",
-              // pr-[20px]
-              fontWeight: 600,
-              // font-semibold
-              fontSize: "14px",
-              background: value ? "var(--color-primary)" : "#FAFAFA",
-              color: value ? "#fff" : "#121212",
-              borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              // rounded-l-xl
-              borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
-              // rounded-r-xl
-              borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
-            },
-            children: [
-              /* @__PURE__ */ jsx107(
-                "input",
-                {
-                  type: "radio",
-                  checked: value,
-                  style: { display: "none" },
-                  disabled: true
-                }
-              ),
-              option[1],
-              !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "50%",
-                    transform: "translateY(-50%) rotate(45deg)",
-                    zIndex: 2,
-                    width: "26px",
-                    height: "26px",
-                    right: "-13px",
-                    background: value ? "var(--color-primary)" : "#FAFAFA",
-                    border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
-                    borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
-                    borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
+        return /* @__PURE__ */ jsxs73(Fragment32, { children: [
+          /* @__PURE__ */ jsxs73(
+            "div",
+            {
+              style: {
+                position: "relative",
+                flexShrink: 0,
+                cursor: "default",
+                padding: "4px",
+                display: "flex",
+                alignItems: "center",
+                fontWeight: 600,
+                fontSize: "12px",
+                background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
+                color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
+                borderRadius: "16px",
+                boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
+              },
+              children: [
+                /* @__PURE__ */ jsx107(
+                  "span",
+                  {
+                    style: {
+                      backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
+                      width: 20,
+                      height: 20,
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      borderRadius: "100%"
+                    },
+                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ jsx107(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ jsx107(ICCircle, {}) : /* @__PURE__ */ jsx107(ICMinus, {})
                   }
-                }
-              )
-            ]
-          },
-          option?.[0]
-        );
+                ),
+                /* @__PURE__ */ jsx107(
+                  "span",
+                  {
+                    style: {
+                      padding: "0 6px"
+                    },
+                    children: option[1]
+                  }
+                )
+              ]
+            },
+            option?.[0]
+          ),
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx107(
+            "div",
+            {
+              style: {
+                height: "3px",
+                width: "6px",
+                backgroundColor: "#F3F3F3"
+              }
+            }
+          )
+        ] });
       })
     }
   );
 };
+var ICMinus = () => {
+  return /* @__PURE__ */ jsx107(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx107(
+        "path",
+        {
+          d: "M4 8H12",
+          stroke: "#C3C3C3",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+};
+var ICCircle = () => {
+  return /* @__PURE__ */ jsx107(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      children: /* @__PURE__ */ jsx107("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
+    }
+  );
+};
+var ICCheck = () => {
+  return /* @__PURE__ */ jsx107(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx107(
+        "path",
+        {
+          d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
+          fill: "white",
+          stroke: "white",
+          "stroke-width": "0.25"
+        }
+      )
+    }
+  );
+};
 
 // src/widgets/basic/date-option-field/date-option.tsx
 import { jsx as jsx108, jsxs as jsxs74 } from "react/jsx-runtime";
@@ -35390,7 +35476,6 @@ export {
   loginSchema,
   parseFormattedNumber,
   range,
-  typeStyles,
   useClickOutside,
   useFileInfo,
   useFormatDate,

package/dist/utils.d.mts

@@ -21,20 +21,10 @@ declare const COLORS: {
     id: number;
 }[];
 declare const DOTS = "...";
-declare const typeStyles: {
-    primary: string;
-    secondary: string;
-    danger: string;
-    info: string;
-    success: string;
-    warning: string;
-    default: string;
-    light: string;
-};
 declare const SearchType: {
     FILTER: string;
     SEARCH: string;
     GROUP: string;
 };
 
-export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, typeStyles, useFormatDate, validateAndParseDate, validateInput };
+export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, useFormatDate, validateAndParseDate, validateInput };

package/dist/utils.d.ts

@@ -21,20 +21,10 @@ declare const COLORS: {
     id: number;
 }[];
 declare const DOTS = "...";
-declare const typeStyles: {
-    primary: string;
-    secondary: string;
-    danger: string;
-    info: string;
-    success: string;
-    warning: string;
-    default: string;
-    light: string;
-};
 declare const SearchType: {
     FILTER: string;
     SEARCH: string;
     GROUP: string;
 };
 
-export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, typeStyles, useFormatDate, validateAndParseDate, validateInput };
+export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, useFormatDate, validateAndParseDate, validateInput };

package/dist/utils.js

@@ -4071,7 +4071,6 @@ __export(utils_exports, {
   isObjectEmpty: () => isObjectEmpty,
   parseFormattedNumber: () => parseFormattedNumber,
   range: () => range,
-  typeStyles: () => typeStyles,
   useFormatDate: () => useFormatDate,
   validateAndParseDate: () => validateAndParseDate,
   validateInput: () => validateInput
@@ -4838,16 +4837,6 @@ var COLORS = [
   }
 ];
 var DOTS = "...";
-var typeStyles = {
-  primary: "bg-blue-500 text-white",
-  secondary: "bg-lime-600 text-white",
-  danger: "bg-[rgba(237,28,36,0.1)]  text-[#F5222D]",
-  info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
-  success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
-  warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
-  default: "bg-[#dee2e6]",
-  light: "bg-white text-gray-800 shadow-md"
-};
 var SearchType = {
   FILTER: "filter_by",
   SEARCH: "search_by",
@@ -4869,7 +4858,6 @@ var SearchType = {
   isObjectEmpty,
   parseFormattedNumber,
   range,
-  typeStyles,
   useFormatDate,
   validateAndParseDate,
   validateInput

package/dist/utils.mjs

@@ -4814,16 +4814,6 @@ var COLORS = [
   }
 ];
 var DOTS = "...";
-var typeStyles = {
-  primary: "bg-blue-500 text-white",
-  secondary: "bg-lime-600 text-white",
-  danger: "bg-[rgba(237,28,36,0.1)]  text-[#F5222D]",
-  info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
-  success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
-  warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
-  default: "bg-[#dee2e6]",
-  light: "bg-white text-gray-800 shadow-md"
-};
 var SearchType = {
   FILTER: "filter_by",
   SEARCH: "search_by",
@@ -4844,7 +4834,6 @@ export {
   isObjectEmpty,
   parseFormattedNumber,
   range,
-  typeStyles,
   useFormatDate,
   validateAndParseDate,
   validateInput