@apexcura/ui-components 0.0.14-Beta9 → 0.0.14-Beta90

package/dist/index.css

@@ -375,6 +375,9 @@ video {
 .italic {
   font-style: italic;
 }
+.text-\[\\w-\] {
+  color: w-;
+}
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));

package/dist/index.d.mts

@@ -4,9 +4,9 @@ import { UploadFile } from 'antd/lib/upload/interface';
 
 type ElementType = {
     [x: string]: any;
-    selectedStyle: boolean;
-    style: boolean;
-    className: string | undefined;
+    selectedStyle?: boolean;
+    style?: boolean;
+    className?: string | undefined;
     placeholder?: string;
     addonBefore?: React.ReactNode;
     defaultValue?: string;
@@ -26,8 +26,9 @@ type ElementType = {
     fields?: any[];
     schema?: any[];
     options?: any[];
-    options1: any[];
-    options2: any[];
+    firstOptions?: any[];
+    secondOptions?: any[];
+    view?: boolean;
     onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
     onClick?: () => void;
     dropDownOptions?: any[];
@@ -59,6 +60,10 @@ type ElementType = {
     containerClassName?: string;
     selectBefore?: any[];
     selectAfter?: any[];
+    isSVGStylesOverride?: boolean;
+    rowSelection?: string;
+    length?: number;
+    imgClassName?: string;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -84,7 +89,7 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const ButtonElement: React$1.FC<ElementType>;
+declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
 
@@ -108,4 +113,12 @@ declare const FileUpload: (props: ElementType) => React$1.JSX.Element;
 
 declare const TabsElement: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, TableElement, TabsElement, TextElement, TextareaElement };
+declare const SwitchElement: () => React$1.JSX.Element;
+
+declare const Upload: (props: ElementType) => React$1.JSX.Element;
+
+declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const Donut: (props: Object) => React$1.JSX.Element;
+
+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

@@ -4,9 +4,9 @@ import { UploadFile } from 'antd/lib/upload/interface';
 
 type ElementType = {
     [x: string]: any;
-    selectedStyle: boolean;
-    style: boolean;
-    className: string | undefined;
+    selectedStyle?: boolean;
+    style?: boolean;
+    className?: string | undefined;
     placeholder?: string;
     addonBefore?: React.ReactNode;
     defaultValue?: string;
@@ -26,8 +26,9 @@ type ElementType = {
     fields?: any[];
     schema?: any[];
     options?: any[];
-    options1: any[];
-    options2: any[];
+    firstOptions?: any[];
+    secondOptions?: any[];
+    view?: boolean;
     onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
     onClick?: () => void;
     dropDownOptions?: any[];
@@ -59,6 +60,10 @@ type ElementType = {
     containerClassName?: string;
     selectBefore?: any[];
     selectAfter?: any[];
+    isSVGStylesOverride?: boolean;
+    rowSelection?: string;
+    length?: number;
+    imgClassName?: string;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -84,7 +89,7 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const ButtonElement: React$1.FC<ElementType>;
+declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
 
@@ -108,4 +113,12 @@ declare const FileUpload: (props: ElementType) => React$1.JSX.Element;
 
 declare const TabsElement: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, TableElement, TabsElement, TextElement, TextareaElement };
+declare const SwitchElement: () => React$1.JSX.Element;
+
+declare const Upload: (props: ElementType) => React$1.JSX.Element;
+
+declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const Donut: (props: Object) => React$1.JSX.Element;
+
+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,22 +36,26 @@ __export(src_exports, {
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
+  Donut: () => Donut,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
   Image: () => Image,
   MultipleSelectElement: () => MultipleSelectElement,
   Navbar: () => Navbar,
   NumberElement: () => NumberElement,
+  OtpElement: () => OtpElement,
   PasswordElement: () => PasswordElement,
   RadioElement: () => RadioElement,
   SelectElement: () => SelectElement,
   Sidebar: () => Sidebar,
   SingleCheckbox: () => SingleCheckbox,
   SingleSelectElement: () => SingleSelectElement,
+  SwitchElement: () => SwitchElement,
   TableElement: () => TableElement,
   TabsElement: () => TabsElement,
   TextElement: () => TextElement,
-  TextareaElement: () => TextareaElement
+  TextareaElement: () => TextareaElement,
+  Upload: () => Upload2
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -70,6 +74,7 @@ var TextElement = (props) => {
       placeholder: props.placeholder,
       allowClear: true,
       id: props.name,
+      value: props.value,
       prefix: props.prefix,
       type: props.type,
       status: props.status,
@@ -129,8 +134,7 @@ var NumberElement = (props) => {
     {
       placeholder: props.placeholder,
       addonBefore: props.addonBefore,
-      allowClear: true,
-      defaultValue: props.defaultValue,
+      value: props.value,
       disabled: props.disabled,
       id: props.name,
       prefix: props.prefix,
@@ -375,13 +379,74 @@ 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);
+  (0, import_react11.useEffect)(() => {
+    if (props.icon) {
+      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));
+    }
+  }, [props.icon, props.className]);
+  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 && props.onClick(),
-      className: `${props.className ? props.className : ""}`
+      onClick: props.onClick,
+      className: `${props.className ? props.className : ""}`,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
     },
-    props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon }),
+    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
   );
 };
@@ -464,9 +529,9 @@ var AddMoreTable = (props) => {
     if (!element) return null;
     const { element: type, label } = element;
     if (type === "single-select") {
-      return /* @__PURE__ */ import_react12.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false, options1: [], options2: [] });
+      return /* @__PURE__ */ import_react12.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false, options1: [], options2: [], firstOptions: [], secondOptions: [] });
     } else if (type === "textarea") {
-      return /* @__PURE__ */ import_react12.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false, options1: [], options2: [] });
+      return /* @__PURE__ */ import_react12.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false, options1: [], options2: [], firstOptions: [], secondOptions: [] });
     } else {
       return null;
     }
