@apexcura/ui-components 0.0.15-Beta1 → 0.0.15-Beta11

package/dist/index.css

@@ -341,29 +341,12 @@ video {
 .m-\[10px\] {
   margin: 10px;
 }
-.mr-3 {
-  margin-right: 0.75rem;
-}
 .flex {
   display: flex;
 }
 .table {
   display: table;
 }
-.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;
 }

package/dist/index.d.mts

@@ -120,4 +120,6 @@ declare const Upload: (props: ElementType) => React$1.JSX.Element;
 
 declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+declare const Donut: React$1.FC<any>;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Donut, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.d.ts

@@ -120,4 +120,6 @@ declare const Upload: (props: ElementType) => React$1.JSX.Element;
 
 declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+declare const Donut: React$1.FC<any>;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Donut, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.js

@@ -36,6 +36,7 @@ __export(src_exports, {
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
+  Donut: () => Donut_default,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
   Image: () => Image,
@@ -416,7 +417,7 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-  }, []);
+  }, [props.icon, props.className]);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -438,15 +439,15 @@ var ButtonElement = (props) => {
       onClick: props.onClick,
       className: `${props.className ? props.className : ""}`,
       onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      disabled: props.loading
+      onMouseLeave: handleMouseLeave
     },
-    props.loading ? /* @__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 ? props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ import_react11.default.createElement(
+    props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ import_react11.default.createElement(
       "span",
       {
         dangerouslySetInnerHTML: { __html: svgContent }
       }
-    ), props.label)
+    ),
+    props.label
   );
 };
 
@@ -809,8 +810,7 @@ var TableElement = (props) => {
       dataSource,
       columns,
       size: props.size,
-      bordered: true,
-      scroll: { x: 1300 }
+      bordered: true
     }
   ), model && /* @__PURE__ */ import_react20.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
@@ -825,7 +825,7 @@ var DatePickerElement = (props) => {
   const [dateState, setDateState] = (0, import_react21.useState)("");
   const handleChange = (date, dateString) => {
     if (date) {
-      const formattedDate = date;
+      const formattedDate = dateString;
       setDateState(date);
       if (props.onChange) {
         props.onChange(formattedDate);
@@ -1095,6 +1095,51 @@ var HighchartsChart = ({ options }) => {
 };
 console.log(HighchartsChart);
 console.log(typeof HighchartsChart);
+var Donut = (props) => {
+  const chartOptions = {
+    title: {
+      text: "Distribution of Students"
+    },
+    plotOptions: {
+      pie: {
+        innerSize: "70%",
+        dataLabels: {
+          enabled: false,
+          format: "<b>{point.name}</b>: {point.percentage:.1f} %"
+        },
+        showInLegend: true
+      }
+    },
+    series: [
+      {
+        type: "pie",
+        name: "Percentage",
+        data: [
+          {
+            name: "Girls",
+            y: 20,
+            color: "#FF6384"
+            // Custom color for Girls
+          },
+          {
+            name: "Boys",
+            y: 40,
+            color: "#36A2EB"
+            // Custom color for Boys
+          },
+          {
+            name: "Students",
+            y: 40,
+            color: "#FFCE56"
+            // Custom color for Students
+          }
+        ]
+      }
+    ]
+  };
+  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(HighchartsChart, { options: chartOptions }));
+};
+var Donut_default = Donut;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -1103,6 +1148,7 @@ console.log(typeof HighchartsChart);
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  Donut,
   DropDownGroup,
   FileUpload,
   Image,

package/dist/index.mjs

@@ -356,7 +356,7 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-  }, []);
+  }, [props.icon, props.className]);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -378,15 +378,15 @@ var ButtonElement = (props) => {
       onClick: props.onClick,
       className: `${props.className ? props.className : ""}`,
       onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      disabled: props.loading
+      onMouseLeave: handleMouseLeave
     },
-    props.loading ? /* @__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 ? props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ React11.createElement(
+    props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ React11.createElement(
       "span",
       {
         dangerouslySetInnerHTML: { __html: svgContent }
       }
-    ), props.label)
+    ),
+    props.label
   );
 };
 
@@ -749,8 +749,7 @@ var TableElement = (props) => {
       dataSource,
       columns,
       size: props.size,
-      bordered: true,
-      scroll: { x: 1300 }
+      bordered: true
     }
   ), model && /* @__PURE__ */ React20.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
@@ -765,7 +764,7 @@ var DatePickerElement = (props) => {
   const [dateState, setDateState] = useState7("");
   const handleChange = (date, dateString) => {
     if (date) {
-      const formattedDate = date;
+      const formattedDate = dateString;
       setDateState(date);
       if (props.onChange) {
         props.onChange(formattedDate);
@@ -1035,6 +1034,51 @@ var HighchartsChart = ({ options }) => {
 };
 console.log(HighchartsChart);
 console.log(typeof HighchartsChart);
+var Donut = (props) => {
+  const chartOptions = {
+    title: {
+      text: "Distribution of Students"
+    },
+    plotOptions: {
+      pie: {
+        innerSize: "70%",
+        dataLabels: {
+          enabled: false,
+          format: "<b>{point.name}</b>: {point.percentage:.1f} %"
+        },
+        showInLegend: true
+      }
+    },
+    series: [
+      {
+        type: "pie",
+        name: "Percentage",
+        data: [
+          {
+            name: "Girls",
+            y: 20,
+            color: "#FF6384"
+            // Custom color for Girls
+          },
+          {
+            name: "Boys",
+            y: 40,
+            color: "#36A2EB"
+            // Custom color for Boys
+          },
+          {
+            name: "Students",
+            y: 40,
+            color: "#FFCE56"
+            // Custom color for Students
+          }
+        ]
+      }
+    ]
+  };
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(HighchartsChart, { options: chartOptions }));
+};
+var Donut_default = Donut;
 export {
   AddMoreTable,
   ButtonElement,
@@ -1042,6 +1086,7 @@ export {
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  Donut_default as Donut,
   DropDownGroup,
   FileUpload,
   Image,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.15-Beta1",
+  "version": "0.0.15-Beta11",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",