@algorithm-shift/design-system 1.2.66 → 1.2.68

package/dist/index.mjs

@@ -157,7 +157,7 @@ function TabList({
 }
 
 // src/components/Layout/TabGroup.tsx
-import { useEffect as useEffect2, useMemo } from "react";
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 function TabGroupComponent({
   children,
@@ -167,11 +167,13 @@ function TabGroupComponent({
   activeTab,
   onTabChange
 }) {
+  const [mounted, setMounted] = useState2(false);
   useEffect2(() => {
-    if (list && list.length > 0 && !activeTab && onTabChange) {
+    if (list && list.length > 0 && !activeTab && onTabChange && !mounted) {
       onTabChange(list[0]?.tabId);
+      setMounted(true);
     }
-  }, [list, activeTab, onTabChange]);
+  }, [list, activeTab, onTabChange, mounted]);
   const formatedList = useMemo(
     () => Array.isArray(list) ? [...list].sort((a, b) => (a.orderNumber ?? 0) - (b.orderNumber ?? 0)) : [],
     [list]
@@ -27304,7 +27306,7 @@ var RadioInput = ({
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-import { useCallback, useEffect as useEffect11, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect11, useState as useState3 } from "react";
 import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 var MultiCheckbox = ({
   className,
@@ -27318,7 +27320,7 @@ var MultiCheckbox = ({
   isDisabled = false
 }) => {
   const list = Array.isArray(data) ? data : [];
-  const [value, setValue] = useState2(propValue);
+  const [value, setValue] = useState3(propValue);
   const options = (list || []).map((item) => ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
@@ -28404,7 +28406,7 @@ function DataTable({
     return [];
   };
   return /* @__PURE__ */ jsxs26("div", { className: "overflow-hidden rounded-md w-full", children: [
-    /* @__PURE__ */ jsxs26("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 border-b bg-gray-50`, children: [
+    /* @__PURE__ */ jsxs26("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 bg-gray-50`, children: [
       globalSearch && /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
         /* @__PURE__ */ jsxs26("div", { className: "relative w-full", children: [
           /* @__PURE__ */ jsx47(
@@ -28440,7 +28442,7 @@ function DataTable({
           {
             variant: "outline",
             size: "sm",
-            className: "px-3 py-1 text-xs cursor-pointer",
+            className: "px-3 py-1 text-xs cursor-pointer border-gray-300",
             children: "Manage Columns"
           }
         ) }),
@@ -29121,19 +29123,56 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-import { BarChart, Bar, Area, AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";
+import React9 from "react";
+import {
+  BarChart,
+  Bar,
+  Area,
+  AreaChart,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend
+} from "recharts";
 import { jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
-var ChartComponent = ({ className, style, ...props }) => {
-  const data = Array.isArray(props?.data) ? props.data : [];
+var ChartComponent = ({ className, style, loading, ...props }) => {
+  const data = Array.isArray(props.data) ? props.data : [];
   const chartType = props.chartType || "bar";
   const legendsPosition = props.legendsPosition === "middle" || props.legendsPosition === "bottom" ? props.legendsPosition : "top";
-  return /* @__PURE__ */ jsx59("div", { className: `${className} h-[400px]`, style, children: data.length > 0 && /* @__PURE__ */ jsx59(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs34(BarChart, { data, children: [
+  if (loading || data.length === 0) {
+    return /* @__PURE__ */ jsx59(
+      "div",
+      {
+        className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
+        style,
+        children: /* @__PURE__ */ jsx59("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx59("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ jsx59(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs34(BarChart, { data, title: "Leads", desc: "content", children: [
     /* @__PURE__ */ jsx59(CartesianGrid, { strokeDasharray: "3 3" }),
     /* @__PURE__ */ jsx59(XAxis, { dataKey: "name" }),
     /* @__PURE__ */ jsx59(YAxis, {}),
-    /* @__PURE__ */ jsx59(Tooltip, {}),
+    /* @__PURE__ */ jsx59(Tooltip, { formatter: (value) => `${value}k` }),
     /* @__PURE__ */ jsx59(Legend, { verticalAlign: legendsPosition, align: "center" }),
-    /* @__PURE__ */ jsx59(Bar, { dataKey: "value", fill: "#00695C" })
+    /* @__PURE__ */ jsx59(
+      Bar,
+      {
+        dataKey: "value",
+        fill: "#00695C",
+        radius: [6, 6, 0, 0],
+        isAnimationActive: false,
+        children: data.map((entry, index) => /* @__PURE__ */ jsx59(
+          "rect",
+          {
+            fill: entry.color || "#00695C"
+          },
+          `bar-${index}`
+        ))
+      }
+    )
   ] }) : /* @__PURE__ */ jsxs34(AreaChart, { data, children: [
     /* @__PURE__ */ jsx59("defs", { children: /* @__PURE__ */ jsxs34("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
       /* @__PURE__ */ jsx59("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
@@ -29142,7 +29181,7 @@ var ChartComponent = ({ className, style, ...props }) => {
     /* @__PURE__ */ jsx59(CartesianGrid, { strokeDasharray: "3 3" }),
     /* @__PURE__ */ jsx59(XAxis, { dataKey: "name" }),
     /* @__PURE__ */ jsx59(YAxis, {}),
-    /* @__PURE__ */ jsx59(Tooltip, {}),
+    /* @__PURE__ */ jsx59(Tooltip, { formatter: (value) => `${value}k` }),
     /* @__PURE__ */ jsx59(
       Area,
       {
@@ -29150,47 +29189,51 @@ var ChartComponent = ({ className, style, ...props }) => {
         dataKey: "value",
         stroke: "#00695C",
         fillOpacity: 1,
-        fill: "url(#colorCount)"
+        fill: "url(#colorCount)",
+        isAnimationActive: false
       }
     )
   ] }) }) });
 };
-var BarChart_default = ChartComponent;
+var BarChart_default = React9.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import { PieChart, Pie, Cell, ResponsiveContainer as ResponsiveContainer2, Tooltip as Tooltip2, LabelList } from "recharts";
+import React10, { useMemo as useMemo3 } from "react";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer as ResponsiveContainer2,
+  Tooltip as Tooltip2,
+  LabelList
+} from "recharts";
 import { Fragment as Fragment19, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
-var DonutChart = ({ className, style, ...props }) => {
-  const data = Array.isArray(props?.data) ? props.data : [];
-  const total = data.reduce((sum, d) => sum + d.value, 0);
-  const showPercentage = props.showPercentage ?? true;
+var getRandomColor = () => {
+  const palette = [
+    "#2563eb",
+    "#10b981",
+    "#f59e0b",
+    "#ef4444",
+    "#8b5cf6",
+    "#14b8a6",
+    "#ec4899",
+    "#e11d48",
+    "#22c55e",
+    "#3b82f6"
+  ];
+  return palette[Math.floor(Math.random() * palette.length)];
+};
+var DonutChart = ({ className, style, loading, ...props }) => {
   const showLegends = props.showLegends ?? true;
   const labelType = props.labelType || "inside";
   const canvasMode = props.canvasMode;
-  const renderLabel = ({ value, x, y }) => {
-    if (value == null) return null;
-    const percentage = (Number(value) / total * 100).toFixed(0);
-    return /* @__PURE__ */ jsxs35(
-      "text",
-      {
-        x,
-        y,
-        textAnchor: "middle",
-        dominantBaseline: "central",
-        className: "text-[10px] font-semibold",
-        fill: labelType === "inside" ? "#fff" : "#000",
-        children: [
-          value,
-          "k ",
-          showPercentage ? `(${percentage}%)` : ""
-        ]
-      }
-    );
-  };
+  const data = useMemo3(() => {
+    if (!Array.isArray(props.data)) return [];
+    return props.data.map((item) => ({ ...item, color: getRandomColor() }));
+  }, [props.data]);
+  const total = useMemo3(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const forceDesktop = canvasMode === "desktop";
-  const wrapperClass = canvasMode ? forceDesktop ? "flex-row" : "flex-col" : "flex-col md:flex-row";
-  const renderLegends = () => {
+  const renderLegends = useMemo3(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ jsx60(Fragment19, { children: data.map((d) => /* @__PURE__ */ jsxs35(
       "div",
@@ -29209,23 +29252,33 @@ var DonutChart = ({ className, style, ...props }) => {
       },
       d.name
     )) });
-  };
+  }, [data, showLegends]);
+  if (loading || data.length === 0) {
+    return /* @__PURE__ */ jsx60(
+      "div",
+      {
+        className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
+        style,
+        children: /* @__PURE__ */ jsx60("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs35(
     "div",
     {
-      className: `relative flex items-center ${wrapperClass} ${className}`,
+      className: `relative flex flex-col items-center ${className}`,
       style,
       children: [
         /* @__PURE__ */ jsxs35("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          data.length > 0 && /* @__PURE__ */ jsx60(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs35(PieChart, { children: [
+          /* @__PURE__ */ jsx60(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs35(PieChart, { children: [
             /* @__PURE__ */ jsxs35(
               Pie,
               {
                 data,
                 cx: "50%",
                 cy: "50%",
-                innerRadius: 70,
-                outerRadius: 120,
+                innerRadius: forceMobile ? 60 : 80,
+                outerRadius: forceMobile ? 100 : 140,
                 dataKey: "value",
                 labelLine: false,
                 isAnimationActive: false,
@@ -29236,26 +29289,38 @@ var DonutChart = ({ className, style, ...props }) => {
                     {
                       dataKey: "value",
                       position: labelType === "inside" ? "inside" : "outside",
-                      content: renderLabel
+                      fill: labelType === "inside" ? "#fff" : "#000",
+                      fontSize: forceMobile ? 10 : 13,
+                      fontWeight: 600
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ jsx60(Tooltip2, { formatter: (value, name) => [`${value}k`, name] })
+            /* @__PURE__ */ jsx60(
+              Tooltip2,
+              {
+                formatter: (value, name) => [`${value}k`, name]
+              }
+            )
           ] }) }),
-          /* @__PURE__ */ jsxs35("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl md:text-4xl font-bold text-[#000]", children: [
-            total,
-            "k"
-          ] })
+          /* @__PURE__ */ jsxs35(
+            "div",
+            {
+              className: `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ${forceMobile ? "text-2xl" : "text-4xl"} font-bold text-[#000]`,
+              children: [
+                total,
+                "k"
+              ]
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx60("div", { className: `flex ${forceDesktop ? "flex-col ml-auto space-y-3" : "flex-wrap justify-center gap-2 mt-4"}
-            w-full md:w-auto`, children: renderLegends() })
+        /* @__PURE__ */ jsx60("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
       ]
     }
   );
 };
-var PieChart_default = DonutChart;
+var PieChart_default = React10.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
 import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";