@@ -524,10 +589,19 @@ var Sidebar = (props) => {
       props.onChange(item);
     }
   };
-  return /* @__PURE__ */ import_react13.default.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react13.default.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
-    return /* @__PURE__ */ import_react13.default.createElement("li", { onClick: () => {
-      handleChange(item);
-    }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ import_react13.default.createElement("img", { src: item.icon, className: props.className }), /* @__PURE__ */ import_react13.default.createElement("p", null, item.label));
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: props.name }, /* @__PURE__ */ import_react13.default.createElement("div", { className: props.imgClassName }, /* @__PURE__ */ import_react13.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react13.default.createElement("div", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: item.label }, /* @__PURE__ */ import_react13.default.createElement(
+      ButtonElement,
+      {
+        ...item,
+        className: item.active ? props.activeClassName : props.className,
+        iconsClassName: props.iconsClassName,
+        onClick: (e) => {
+          e.preventDefault();
+          handleChange(item);
+        }
+      }
+    ));
   })));
 };
 
@@ -652,7 +726,6 @@ var TableElement = (props) => {
   const { thead, tbody } = props;
   const [selectedRecord, setSelectedRecord] = (0, import_react20.useState)({});
   const [model, setModel] = (0, import_react20.useState)(false);
-  const [selectedRowKeys, setSelectedRowKeys] = (0, import_react20.useState)([]);
   const handleChange = (record) => {
     console.log("record", record);
     if (props.onChange) {
@@ -681,8 +754,10 @@ var TableElement = (props) => {
             }
           }
         }
-      })),
-      {
+      }))
+    ];
+    if (props.view) {
+      columns.push({
         title: "View",
         dataIndex: "View",
         key: "View",
@@ -697,11 +772,12 @@ var TableElement = (props) => {
           },
           "View"
         )
-      }
-    ];
+      });
+    }
   }
   const dataSource = tbody && tbody.map((row, index) => ({
     ...row,
+    key: index + 1,
     [columns[0].key]: index + 1
   }));
   const count = dataSource ? dataSource.length : 0;
@@ -710,28 +786,29 @@ var TableElement = (props) => {
       props.onChange({ name: "pagination", page, pageSize });
     }
   };
-  const onSelectChange = (newSelectedRowKeys) => {
-    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
-    setSelectedRowKeys(newSelectedRowKeys);
-  };
   const rowSelectionConfig = props.rowSelection ? {
-    selectedRowKeys,
-    onChange: onSelectChange
+    onChange: (selectedRowKeys, selectedRows) => {
+      console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
+      if (props.onChange) {
+        props.onChange(selectedRows);
+      }
+    }
   } : void 0;
   return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
     import_antd14.Table,
     {
+      className: props.className,
       pagination: {
         showTotal: (total) => `Total: ${total} items`,
         total: count,
         showSizeChanger: count > 10,
         onChange: onChangePage
       },
+      rowSelection: rowSelectionConfig,
       dataSource,
       columns,
-      bordered: true,
-      rowSelection: rowSelectionConfig,
-      size: props.size && props.size
+      size: props.size,
+      bordered: true
     }
   ), model && /* @__PURE__ */ import_react20.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
