@apexcura/ui-components 0.0.13-Beta75 → 0.0.13-Beta76

package/dist/index.css

@@ -338,10 +338,6 @@ video {
 .m-\[10px\] {
   margin: 10px;
 }
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
 .flex {
   display: flex;
 }

package/dist/index.d.mts

@@ -96,8 +96,6 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const UploadElement: (props: ElementType) => React$1.JSX.Element;
-
 declare const Image: (props: ElementType) => React$1.JSX.Element;
 
 declare const SingleCheckbox: (props: ElementType) => React$1.JSX.Element;
@@ -106,4 +104,6 @@ declare const MultiSelect: (props: ElementType) => React$1.JSX.Element;
 
 declare const FileUpload: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, FileUpload, Image, MultiSelect, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, TableElement, TextElement, TextareaElement, UploadElement };
+declare const TabsElement: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, FileUpload, Image, MultiSelect, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, TableElement, TabsElement, TextElement, TextareaElement };

package/dist/index.d.ts

@@ -96,8 +96,6 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const UploadElement: (props: ElementType) => React$1.JSX.Element;
-
 declare const Image: (props: ElementType) => React$1.JSX.Element;
 
 declare const SingleCheckbox: (props: ElementType) => React$1.JSX.Element;
@@ -106,4 +104,6 @@ declare const MultiSelect: (props: ElementType) => React$1.JSX.Element;
 
 declare const FileUpload: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, FileUpload, Image, MultiSelect, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, TableElement, TextElement, TextareaElement, UploadElement };
+declare const TabsElement: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, FileUpload, Image, MultiSelect, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, TableElement, TabsElement, TextElement, TextareaElement };

package/dist/index.js

@@ -49,9 +49,9 @@ __export(src_exports, {
   SingleCheckbox: () => SingleCheckbox,
   SingleSelectElement: () => SingleSelectElement,
   TableElement: () => TableElement,
+  TabsElement: () => TabsElement,
   TextElement: () => TextElement,
-  TextareaElement: () => TextareaElement,
-  UploadElement: () => UploadElement
+  TextareaElement: () => TextareaElement
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -783,92 +783,29 @@ var DateRangePickerElement = (props) => {
   return /* @__PURE__ */ import_react22.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 
-// src/Components/UploadElement.tsx
-var import_react23 = __toESM(require("react"));
-var import_antd17 = require("antd");
-var import_icons5 = require("@ant-design/icons");
-var UploadElement = (props) => {
-  const [files, setFiles] = (0, import_react23.useState)([]);
-  const uploadChange = (fileList) => {
-    console.log(fileList);
-    if (!fileList || fileList.length === 0) return;
-    const newFileList = [...files];
-    for (let i = 0; i < fileList.length; i++) {
-      const selectedFile = fileList[i];
-      const isCorrectFile = ["image/png", "image/jpg", "image/jpeg"].includes(
-        selectedFile.type
-      );
-      if (!isCorrectFile) {
-        import_antd17.Modal.error({
-          title: `(${selectedFile.name}) is an invalid file.`,
-          content: `Please upload files with the following extensions only (.png/.jpg/.jpeg)`,
-          zIndex: 1022
-        });
-        return;
-      }
-      const newFile = {
-        uid: `id${Math.random().toString(16).slice(2)}`,
-        name: selectedFile.name,
-        status: "done",
-        type: selectedFile.type,
-        size: selectedFile.size,
-        url: URL.createObjectURL(selectedFile),
-        originFileObj: selectedFile
-      };
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        if (e.target?.result) {
-          newFile.thumbUrl = e.target.result.toString();
-        }
-      };
-      reader.readAsDataURL(selectedFile);
-      newFileList.push(newFile);
-    }
-    setFiles(newFileList);
-    props.onChange && props.onChange({
-      name: props.name,
-      value: newFileList
-    });
-  };
-  return /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement(
-    import_antd17.Upload,
-    {
-      accept: props.accept,
-      listType: props.list_type,
-      maxCount: props.max_count,
-      multiple: true,
-      fileList: props.value ? props.value : [],
-      onChange: (e) => uploadChange(e.target.files),
-      showUploadList: true
-    },
-    /* @__PURE__ */ import_react23.default.createElement(import_icons5.PlusOutlined, null),
-    /* @__PURE__ */ import_react23.default.createElement("div", { style: { marginTop: 8 } }, "Upload")
-  ));
-};
-
 // src/Components/Image.tsx
-var import_react24 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var Image = (props) => {
-  return /* @__PURE__ */ import_react24.default.createElement("div", null, /* @__PURE__ */ import_react24.default.createElement("img", { className: props.className, src: props.img, alt: "image" }));
+  return /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("img", { className: props.className, src: props.img, alt: "image" }));
 };
 
 // src/Components/SingleCheckbox.tsx
