@apexcura/ui-components 0.0.14-Beta195 → 0.0.14-Beta197

package/dist/index.css

@@ -341,9 +341,6 @@ video {
 .m-\[10px\] {
   margin: 10px;
 }
-.mr-3 {
-  margin-right: 0.75rem;
-}
 .flex {
   display: flex;
 }
@@ -353,20 +350,6 @@ video {
 .grid {
   display: grid;
 }
-.h-5 {
-  height: 1.25rem;
-}
-.w-5 {
-  width: 1.25rem;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -424,6 +407,9 @@ video {
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.bg-sky-700 .icon-active {
+  filter: brightness(0) invert(1);
+}
 .submit:where(.css-dev-only-do-not-override-1r287do).ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
   color: #472D7A;
   background-color: white;

package/dist/index.js

@@ -384,85 +384,17 @@ var MultipleSelectElement = (props) => {
 // src/Components/Button.tsx
 var import_react11 = __toESM(require("react"));
 var ButtonElement = (props) => {
-  const [svgContent, setSvgContent] = (0, import_react11.useState)(null);
-  const [originalSvgContent, setOriginalSvgContent] = (0, import_react11.useState)(
-    null
-  );
-  const [hoverColor, setHoverColor] = (0, import_react11.useState)(null);
-  const [loading, setLoading] = (0, import_react11.useState)(false);
-  (0, import_react11.useEffect)(() => {
-    if (props.icon) {
-      setLoading(true);
-      fetch(props.icon).then((response) => response.text()).then((data) => {
-        const tempDiv = document.createElement("div");
-        tempDiv.innerHTML = data;
-        const svgElement = tempDiv.querySelector("svg");
-        if (svgElement) {
-          const textColorClass = props.className?.match(/text-[\w-]+/g)?.[0];
-          const hoverColorClass = props.className?.match(/hover:text-[\w-]+/g)?.[0];
-          if (textColorClass) {
-            const tempSpan = document.createElement("span");
-            tempSpan.className = textColorClass;
-            document.body.appendChild(tempSpan);
-            const computedColor = getComputedStyle(tempSpan).color;
-            document.body.removeChild(tempSpan);
-            const paths = svgElement.querySelectorAll("path");
-            paths.forEach((path) => path.setAttribute("fill", computedColor));
-          }
-          if (hoverColorClass) {
-            const tempSpan = document.createElement("span");
-            tempSpan.className = hoverColorClass.replace("hover:", "");
-            document.body.appendChild(tempSpan);
-            const computedHoverColor = getComputedStyle(tempSpan).color;
-            document.body.removeChild(tempSpan);
-            setHoverColor(computedHoverColor);
-          }
-          svgElement.setAttribute(
-            "class",
-            `${props.iconsClassName ? props.iconsClassName : ""}`
-          );
-          setSvgContent(tempDiv.innerHTML);
-          setOriginalSvgContent(tempDiv.innerHTML);
-        }
-      }).catch((error) => console.error("Error fetching SVG:", error));
-    }
-    setLoading(false);
-  }, []);
-  const handleMouseEnter = () => {
-    if (hoverColor && originalSvgContent) {
-      const tempDiv = document.createElement("div");
-      tempDiv.innerHTML = originalSvgContent;
-      const svgElement = tempDiv.querySelector("svg");
-      const paths = svgElement?.querySelectorAll("path");
-      paths?.forEach((path) => path.setAttribute("fill", hoverColor));
-      setSvgContent(tempDiv.innerHTML);
-    }
-  };
-  const handleMouseLeave = () => {
-    if (originalSvgContent) {
-      setSvgContent(originalSvgContent);
-    }
-  };
   return /* @__PURE__ */ import_react11.default.createElement(
     "button",
     {
       onClick: props.onClick,
       className: `${props.className ? props.className : ""}`,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
       disabled: props.loading,
       style: {
         cursor: props.loading ? "no-drop" : "pointer"
       }
     },
-    props.isLoading ? /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("svg", { className: "animate-spin h-5 w-5 mr-3", viewBox: "0 0 24 24" }), props.label) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, props.isSVGStylesOverride === false && loading ? props.icon && /* @__PURE__ */ import_react11.default.createElement(
-      "img",
-      {
-        className: props.iconsClassName,
-        src: props.icon,
-        alt: props.label
-      }
-    ) : svgContent && /* @__PURE__ */ import_react11.default.createElement("span", { className: props.iconsClassName, dangerouslySetInnerHTML: { __html: svgContent } }), props.label)
+    /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ import_react11.default.createElement("img", { src: props.icon, className: "icon-active" })), props.label)
   );
 };
 

package/dist/index.mjs

@@ -316,97 +316,29 @@ var MultipleSelectElement = (props) => {
 };
 
 // src/Components/Button.tsx
-import React11, { useEffect, useState as useState4 } from "react";
+import React11 from "react";
 var ButtonElement = (props) => {
-  const [svgContent, setSvgContent] = useState4(null);
-  const [originalSvgContent, setOriginalSvgContent] = useState4(
-    null
-  );
-  const [hoverColor, setHoverColor] = useState4(null);
-  const [loading, setLoading] = useState4(false);
-  useEffect(() => {
-    if (props.icon) {
-      setLoading(true);
-      fetch(props.icon).then((response) => response.text()).then((data) => {
-        const tempDiv = document.createElement("div");
-        tempDiv.innerHTML = data;
-        const svgElement = tempDiv.querySelector("svg");
-        if (svgElement) {
-          const textColorClass = props.className?.match(/text-[\w-]+/g)?.[0];
-          const hoverColorClass = props.className?.match(/hover:text-[\w-]+/g)?.[0];
-          if (textColorClass) {
-            const tempSpan = document.createElement("span");
-            tempSpan.className = textColorClass;
-            document.body.appendChild(tempSpan);
-            const computedColor = getComputedStyle(tempSpan).color;
-            document.body.removeChild(tempSpan);
-            const paths = svgElement.querySelectorAll("path");
-            paths.forEach((path) => path.setAttribute("fill", computedColor));
-          }
-          if (hoverColorClass) {
-            const tempSpan = document.createElement("span");
-            tempSpan.className = hoverColorClass.replace("hover:", "");
-            document.body.appendChild(tempSpan);
-            const computedHoverColor = getComputedStyle(tempSpan).color;
-            document.body.removeChild(tempSpan);
-            setHoverColor(computedHoverColor);
-          }
-          svgElement.setAttribute(
-            "class",
-            `${props.iconsClassName ? props.iconsClassName : ""}`
-          );
-          setSvgContent(tempDiv.innerHTML);
-          setOriginalSvgContent(tempDiv.innerHTML);
-        }
-      }).catch((error) => console.error("Error fetching SVG:", error));
-    }
-    setLoading(false);
-  }, []);
-  const handleMouseEnter = () => {
-    if (hoverColor && originalSvgContent) {
-      const tempDiv = document.createElement("div");
-      tempDiv.innerHTML = originalSvgContent;
-      const svgElement = tempDiv.querySelector("svg");
-      const paths = svgElement?.querySelectorAll("path");
-      paths?.forEach((path) => path.setAttribute("fill", hoverColor));
-      setSvgContent(tempDiv.innerHTML);
-    }
-  };
-  const handleMouseLeave = () => {
-    if (originalSvgContent) {
-      setSvgContent(originalSvgContent);
-    }
-  };
   return /* @__PURE__ */ React11.createElement(
     "button",
     {
       onClick: props.onClick,
       className: `${props.className ? props.className : ""}`,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
       disabled: props.loading,
       style: {
         cursor: props.loading ? "no-drop" : "pointer"
       }
     },
-    props.isLoading ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("svg", { className: "animate-spin h-5 w-5 mr-3", viewBox: "0 0 24 24" }), props.label) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, props.isSVGStylesOverride === false && loading ? props.icon && /* @__PURE__ */ React11.createElement(
-      "img",
-      {
-        className: props.iconsClassName,
-        src: props.icon,
-        alt: props.label
-      }
-    ) : svgContent && /* @__PURE__ */ React11.createElement("span", { className: props.iconsClassName, dangerouslySetInnerHTML: { __html: svgContent } }), props.label)
+    /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ React11.createElement("img", { src: props.icon, className: "icon-active" })), props.label)
   );
 };
 
 // src/Components/AddMoreTable.tsx