@@ -739,59 +816,40 @@ var TableElement = (props) => {
 // src/Components/DatePicker.tsx
 var import_react21 = __toESM(require("react"));
 var import_antd15 = require("antd");
-var import_icons4 = require("@ant-design/icons");
-var import_moment = __toESM(require("moment"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat.js"));
+import_dayjs.default.extend(import_customParseFormat.default);
 var DatePickerElement = (props) => {
-  const [date, setDate] = (0, import_react21.useState)(null);
-  const handleChange = (date2, dateString) => {
-    console.log("date---------", date2);
-    console.log("datestring", dateString);
-    if (date2) {
-      const formattedDate = dateString;
-      console.log("formattedDate-----------------", formattedDate);
-      setDate(date2);
-      console.log("changedDate------------", date2);
+  const [dateState, setDateState] = (0, import_react21.useState)("");
+  const handleChange = (date, dateString) => {
+    if (date) {
+      const formattedDate = date;
+      setDateState(date);
       if (props.onChange) {
         props.onChange(formattedDate);
       }
     } else {
-      setDate(null);
+      setDateState("");
       if (props.onChange) {
         props.onChange("");
       }
     }
   };
-  const onHandleDecrement = () => {
-    const currentDate = date || (0, import_moment.default)();
-    const newDate = (0, import_moment.default)(currentDate).subtract(1, "days");
-    setDate(newDate);
-    if (props.onChange) {
-      props.onChange(newDate.format("lll"));
-    }
-  };
-  const onHandleIncrement = () => {
-    const currentDate = date || (0, import_moment.default)();
-    const newDate = (0, import_moment.default)(currentDate).add(1, "days");
-    setDate(newDate);
-    if (props.onChange) {
-      props.onChange(newDate.format("lll"));
-    }
-  };
-  return /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement("button", { onClick: onHandleDecrement }, /* @__PURE__ */ import_react21.default.createElement(import_icons4.LeftOutlined, null)), /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement(
     import_antd15.DatePicker,
     {
       placeholder: props.placeholder,
-      value: date,
-      variant: "borderless",
+      value: dateState,
+      format: { format: "DD-MM-YYYY" },
       onChange: handleChange
     }
-  ), /* @__PURE__ */ import_react21.default.createElement("button", { onClick: onHandleIncrement }, /* @__PURE__ */ import_react21.default.createElement(import_icons4.RightOutlined, null)));
+  ));
 };
 
 // src/Components/DateRangePickerElement.tsx
 var import_react22 = __toESM(require("react"));
 var import_antd16 = require("antd");
-var import_dayjs = __toESM(require("dayjs"));
+var import_dayjs2 = __toESM(require("dayjs"));
 var DateRangePickerElement = (props) => {
   const { RangePicker } = import_antd16.DatePicker;
   const handleChange = (dates, dateStrings) => {
@@ -802,10 +860,10 @@ var DateRangePickerElement = (props) => {
     }
   };
   const rangePresets = [
-    { label: "Last 7 Days", value: [(0, import_dayjs.default)().add(-7, "d"), (0, import_dayjs.default)()] },
-    { label: "Last 14 Days", value: [(0, import_dayjs.default)().add(-14, "d"), (0, import_dayjs.default)()] },
-    { label: "Last 30 Days", value: [(0, import_dayjs.default)().add(-30, "d"), (0, import_dayjs.default)()] },
-    { label: "Last 90 Days", value: [(0, import_dayjs.default)().add(-90, "d"), (0, import_dayjs.default)()] }
+    { label: "Last 7 Days", value: [(0, import_dayjs2.default)().add(-7, "d"), (0, import_dayjs2.default)()] },
+    { label: "Last 14 Days", value: [(0, import_dayjs2.default)().add(-14, "d"), (0, import_dayjs2.default)()] },
+    { label: "Last 30 Days", value: [(0, import_dayjs2.default)().add(-30, "d"), (0, import_dayjs2.default)()] },
+    { label: "Last 90 Days", value: [(0, import_dayjs2.default)().add(-90, "d"), (0, import_dayjs2.default)()] }
   ];
   return /* @__PURE__ */ import_react22.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
@@ -813,7 +871,7 @@ var DateRangePickerElement = (props) => {
 // src/Components/Image.tsx
 var import_react23 = __toESM(require("react"));
 var Image = (props) => {
-  return /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("img", { className: props.className, src: props.img, alt: "image" }));
+  return /* @__PURE__ */ import_react23.default.createElement("img", { className: props.className, src: props.img, alt: "image" });
 };
 
 // src/Components/SingleCheckbox.tsx
@@ -834,30 +892,34 @@ var import_antd18 = require("antd");
 var DropDownGroup = (props) => {
   const [selectedValue, setSelectedValue] = (0, import_react25.useState)({
     firstValue: {},
-    secondValue: {}
+    secondValue: {},
+    temp: ""
   });
   const handleFirstChange = (value) => {
-    const filterOption2 = props.options?.find(
+    console.log(selectedValue.temp);
+    const filterOption2 = props.firstOptions?.find(
       (eachOption) => eachOption.value === value
     );
     setSelectedValue((prev) => {
       const newValue = { ...prev, firstValue: filterOption2 };
+      const { temp, ...rest } = newValue;
       if (newValue.firstValue) {
-        props.onChange?.(newValue);
+        props.onChange?.(rest);
       }
-      return selectedValue;
+      return newValue;
     });
   };
   const handleSecondChange = (value) => {
-    const filterOption2 = props.options?.find(
+    const filterOption2 = props.secondOptions?.find(
       (eachOption) => eachOption.value === value
     );
     setSelectedValue((prev) => {
       const newValue = { ...prev, secondValue: filterOption2 };
+      const { temp, ...rest } = newValue;
       if (newValue.secondValue) {
-        props.onChange?.(newValue);
+        props.onChange?.(rest);
       }
-      return selectedValue;
+      return newValue;
     });
   };
   return /* @__PURE__ */ import_react25.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react25.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react25.default.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ import_react25.default.createElement(
@@ -865,7 +927,7 @@ var DropDownGroup = (props) => {
     {
       onChange: handleFirstChange,
       variant: props.variant,
-      options: props.options1,
+      options: props.firstOptions,
       className: props.className
     }
   ), /* @__PURE__ */ import_react25.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react25.default.createElement(
@@ -873,7 +935,7 @@ var DropDownGroup = (props) => {
     {
       onChange: handleSecondChange,
       variant: props.variant,
-      options: props.options2,
+      options: props.secondOptions,
       className: props.className
     }
   )));
@@ -882,18 +944,10 @@ var DropDownGroup = (props) => {
 // src/Components/FilesUpload.tsx
 var import_react26 = __toESM(require("react"));
 var import_antd19 = require("antd");
-var import_icons5 = require("@ant-design/icons");
+var import_icons4 = require("@ant-design/icons");
 var FileUpload = (props) => {
   const { Dragger } = import_antd19.Upload;
   const [files, setFiles] = (0, import_react26.useState)([]);
-  const beforeUpload = (file) => {
-    const isCorrectFile = ["image/png", "image/jpg", "image/jpeg", "application/pdf"].includes(file.type);
-    if (!isCorrectFile) {
-      import_antd19.message.error(`(${file.name}) is an invalid file. Please upload files with the following extensions only (.png/.jpg/.jpeg/.pdf)`);
-      return import_antd19.Upload.LIST_IGNORE;
-    }
-    return true;
-  };
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
     if (props.onChange) {
@@ -917,12 +971,11 @@ var FileUpload = (props) => {
       maxCount: props.max_count,
       multiple: props.multiple,
       fileList: files,
-      beforeUpload,
       onChange: handleChange,
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ import_react26.default.createElement("p", null, /* @__PURE__ */ import_react26.default.createElement(import_icons5.InboxOutlined, null)),
+    /* @__PURE__ */ import_react26.default.createElement("p", null, /* @__PURE__ */ import_react26.default.createElement(import_icons4.InboxOutlined, null)),
     /* @__PURE__ */ import_react26.default.createElement("p", null, "Click or drag file to upload")
   ));
 };
@@ -938,6 +991,149 @@ var TabsElement = (props) => {
   };
   return /* @__PURE__ */ import_react27.default.createElement(import_antd20.Tabs, { className: props.containerClassName, items: props.options, onChange: handleChange });
 };
+
+// src/Components/SwitchElement.tsx
+var import_react28 = __toESM(require("react"));
+var import_antd21 = require("antd");
+var onChange = (checked) => {
+  console.log(`switch to ${checked}`);
+};
+var SwitchElement = () => /* @__PURE__ */ import_react28.default.createElement(import_antd21.Switch, { defaultChecked: true, onChange });
+
+// src/Components/Upload.tsx
+var import_react29 = __toESM(require("react"));
+var Upload2 = (props) => {
+  const [file, setFile] = (0, import_react29.useState)();
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0]);
+    if (props.onChange) {
+      props.onChange(e.target.files[0]);
+    }
+  };
+  const handleUpload = async () => {
+    if (!file) {
+      console.error("No file selected");
+      return;
+    }
+  };
+  return /* @__PURE__ */ import_react29.default.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ import_react29.default.createElement("input", { type: "file", onChange: handleFileChange }), /* @__PURE__ */ import_react29.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleUpload,
+      disabled: !file,
+      style: { marginTop: 16 }
+    },
+    "Upload"
+  ));
+};
+
+// src/Components/OtpElement.tsx
+var import_react30 = __toESM(require("react"));
+var import_antd22 = require("antd");
+var OtpElement = (props) => {
+  const length = props.length;
+  const [otp, setOtp] = (0, import_react30.useState)(Array(length).fill(""));
+  const inputRefs = (0, import_react30.useRef)([]);
+  const handleChange = (e, index) => {
+    const value = e.target.value;
+    if (/^[0-9]$/.test(value) || value === "") {
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+      props.onChange && props.onChange(newOtp.join(""));
+      if (value && index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData("text");
+    if (/^\d+$/.test(pasteData)) {
+      const newOtp = pasteData.split("").slice(0, length);
+      setOtp(newOtp.concat(Array(length - newOtp.length).fill("")));
+      props.onChange && props.onChange(newOtp.join(""));
+      newOtp.forEach((_, idx) => {
+        if (inputRefs.current[idx]) {
+          inputRefs.current[idx]?.focus();
+        }
+      });
+    }
+  };
+  (0, import_react30.useEffect)(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+  return /* @__PURE__ */ import_react30.default.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ import_react30.default.createElement(
+    import_antd22.Input,
+    {
+      key: index,
+      className: props.className,
+      maxLength: 1,
+      value: otp[index],
+      onChange: (e) => handleChange(e, index),
+      onKeyDown: (e) => handleKeyDown(e, index),
+      onPaste: handlePaste,
+      ref: (el) => inputRefs.current[index] = el
+    }
+  )));
+};
+
+// src/Components/Donut.tsx
+var import_react31 = __toESM(require("react"));
+var import_highcharts = __toESM(require("highcharts"));
+var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
+var Donut = (props) => {
+  console.log(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
+          }
+        ]
+      }
+    ]
+  };
+  console.log(chartOptions);
+  return /* @__PURE__ */ import_react31.default.createElement("div", null, /* @__PURE__ */ import_react31.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options: chartOptions }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -946,20 +1142,24 @@ var TabsElement = (props) => {
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  Donut,
   DropDownGroup,
   FileUpload,
   Image,
   MultipleSelectElement,
   Navbar,
   NumberElement,
+  OtpElement,
   PasswordElement,
   RadioElement,
   SelectElement,
   Sidebar,
   SingleCheckbox,
   SingleSelectElement,
+  SwitchElement,
   TableElement,
   TabsElement,
   TextElement,
-  TextareaElement
+  TextareaElement,
+  Upload
 });

