@algorithm-shift/design-system 1.2.66 → 1.2.68

package/dist/index.d.mts

@@ -133,6 +133,7 @@ interface PieChartProps extends ElementProps {
   showLegends?: boolean;
   labelType?: string;
   canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  loading?: boolean;
 }
 
 interface BarChartProps extends ElementProps {
@@ -140,6 +141,7 @@ interface BarChartProps extends ElementProps {
   chartType?: string;
   legendsPosition?: string;
   canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  loading?: boolean;
 }
 
 interface ModalProps extends ElementProps {
@@ -319,9 +321,9 @@ declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.
 
 declare function Navbar({ style, badgeType, badgeCount, hideBadgeWhenZero, profileType, showName, imageUrl, altText, canvasMode, list, profileMenu, userName }: NavbarProps): react_jsx_runtime.JSX.Element;
 
-declare const ChartComponent: ({ className, style, ...props }: BarChartProps) => react_jsx_runtime.JSX.Element;
+declare const _default$1: React$1.MemoExoticComponent<({ className, style, loading, ...props }: BarChartProps) => react_jsx_runtime.JSX.Element>;
 
-declare const DonutChart: ({ className, style, ...props }: PieChartProps) => react_jsx_runtime.JSX.Element;
+declare const _default: React$1.MemoExoticComponent<({ className, style, loading, ...props }: PieChartProps) => react_jsx_runtime.JSX.Element>;
 
 declare function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }: EmailComposerProps): react_jsx_runtime.JSX.Element;
 
@@ -341,4 +343,4 @@ declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Ele
 declare function cn(...inputs: ClassValue[]): string;
 declare function getInitials(name: string): string;
 
-export { Accordion, AccordionGroup, ChartComponent as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, Icon, ImageControl as Image, Modal, MultiCheckbox, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, DonutChart as PieChart, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };
+export { Accordion, AccordionGroup, _default$1 as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, Icon, ImageControl as Image, Modal, MultiCheckbox, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, _default as PieChart, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };

package/dist/index.d.ts

@@ -133,6 +133,7 @@ interface PieChartProps extends ElementProps {
   showLegends?: boolean;
   labelType?: string;
   canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  loading?: boolean;
 }
 
 interface BarChartProps extends ElementProps {
@@ -140,6 +141,7 @@ interface BarChartProps extends ElementProps {
   chartType?: string;
   legendsPosition?: string;
   canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  loading?: boolean;
 }
 
 interface ModalProps extends ElementProps {
@@ -319,9 +321,9 @@ declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.
 
 declare function Navbar({ style, badgeType, badgeCount, hideBadgeWhenZero, profileType, showName, imageUrl, altText, canvasMode, list, profileMenu, userName }: NavbarProps): react_jsx_runtime.JSX.Element;
 
-declare const ChartComponent: ({ className, style, ...props }: BarChartProps) => react_jsx_runtime.JSX.Element;
+declare const _default$1: React$1.MemoExoticComponent<({ className, style, loading, ...props }: BarChartProps) => react_jsx_runtime.JSX.Element>;
 
-declare const DonutChart: ({ className, style, ...props }: PieChartProps) => react_jsx_runtime.JSX.Element;
+declare const _default: React$1.MemoExoticComponent<({ className, style, loading, ...props }: PieChartProps) => react_jsx_runtime.JSX.Element>;
 
 declare function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }: EmailComposerProps): react_jsx_runtime.JSX.Element;
 
@@ -341,4 +343,4 @@ declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Ele
 declare function cn(...inputs: ClassValue[]): string;
 declare function getInitials(name: string): string;
 
-export { Accordion, AccordionGroup, ChartComponent as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, Icon, ImageControl as Image, Modal, MultiCheckbox, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, DonutChart as PieChart, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };
+export { Accordion, AccordionGroup, _default$1 as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, Icon, ImageControl as Image, Modal, MultiCheckbox, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, _default as PieChart, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };

package/dist/index.js