-import React12, { useEffect as useEffect2, useState as useState5 } from "react";
+import React12, { useEffect, useState as useState4 } from "react";
 import { Table, Button } from "antd";
 import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
-  const [rows, setRows] = useState5(tbody || []);
+  const [rows, setRows] = useState4(tbody || []);
   const onHandleRows = () => {
     const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
     let newRow = {
@@ -471,7 +403,7 @@ var AddMoreTable = (props) => {
       });
     });
   };
-  useEffect2(() => {
+  useEffect(() => {
     console.log(rows);
   }, [rows]);
   const renderInputElement = (element, value) => {
@@ -615,7 +547,7 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import React20, { useState as useState6, useEffect as useEffect3 } from "react";
+import React20, { useState as useState5, useEffect as useEffect2 } from "react";
 import { Table as Table2 } from "antd";
 
 // src/Components/Model.tsx
@@ -717,10 +649,10 @@ var ModelElement = (props) => {
 import { EyeOutlined } from "@ant-design/icons";
 var TableElement = (props) => {
   const { thead, tbody } = props;
-  const [selectedRecord, setSelectedRecord] = useState6({});
-  const [model, setModel] = useState6(false);
-  const [dataSource, setDataSource] = useState6([]);
-  useEffect3(() => {
+  const [selectedRecord, setSelectedRecord] = useState5({});
+  const [model, setModel] = useState5(false);
+  const [dataSource, setDataSource] = useState5([]);
+  useEffect2(() => {
     if (tbody) {
       setDataSource(
         tbody.map((row, index) => ({
@@ -854,14 +786,14 @@ var TableElement = (props) => {
 };
 
 // src/Components/DatePicker.tsx
-import React21, { useState as useState7 } from "react";
+import React21, { useState as useState6 } from "react";
 import { DatePicker } from "antd";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat.js";
 import moment2 from "moment";
 dayjs.extend(customParseFormat);
 var DatePickerElement = (props) => {
-  const [dateState, setDateState] = useState7("");
+  const [dateState, setDateState] = useState6("");
   const handleChange = (date, dateString) => {
     if (date) {
       const formattedDate = dateString;
@@ -945,10 +877,10 @@ var SingleCheckbox = (props) => {
 };
 
 // src/Components/DropDownGroup.tsx
-import React25, { useState as useState8 } from "react";
+import React25, { useState as useState7 } from "react";
 import { Select as Select4 } from "antd";
 var DropDownGroup = (props) => {
-  const [selectedValue, setSelectedValue] = useState8({
+  const [selectedValue, setSelectedValue] = useState7({
     firstValue: {},
     secondValue: {},
     temp: ""
@@ -1000,12 +932,12 @@ var DropDownGroup = (props) => {
 };
 
 // src/Components/FilesUpload.tsx
-import React26, { useState as useState9 } from "react";
+import React26, { useState as useState8 } from "react";
 import { Upload } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
 var FileUpload = (props) => {
   const { Dragger } = Upload;
-  const [files, setFiles] = useState9([]);
+  const [files, setFiles] = useState8([]);
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
     if (props.onChange) {
@@ -1059,9 +991,9 @@ var onChange = (checked) => {
 var SwitchElement = () => /* @__PURE__ */ React28.createElement(Switch, { defaultChecked: true, onChange });
 
 // src/Components/Upload.tsx
-import React29, { useState as useState10 } from "react";
+import React29, { useState as useState9 } from "react";
 var Upload2 = (props) => {
-  const [file, setFile] = useState10();
+  const [file, setFile] = useState9();
   const handleFileChange = (e) => {
     setFile(e.target.files[0]);
     if (props.onChange) {
@@ -1087,11 +1019,11 @@ var Upload2 = (props) => {
 };
 
 // src/Components/OtpElement.tsx
-import React30, { useState as useState11, useRef, useEffect as useEffect4 } from "react";
+import React30, { useState as useState10, useRef, useEffect as useEffect3 } from "react";
 import { Input as Input3 } from "antd";
 var OtpElement = (props) => {
   const length = props.length;
-  const [otp, setOtp] = useState11(Array(length).fill(""));
+  const [otp, setOtp] = useState10(Array(length).fill(""));
   const inputRefs = useRef([]);
   const handleChange = (e, index) => {
     const value = e.target.value;
@@ -1124,7 +1056,7 @@ var OtpElement = (props) => {
       });
     }
   };
-  useEffect4(() => {
+  useEffect3(() => {
     inputRefs.current[0]?.focus();
   }, []);
   return /* @__PURE__ */ React30.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React30.createElement(
@@ -1376,7 +1308,7 @@ var HorizontalBarChart = (props) => {
 };
 
 // src/Components/LineChart.tsx
-import React34, { useEffect as useEffect5, useRef as useRef2 } from "react";
+import React34, { useEffect as useEffect4, useRef as useRef2 } from "react";
 import Chart from "chart.js/auto";
 var LineChart = (props) => {
   const chartRef = useRef2(null);
@@ -1387,7 +1319,7 @@ var LineChart = (props) => {
     { label: "Conversion Rate", data: [50, 100, 150, 180, 50] }
   ];
   const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
-  useEffect5(() => {
+  useEffect4(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1449,12 +1381,12 @@ var LineChart = (props) => {
 };
 
 // src/Components/DoubleBarChart.tsx
-import React35, { useEffect as useEffect6, useRef as useRef3 } from "react";
+import React35, { useEffect as useEffect5, useRef as useRef3 } from "react";
 import Chart2 from "chart.js/auto";
 var DoubleBarChart = (props) => {
   const chartRef = useRef3(null);
   const chartInstance = useRef3(null);
-  useEffect6(() => {
+  useEffect5(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta195",
+  "version": "0.0.14-Beta197",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",