package/dist/index.mjs

@@ -13,6 +13,7 @@ var TextElement = (props) => {
       placeholder: props.placeholder,
       allowClear: true,
       id: props.name,
+      value: props.value,
       prefix: props.prefix,
       type: props.type,
       status: props.status,
@@ -72,8 +73,7 @@ var NumberElement = (props) => {
     {
       placeholder: props.placeholder,
       addonBefore: props.addonBefore,
-      allowClear: true,
-      defaultValue: props.defaultValue,
+      value: props.value,
       disabled: props.disabled,
       id: props.name,
       prefix: props.prefix,
@@ -316,26 +316,87 @@ var MultipleSelectElement = (props) => {
 };
 
 // src/Components/Button.tsx
-import React11 from "react";
+import React11, { useEffect, useState as useState4 } from "react";
 var ButtonElement = (props) => {
+  const [svgContent, setSvgContent] = useState4(null);
+  const [originalSvgContent, setOriginalSvgContent] = useState4(null);
+  const [hoverColor, setHoverColor] = useState4(null);
+  useEffect(() => {
+    if (props.icon) {
+      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));
+    }
+  }, [props.icon, props.className]);
+  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 && props.onClick(),
-      className: `${props.className ? props.className : ""}`
+      onClick: props.onClick,
+      className: `${props.className ? props.className : ""}`,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
     },
-    props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon }),
+    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
   );
 };
 
 // src/Components/AddMoreTable.tsx