@@ -243,11 +243,13 @@ function TabGroupComponent({
   activeTab,
   onTabChange
 }) {
+  const [mounted, setMounted] = (0, import_react3.useState)(false);
   (0, import_react3.useEffect)(() => {
-    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 = (0, import_react3.useMemo)(
     () => Array.isArray(list) ? [...list].sort((a, b) => (a.orderNumber ?? 0) - (b.orderNumber ?? 0)) : [],
     [list]
@@ -28493,7 +28495,7 @@ function DataTable({
     return [];
   };
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 border-b bg-gray-50`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 bg-gray-50`, children: [
       globalSearch && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
         /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "relative w-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -28529,7 +28531,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"
           }
         ) }),
@@ -29210,19 +29212,45 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
+var import_react27 = __toESM(require("react"));
 var import_recharts = require("recharts");
 var import_jsx_runtime59 = require("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__ */ (0, import_jsx_runtime59.jsx)("div", { className: `${className} h-[400px]`, style, children: data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_recharts.BarChart, { data, children: [
+  if (loading || data.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      "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__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_recharts.BarChart, { data, title: "Leads", desc: "content", children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.XAxis, { dataKey: "name" }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.YAxis, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Tooltip, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Legend, { verticalAlign: legendsPosition, align: "center" }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Bar, { dataKey: "value", fill: "#00695C" })
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      import_recharts.Bar,
+      {
+        dataKey: "value",
+        fill: "#00695C",
+        radius: [6, 6, 0, 0],
+        isAnimationActive: false,
+        children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          "rect",
+          {
+            fill: entry.color || "#00695C"
+          },
+          `bar-${index}`
+        ))
+      }
+    )
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_recharts.AreaChart, { data, children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
@@ -29231,7 +29259,7 @@ var ChartComponent = ({ className, style, ...props }) => {
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.XAxis, { dataKey: "name" }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.YAxis, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Tooltip, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       import_recharts.Area,
       {
@@ -29239,47 +29267,44 @@ 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 = import_react27.default.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
+var import_react28 = __toESM(require("react"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime60 = require("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__ */ (0, import_jsx_runtime60.jsxs)(
-      "text",
-      {
-        x,
-        y,
-        textAnchor: "middle",
-        dominantBaseline: "central",
-        className: "text-[10px] font-semibold",
-        fill: labelType === "inside" ? "#fff" : "#000",
-        children: [
-          value,
-          "k ",
-          showPercentage ? `(${percentage}%)` : ""
-        ]
-      }
-    );
-  };
+  const data = (0, import_react28.useMemo)(() => {
+    if (!Array.isArray(props.data)) return [];
+    return props.data.map((item) => ({ ...item, color: getRandomColor() }));
+  }, [props.data]);
+  const total = (0, import_react28.useMemo)(() => 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 = (0, import_react28.useMemo)(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children: data.map((d) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       "div",
@@ -29298,23 +29323,33 @@ var DonutChart = ({ className, style, ...props }) => {
       },
       d.name
     )) });
-  };
+  }, [data, showLegends]);
+  if (loading || data.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      "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__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
-      className: `relative flex items-center ${wrapperClass} ${className}`,
+      className: `relative flex flex-col items-center ${className}`,
       style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_recharts2.PieChart, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_recharts2.PieChart, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
               import_recharts2.Pie,
               {
                 data,
                 cx: "50%",
                 cy: "50%",
-                innerRadius: 70,
-                outerRadius: 120,
+                innerRadius: forceMobile ? 60 : 80,
+                outerRadius: forceMobile ? 100 : 140,
                 dataKey: "value",
                 labelLine: false,
                 isAnimationActive: false,
@@ -29325,26 +29360,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__ */ (0, import_jsx_runtime60.jsx)(import_recharts2.Tooltip, { formatter: (value, name) => [`${value}k`, name] })
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              import_recharts2.Tooltip,
+              {
+                formatter: (value, name) => [`${value}k`, name]
+              }
+            )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("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__ */ (0, import_jsx_runtime60.jsxs)(
+            "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__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsx)("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 = import_react28.default.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");