@apexcura/ui-components 0.0.14-Beta3 → 0.0.14-Beta30

package/dist/index.d.mts

@@ -26,6 +26,8 @@ type ElementType = {
     fields?: any[];
     schema?: any[];
     options?: any[];
+    firstOptions: any[];
+    secondOptions: any[];
     onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
     onClick?: () => void;
     dropDownOptions?: any[];
@@ -106,4 +108,8 @@ 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;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.d.ts

@@ -26,6 +26,8 @@ type ElementType = {
     fields?: any[];
     schema?: any[];
     options?: any[];
+    firstOptions: any[];
+    secondOptions: any[];
     onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
     onClick?: () => void;
     dropDownOptions?: any[];
@@ -106,4 +108,8 @@ 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;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.js

@@ -48,10 +48,12 @@ __export(src_exports, {
   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);
 
@@ -464,9 +466,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 });
+      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 });
+      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;
     }
@@ -681,7 +683,23 @@ var TableElement = (props) => {
             }
           }
         }
-      }))
+      })),
+      {
+        title: "View",
+        dataIndex: "View",
+        key: "View",
+        render: (_, record) => /* @__PURE__ */ import_react20.default.createElement(
+          "a",
+          {
+            onClick: () => {
+              setSelectedRecord(record);
+              handleChange(record);
+              setModel(true);
+            }
+          },
+          "View"
+        )
+      }
     ];
   }
   const dataSource = tbody && tbody.map((row, index) => ({
@@ -715,17 +733,7 @@ var TableElement = (props) => {
       columns,
       bordered: true,
       rowSelection: rowSelectionConfig,
-      size: props.size && props.size,
-      onRow: (record) => {
-        return {
-          onClick: () => {
-            setSelectedRecord(record);
-            handleChange(record);
-            setModel(true);
-          },
-          style: { cursor: "pointer" }
-        };
-      }
+      size: props.size && props.size
     }
   ), model && /* @__PURE__ */ import_react20.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
@@ -733,59 +741,42 @@ 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 dateFormat = "DD/MM/YYYY";
+  const handleChange = (date, dateString) => {
+    if (date) {
+      const formattedDate = date.format(dateFormat);
+      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,
+      value: (0, import_dayjs.default)(dateState, dateFormat),
+      format: dateFormat,
       variant: "borderless",
       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) => {
@@ -796,10 +787,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 }));
 };
@@ -826,33 +817,44 @@ var SingleCheckbox = (props) => {
 var import_react25 = __toESM(require("react"));
 var import_antd18 = require("antd");
 var DropDownGroup = (props) => {
-  const [selectedValue, setSelectedValue] = (0, import_react25.useState)({ firstValue: {}, secondValue: {} });
+  const [selectedValue, setSelectedValue] = (0, import_react25.useState)({
+    firstValue: {},
+    secondValue: {},
+    temp: ""
+  });
   const handleFirstChange = (value) => {
-    const filterOption2 = props.options?.find((eachOption) => eachOption.value === value);
+    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((eachOption) => eachOption.value === value);
+    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 }, /* @__PURE__ */ import_react25.default.createElement(
+  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(
     import_antd18.Select,
     {
       onChange: handleFirstChange,
       variant: props.variant,
-      options: props.options,
+      options: props.firstOptions,
       className: props.className
     }
   ), /* @__PURE__ */ import_react25.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react25.default.createElement(
@@ -860,27 +862,19 @@ var DropDownGroup = (props) => {
     {
       onChange: handleSecondChange,
       variant: props.variant,
-      options: props.options,
+      options: props.secondOptions,
       className: props.className
     }
-  ));
+  )));
 };
 
 // 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) {
@@ -904,12 +898,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")
   ));
 };
@@ -925,6 +918,42 @@ 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"
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -945,8 +974,10 @@ var TabsElement = (props) => {
   Sidebar,
   SingleCheckbox,
   SingleSelectElement,
+  SwitchElement,
   TableElement,
   TabsElement,
   TextElement,
-  TextareaElement
+  TextareaElement,
+  Upload
 });