-import React12, { useEffect, useState as useState4 } from "react";
+import React12, { useEffect as useEffect2, useState as useState5 } from "react";
 import { Table, Button } from "antd";
 import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
-  const [rows, setRows] = useState4(tbody || []);
+  const [rows, setRows] = useState5(tbody || []);
   const onHandleRows = () => {
     const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
     let newRow = {
@@ -400,16 +461,16 @@ var AddMoreTable = (props) => {
       });
     });
   };
-  useEffect(() => {
+  useEffect2(() => {
     console.log(rows);
   }, [rows]);
   const renderInputElement = (element, value) => {
     if (!element) return null;
     const { element: type, label } = element;
     if (type === "single-select") {
-      return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false, options1: [], options2: [] });
+      return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false, options1: [], options2: [], firstOptions: [], secondOptions: [] });
     } else if (type === "textarea") {
-      return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false, options1: [], options2: [] });
+      return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false, options1: [], options2: [], firstOptions: [], secondOptions: [] });
     } else {
       return null;
     }
@@ -467,10 +528,19 @@ var Sidebar = (props) => {
       props.onChange(item);
     }
   };
-  return /* @__PURE__ */ React13.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ React13.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
-    return /* @__PURE__ */ React13.createElement("li", { onClick: () => {
-      handleChange(item);
-    }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ React13.createElement("img", { src: item.icon, className: props.className }), /* @__PURE__ */ React13.createElement("p", null, item.label));
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, { key: props.name }, /* @__PURE__ */ React13.createElement("div", { className: props.imgClassName }, /* @__PURE__ */ React13.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ React13.createElement("div", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ React13.createElement(React13.Fragment, { key: item.label }, /* @__PURE__ */ React13.createElement(
+      ButtonElement,
+      {
+        ...item,
+        className: item.active ? props.activeClassName : props.className,
+        iconsClassName: props.iconsClassName,
+        onClick: (e) => {
+          e.preventDefault();
+          handleChange(item);
+        }
+      }
+    ));
   })));
 };
 