-var import_react25 = __toESM(require("react"));
-var import_antd18 = require("antd");
+var import_react24 = __toESM(require("react"));
+var import_antd17 = require("antd");
 var SingleCheckbox = (props) => {
   const handleChange = (e) => {
     if (props.onChange) {
       props.onChange(e.target.checked);
     }
   };
-  return /* @__PURE__ */ import_react25.default.createElement(import_antd18.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
+  return /* @__PURE__ */ import_react24.default.createElement(import_antd17.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
 };
 
 // src/Components/MultiSelect.tsx
-var import_react26 = __toESM(require("react"));
-var import_antd19 = require("antd");
+var import_react25 = __toESM(require("react"));
+var import_antd18 = require("antd");
 var MultiSelect = (props) => {
-  const [selectedValue, setSelectedValue] = (0, import_react26.useState)({ firstValue: {}, secondValue: {} });
+  const [selectedValue, setSelectedValue] = (0, import_react25.useState)({ firstValue: {}, secondValue: {} });
   const handleFirstChange = (value) => {
     if (props.onChange) {
       const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
@@ -885,15 +822,15 @@ var MultiSelect = (props) => {
       props.onChange(selectedValue.secondValue && selectedValue);
     }
   };
-  return /* @__PURE__ */ import_react26.default.createElement("div", { className: props.className, style: { display: "flex", flexDirection: "row", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ import_react26.default.createElement(
-    import_antd19.Select,
+  return /* @__PURE__ */ import_react25.default.createElement("div", { className: props.className, style: { display: "flex", flexDirection: "row", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ import_react25.default.createElement(
+    import_antd18.Select,
     {
       onChange: handleFirstChange,
       variant: props.variant,
       options: props.options
     }
-  ), /* @__PURE__ */ import_react26.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react26.default.createElement(
-    import_antd19.Select,
+  ), /* @__PURE__ */ import_react25.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react25.default.createElement(
+    import_antd18.Select,
     {
       onChange: handleSecondChange,
       variant: props.variant,
@@ -903,16 +840,17 @@ var MultiSelect = (props) => {
 };
 
 // src/Components/FilesUpload.tsx
-var import_react27 = __toESM(require("react"));
-var import_antd20 = require("antd");
-var import_icons6 = require("@ant-design/icons");
+var import_react26 = __toESM(require("react"));
+var import_antd19 = require("antd");
+var import_icons5 = require("@ant-design/icons");
+var import_Dragger = __toESM(require("antd/es/upload/Dragger"));
 var FileUpload = (props) => {
-  const [files, setFiles] = (0, import_react27.useState)([]);
+  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_antd20.message.error(`(${file.name}) is an invalid file. Please upload files with the following extensions only (.png/.jpg/.jpeg/.pdf)`);
-      return import_antd20.Upload.LIST_IGNORE;
+      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;
   };
@@ -930,8 +868,8 @@ var FileUpload = (props) => {
       onSuccess("ok");
     }, 0);
   };
-  return /* @__PURE__ */ import_react27.default.createElement("div", null, /* @__PURE__ */ import_react27.default.createElement(
-    import_antd20.Upload,
+  return /* @__PURE__ */ import_react26.default.createElement("div", null, /* @__PURE__ */ import_react26.default.createElement(
+    import_Dragger.default,
     {
       action: "",
       accept: props.accept,
@@ -944,9 +882,18 @@ var FileUpload = (props) => {
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ import_react27.default.createElement(import_antd20.Button, { icon: /* @__PURE__ */ import_react27.default.createElement(import_icons6.UploadOutlined, null) }, "Click to Upload")
+    /* @__PURE__ */ import_react26.default.createElement("p", null, /* @__PURE__ */ import_react26.default.createElement(import_icons5.InboxOutlined, null)),
+    /* @__PURE__ */ import_react26.default.createElement("p", null, "Click or drag file to upload")
   ));
 };
+
+// src/Components/Tabs.tsx
+var import_react27 = __toESM(require("react"));
+var import_antd20 = require("antd");
+var onChange = (key) => {
+  console.log(key);
+};
+var TabsElement = (props) => /* @__PURE__ */ import_react27.default.createElement(import_antd20.Tabs, { defaultActiveKey: "1", items: props.fields, onChange });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -968,7 +915,7 @@ var FileUpload = (props) => {
   SingleCheckbox,
   SingleSelectElement,
   TableElement,
+  TabsElement,
   TextElement,
-  TextareaElement,
-  UploadElement
+  TextareaElement
 });

package/dist/index.mjs

@@ -726,77 +726,14 @@ var DateRangePickerElement = (props) => {
   return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 
-// src/Components/UploadElement.tsx
-import React23, { useState as useState7 } from "react";
-import { Upload, Modal as Modal2 } from "antd";
-import { PlusOutlined as PlusOutlined2 } from "@ant-design/icons";
-var UploadElement = (props) => {
-  const [files, setFiles] = useState7([]);
-  const uploadChange = (fileList) => {
-    console.log(fileList);
-    if (!fileList || fileList.length === 0) return;
-    const newFileList = [...files];
-    for (let i = 0; i < fileList.length; i++) {
-      const selectedFile = fileList[i];
-      const isCorrectFile = ["image/png", "image/jpg", "image/jpeg"].includes(
-        selectedFile.type
-      );
-      if (!isCorrectFile) {
-        Modal2.error({
-          title: `(${selectedFile.name}) is an invalid file.`,
-          content: `Please upload files with the following extensions only (.png/.jpg/.jpeg)`,
-          zIndex: 1022
-        });
-        return;
-      }
-      const newFile = {
-        uid: `id${Math.random().toString(16).slice(2)}`,
-        name: selectedFile.name,
-        status: "done",
-        type: selectedFile.type,
-        size: selectedFile.size,
-        url: URL.createObjectURL(selectedFile),
-        originFileObj: selectedFile
-      };
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        if (e.target?.result) {
-          newFile.thumbUrl = e.target.result.toString();
-        }
-      };
-      reader.readAsDataURL(selectedFile);
-      newFileList.push(newFile);
-    }
-    setFiles(newFileList);
-    props.onChange && props.onChange({
-      name: props.name,
-      value: newFileList
-    });
-  };
-  return /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement(
-    Upload,
-    {
-      accept: props.accept,
-      listType: props.list_type,
-      maxCount: props.max_count,
-      multiple: true,
-      fileList: props.value ? props.value : [],
-      onChange: (e) => uploadChange(e.target.files),
-      showUploadList: true
-    },
-    /* @__PURE__ */ React23.createElement(PlusOutlined2, null),
-    /* @__PURE__ */ React23.createElement("div", { style: { marginTop: 8 } }, "Upload")
-  ));
-};
-
 // src/Components/Image.tsx
-import React24 from "react";
+import React23 from "react";
 var Image = (props) => {
-  return /* @__PURE__ */ React24.createElement("div", null, /* @__PURE__ */ React24.createElement("img", { className: props.className, src: props.img, alt: "image" }));
+  return /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement("img", { className: props.className, src: props.img, alt: "image" }));
 };
 
 // src/Components/SingleCheckbox.tsx
-import React25 from "react";
+import React24 from "react";
 import { Checkbox as Checkbox2 } from "antd";
 var SingleCheckbox = (props) => {
   const handleChange = (e) => {
@@ -804,14 +741,14 @@ var SingleCheckbox = (props) => {
       props.onChange(e.target.checked);
     }
   };
-  return /* @__PURE__ */ React25.createElement(Checkbox2, { onChange: (e) => handleChange(e), className: props.className }, props.label);
+  return /* @__PURE__ */ React24.createElement(Checkbox2, { onChange: (e) => handleChange(e), className: props.className }, props.label);
 };
 
 // src/Components/MultiSelect.tsx
-import React26, { useState as useState8 } from "react";
+import React25, { useState as useState7 } from "react";
 import { Select as Select4 } from "antd";
 var MultiSelect = (props) => {
-  const [selectedValue, setSelectedValue] = useState8({ firstValue: {}, secondValue: {} });
+  const [selectedValue, setSelectedValue] = useState7({ firstValue: {}, secondValue: {} });
   const handleFirstChange = (value) => {
     if (props.onChange) {
       const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
@@ -828,14 +765,14 @@ var MultiSelect = (props) => {
       props.onChange(selectedValue.secondValue && selectedValue);
     }
   };
-  return /* @__PURE__ */ React26.createElement("div", { className: props.className, style: { display: "flex", flexDirection: "row", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React25.createElement("div", { className: props.className, style: { display: "flex", flexDirection: "row", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ React25.createElement(
     Select4,
     {
       onChange: handleFirstChange,
       variant: props.variant,
       options: props.options
     }
-  ), /* @__PURE__ */ React26.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React25.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React25.createElement(
     Select4,
     {
       onChange: handleSecondChange,
@@ -846,16 +783,17 @@ var MultiSelect = (props) => {
 };
 
 // src/Components/FilesUpload.tsx
-import React27, { useState as useState9 } from "react";
-import { Button as Button3, Upload as Upload2, message } from "antd";
-import { UploadOutlined } from "@ant-design/icons";
+import React26, { useState as useState8 } from "react";
+import { Upload, message } from "antd";
+import { InboxOutlined } from "@ant-design/icons";
+import Dragger from "antd/es/upload/Dragger";
 var FileUpload = (props) => {
-  const [files, setFiles] = useState9([]);
+  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 Upload2.LIST_IGNORE;
+      return Upload.LIST_IGNORE;
     }
     return true;
   };
@@ -873,8 +811,8 @@ var FileUpload = (props) => {
       onSuccess("ok");
     }, 0);
   };
-  return /* @__PURE__ */ React27.createElement("div", null, /* @__PURE__ */ React27.createElement(
-    Upload2,
+  return /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement(
+    Dragger,
     {
       action: "",
       accept: props.accept,
@@ -887,9 +825,18 @@ var FileUpload = (props) => {
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ React27.createElement(Button3, { icon: /* @__PURE__ */ React27.createElement(UploadOutlined, null) }, "Click to Upload")
+    /* @__PURE__ */ React26.createElement("p", null, /* @__PURE__ */ React26.createElement(InboxOutlined, null)),
+    /* @__PURE__ */ React26.createElement("p", null, "Click or drag file to upload")
   ));
 };
+
+// src/Components/Tabs.tsx
+import React27 from "react";
+import { Tabs } from "antd";
+var onChange = (key) => {
+  console.log(key);
+};
+var TabsElement = (props) => /* @__PURE__ */ React27.createElement(Tabs, { defaultActiveKey: "1", items: props.fields, onChange });
 export {
   AddMoreTable,
   ButtonElement,
@@ -910,7 +857,7 @@ export {
   SingleCheckbox,
   SingleSelectElement,
   TableElement,
+  TabsElement,
   TextElement,
-  TextareaElement,
-  UploadElement
+  TextareaElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.13-Beta75",
+  "version": "0.0.13-Beta76",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",