package/dist/index.mjs

@@ -407,9 +407,9 @@ var AddMoreTable = (props) => {
     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 });
+      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 });
+      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;
     }
@@ -624,7 +624,23 @@ var TableElement = (props) => {
             }
           }
         }
-      }))
+      })),
+      {
+        title: "View",
+        dataIndex: "View",
+        key: "View",
+        render: (_, record) => /* @__PURE__ */ React20.createElement(
+          "a",
+          {
+            onClick: () => {
+              setSelectedRecord(record);
+              handleChange(record);
+              setModel(true);
+            }
+          },
+          "View"
+        )
+      }
     ];
   }
   const dataSource = tbody && tbody.map((row, index) => ({
@@ -658,17 +674,7 @@ var TableElement = (props) => {
       columns,
       bordered: true,
       rowSelection: rowSelectionConfig,
-      size: props.size && props.size,
-      onRow: (record) => {
-        return {
-          onClick: () => {
-            setSelectedRecord(record);
-            handleChange(record);
-            setModel(true);
-          },
-          style: { cursor: "pointer" }
-        };
-      }
+      size: props.size && props.size
     }
   ), model && /* @__PURE__ */ React20.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
@@ -676,59 +682,42 @@ var TableElement = (props) => {
 // src/Components/DatePicker.tsx
 import React21, { useState as useState6 } 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] = useState6("");
+  const dateFormat = "DD/MM/YYYY";
+  const handleChange = (date, dateString) => {
+    if (date) {
+      const formattedDate = date.format(dateFormat);
+      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,
+      value: dayjs(dateState, dateFormat),
+      format: dateFormat,
       variant: "borderless",
       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) => {
@@ -739,10 +728,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 }));
 };
@@ -769,33 +758,44 @@ var SingleCheckbox = (props) => {
 import React25, { useState as useState7 } from "react";
 import { Select as Select4 } from "antd";
 var DropDownGroup = (props) => {
-  const [selectedValue, setSelectedValue] = useState7({ firstValue: {}, secondValue: {} });
+  const [selectedValue, setSelectedValue] = useState7({
+    firstValue: {},
+    secondValue: {},
+    temp: ""
+  });
   const handleFirstChange = (value) => {
-    const filterOption2 = props.options?.find((eachOption) => eachOption.value === value);
+    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((eachOption) => eachOption.value === value);
+    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 }, /* @__PURE__ */ React25.createElement(
+  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(
     Select4,
     {
       onChange: handleFirstChange,
       variant: props.variant,
-      options: props.options,
+      options: props.firstOptions,
       className: props.className
     }
   ), /* @__PURE__ */ React25.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React25.createElement(
@@ -803,27 +803,19 @@ var DropDownGroup = (props) => {
     {
       onChange: handleSecondChange,
       variant: props.variant,
-      options: props.options,
+      options: props.secondOptions,
       className: props.className
     }
-  ));
+  )));
 };
 
 // src/Components/FilesUpload.tsx
 import React26, { useState as useState8 } from "react";
-import { Upload, message } from "antd";
+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 handleChange = ({ fileList }) => {
     setFiles(fileList);
     if (props.onChange) {
@@ -847,7 +839,6 @@ var FileUpload = (props) => {
       maxCount: props.max_count,
       multiple: props.multiple,
       fileList: files,
-      beforeUpload,
       onChange: handleChange,
       showUploadList: true,
       customRequest
@@ -868,6 +859,42 @@ 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 useState9 } from "react";
+var Upload2 = (props) => {
+  const [file, setFile] = useState9();
+  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"
+  ));
+};
 export {
   AddMoreTable,
   ButtonElement,
@@ -887,8 +914,10 @@ export {
   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-Beta3",
+  "version": "0.0.14-Beta30",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",