@@ -535,7 +605,7 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import React20, { useState as useState5 } from "react";
+import React20, { useState as useState6 } from "react";
 import { Table as Table2 } from "antd";
 
 // src/Components/Model.tsx
@@ -593,9 +663,8 @@ var ModelElement = (props) => {
 // src/Components/TableElement.tsx
 var TableElement = (props) => {
   const { thead, tbody } = props;
-  const [selectedRecord, setSelectedRecord] = useState5({});
-  const [model, setModel] = useState5(false);
-  const [selectedRowKeys, setSelectedRowKeys] = useState5([]);
+  const [selectedRecord, setSelectedRecord] = useState6({});
+  const [model, setModel] = useState6(false);
   const handleChange = (record) => {
     console.log("record", record);
     if (props.onChange) {
@@ -624,8 +693,10 @@ var TableElement = (props) => {
             }
           }
         }
-      })),
-      {
+      }))
+    ];
+    if (props.view) {
+      columns.push({
         title: "View",
         dataIndex: "View",
         key: "View",
@@ -640,11 +711,12 @@ var TableElement = (props) => {
           },
           "View"
         )
-      }
-    ];
+      });
+    }
   }
   const dataSource = tbody && tbody.map((row, index) => ({
     ...row,
+    key: index + 1,
     [columns[0].key]: index + 1
   }));
   const count = dataSource ? dataSource.length : 0;
@@ -653,88 +725,70 @@ var TableElement = (props) => {
       props.onChange({ name: "pagination", page, pageSize });
     }
   };
-  const onSelectChange = (newSelectedRowKeys) => {
-    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
-    setSelectedRowKeys(newSelectedRowKeys);
-  };
   const rowSelectionConfig = props.rowSelection ? {
-    selectedRowKeys,
-    onChange: onSelectChange
+    onChange: (selectedRowKeys, selectedRows) => {
+      console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
+      if (props.onChange) {
+        props.onChange(selectedRows);
+      }
+    }
   } : void 0;
   return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
     Table2,
     {
+      className: props.className,
       pagination: {
         showTotal: (total) => `Total: ${total} items`,
         total: count,
         showSizeChanger: count > 10,
         onChange: onChangePage
       },
+      rowSelection: rowSelectionConfig,
       dataSource,
       columns,
-      bordered: true,
-      rowSelection: rowSelectionConfig,
-      size: props.size && props.size
+      size: props.size,
+      bordered: true
     }
   ), model && /* @__PURE__ */ React20.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
 
 // src/Components/DatePicker.tsx
-import React21, { useState as useState6 } from "react";
+import React21, { useState as useState7 } from "react";
 import { DatePicker } from "antd";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-import moment from "moment";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat.js";
+dayjs.extend(customParseFormat);
 var DatePickerElement = (props) => {
-  const [date, setDate] = useState6(null);
-  const handleChange = (date2, dateString) => {
-    console.log("date---------", date2);
-    console.log("datestring", dateString);
-    if (date2) {
-      const formattedDate = dateString;
-      console.log("formattedDate-----------------", formattedDate);
-      setDate(date2);
-      console.log("changedDate------------", date2);
+  const [dateState, setDateState] = useState7("");
+  const handleChange = (date, dateString) => {
+    if (date) {
+      const formattedDate = date;
+      setDateState(date);
       if (props.onChange) {
         props.onChange(formattedDate);
       }
     } else {
-      setDate(null);
+      setDateState("");
       if (props.onChange) {
         props.onChange("");
       }
     }
   };
-  const onHandleDecrement = () => {
-    const currentDate = date || moment();
-    const newDate = moment(currentDate).subtract(1, "days");
-    setDate(newDate);
-    if (props.onChange) {
-      props.onChange(newDate.format("lll"));
-    }
-  };
-  const onHandleIncrement = () => {
-    const currentDate = date || moment();
-    const newDate = moment(currentDate).add(1, "days");
-    setDate(newDate);
-    if (props.onChange) {
-      props.onChange(newDate.format("lll"));
-    }
-  };
-  return /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("button", { onClick: onHandleDecrement }, /* @__PURE__ */ React21.createElement(LeftOutlined, null)), /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement(
     DatePicker,
     {
       placeholder: props.placeholder,
-      value: date,
-      variant: "borderless",
+      value: dateState,
+      format: { format: "DD-MM-YYYY" },
       onChange: handleChange
     }
-  ), /* @__PURE__ */ React21.createElement("button", { onClick: onHandleIncrement }, /* @__PURE__ */ React21.createElement(RightOutlined, null)));
+  ));
 };
 
 // src/Components/DateRangePickerElement.tsx
 import React22 from "react";
 import { DatePicker as DatePicker2, Space } from "antd";
-import dayjs from "dayjs";
+import dayjs2 from "dayjs";
 var DateRangePickerElement = (props) => {
   const { RangePicker } = DatePicker2;
   const handleChange = (dates, dateStrings) => {
@@ -745,10 +799,10 @@ var DateRangePickerElement = (props) => {
     }
   };
   const rangePresets = [
-    { label: "Last 7 Days", value: [dayjs().add(-7, "d"), dayjs()] },
-    { label: "Last 14 Days", value: [dayjs().add(-14, "d"), dayjs()] },
-    { label: "Last 30 Days", value: [dayjs().add(-30, "d"), dayjs()] },
-    { label: "Last 90 Days", value: [dayjs().add(-90, "d"), dayjs()] }
+    { label: "Last 7 Days", value: [dayjs2().add(-7, "d"), dayjs2()] },
+    { label: "Last 14 Days", value: [dayjs2().add(-14, "d"), dayjs2()] },
+    { label: "Last 30 Days", value: [dayjs2().add(-30, "d"), dayjs2()] },
+    { label: "Last 90 Days", value: [dayjs2().add(-90, "d"), dayjs2()] }
   ];
   return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
@@ -756,7 +810,7 @@ var DateRangePickerElement = (props) => {
 // src/Components/Image.tsx
 import React23 from "react";
 var Image = (props) => {
-  return /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement("img", { className: props.className, src: props.img, alt: "image" }));
+  return /* @__PURE__ */ React23.createElement("img", { className: props.className, src: props.img, alt: "image" });
 };
 
 // src/Components/SingleCheckbox.tsx
@@ -772,35 +826,39 @@ var SingleCheckbox = (props) => {
 };
 
 // src/Components/DropDownGroup.tsx
-import React25, { useState as useState7 } from "react";
+import React25, { useState as useState8 } from "react";
 import { Select as Select4 } from "antd";
 var DropDownGroup = (props) => {
-  const [selectedValue, setSelectedValue] = useState7({
+  const [selectedValue, setSelectedValue] = useState8({
     firstValue: {},
-    secondValue: {}
+    secondValue: {},
+    temp: ""
   });
   const handleFirstChange = (value) => {
-    const filterOption2 = props.options?.find(
+    console.log(selectedValue.temp);
+    const filterOption2 = props.firstOptions?.find(
       (eachOption) => eachOption.value === value
     );
     setSelectedValue((prev) => {
       const newValue = { ...prev, firstValue: filterOption2 };
+      const { temp, ...rest } = newValue;
       if (newValue.firstValue) {
-        props.onChange?.(newValue);
+        props.onChange?.(rest);
       }
-      return selectedValue;
+      return newValue;
     });
   };
   const handleSecondChange = (value) => {
-    const filterOption2 = props.options?.find(
+    const filterOption2 = props.secondOptions?.find(
       (eachOption) => eachOption.value === value
     );
     setSelectedValue((prev) => {
       const newValue = { ...prev, secondValue: filterOption2 };
+      const { temp, ...rest } = newValue;
       if (newValue.secondValue) {
-        props.onChange?.(newValue);
+        props.onChange?.(rest);
       }
-      return selectedValue;
+      return newValue;
     });
   };
   return /* @__PURE__ */ React25.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React25.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React25.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ React25.createElement(
@@ -808,7 +866,7 @@ var DropDownGroup = (props) => {
     {
       onChange: handleFirstChange,
       variant: props.variant,
-      options: props.options1,
+      options: props.firstOptions,
       className: props.className
     }
   ), /* @__PURE__ */ React25.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React25.createElement(
@@ -816,27 +874,19 @@ var DropDownGroup = (props) => {
     {
       onChange: handleSecondChange,
       variant: props.variant,
-      options: props.options2,
+      options: props.secondOptions,
       className: props.className
     }
   )));
 };
 
 // src/Components/FilesUpload.tsx
-import React26, { useState as useState8 } from "react";
-import { Upload, message } from "antd";
+import React26, { useState as useState9 } from "react";
+import { Upload } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
 var FileUpload = (props) => {
   const { Dragger } = Upload;
-  const [files, setFiles] = useState8([]);
-  const beforeUpload = (file) => {
-    const isCorrectFile = ["image/png", "image/jpg", "image/jpeg", "application/pdf"].includes(file.type);
-    if (!isCorrectFile) {
-      message.error(`(${file.name}) is an invalid file. Please upload files with the following extensions only (.png/.jpg/.jpeg/.pdf)`);
-      return Upload.LIST_IGNORE;
-    }
-    return true;
-  };
+  const [files, setFiles] = useState9([]);
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
     if (props.onChange) {
@@ -860,7 +910,6 @@ var FileUpload = (props) => {
       maxCount: props.max_count,
       multiple: props.multiple,
       fileList: files,
-      beforeUpload,
       onChange: handleChange,
       showUploadList: true,
       customRequest
@@ -881,6 +930,149 @@ var TabsElement = (props) => {
   };
   return /* @__PURE__ */ React27.createElement(Tabs, { className: props.containerClassName, items: props.options, onChange: handleChange });
 };
+
+// src/Components/SwitchElement.tsx
+import React28 from "react";
+import { Switch } from "antd";
+var onChange = (checked) => {
+  console.log(`switch to ${checked}`);
+};
+var SwitchElement = () => /* @__PURE__ */ React28.createElement(Switch, { defaultChecked: true, onChange });
+
+// src/Components/Upload.tsx
+import React29, { useState as useState10 } from "react";
+var Upload2 = (props) => {
+  const [file, setFile] = useState10();
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0]);
+    if (props.onChange) {
+      props.onChange(e.target.files[0]);
+    }
+  };
+  const handleUpload = async () => {
+    if (!file) {
+      console.error("No file selected");
+      return;
+    }
+  };
+  return /* @__PURE__ */ React29.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ React29.createElement("input", { type: "file", onChange: handleFileChange }), /* @__PURE__ */ React29.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleUpload,
+      disabled: !file,
+      style: { marginTop: 16 }
+    },
+    "Upload"
+  ));
+};
+
+// src/Components/OtpElement.tsx
+import React30, { useState as useState11, 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 inputRefs = useRef([]);
+  const handleChange = (e, index) => {
+    const value = e.target.value;
+    if (/^[0-9]$/.test(value) || value === "") {
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+      props.onChange && props.onChange(newOtp.join(""));
+      if (value && index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData("text");
+    if (/^\d+$/.test(pasteData)) {
+      const newOtp = pasteData.split("").slice(0, length);
+      setOtp(newOtp.concat(Array(length - newOtp.length).fill("")));
+      props.onChange && props.onChange(newOtp.join(""));
+      newOtp.forEach((_, idx) => {
+        if (inputRefs.current[idx]) {
+          inputRefs.current[idx]?.focus();
+        }
+      });
+    }
+  };
+  useEffect3(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+  return /* @__PURE__ */ React30.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React30.createElement(
+    Input3,
+    {
+      key: index,
+      className: props.className,
+      maxLength: 1,
+      value: otp[index],
+      onChange: (e) => handleChange(e, index),
+      onKeyDown: (e) => handleKeyDown(e, index),
+      onPaste: handlePaste,
+      ref: (el) => inputRefs.current[index] = el
+    }
+  )));
+};
+
+// src/Components/Donut.tsx
+import React31 from "react";
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+var Donut = (props) => {
+  console.log(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
+          }
+        ]
+      }
+    ]
+  };
+  console.log(chartOptions);
+  return /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement(HighchartsReact, { highcharts: Highcharts, options: chartOptions }));
+};
 export {
   AddMoreTable,
   ButtonElement,
@@ -888,20 +1080,24 @@ export {
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  Donut,
   DropDownGroup,
   FileUpload,
   Image,
   MultipleSelectElement,
   Navbar,
   NumberElement,
+  OtpElement,
   PasswordElement,
   RadioElement,
   SelectElement,
   Sidebar,
   SingleCheckbox,
   SingleSelectElement,
+  SwitchElement,
   TableElement,
   TabsElement,
   TextElement,
-  TextareaElement
+  TextareaElement,
+  Upload2 as Upload
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta9",
+  "version": "0.0.14-Beta90",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",
@@ -48,12 +48,12 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@apexcura/core": "^0.0.15-Beta34",
-    "@apexcura/ui-components": "^0.0.11-Beta256",
     "@tinymce/tinymce-react": "^5.0.1",
     "autoprefixer": "^10.4.19",
     "date-fns": "^3.6.0",
     "esbuild": "^0.21.4",
+    "highcharts": "^11.4.3",
+    "highcharts-react-official": "^3.2.1",
     "moment": "^2.30.1",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",