@apexcura/ui-components 0.0.12-Beta99 → 0.0.13-Beta0

package/dist/index.css

@@ -338,27 +338,18 @@ video {
 .m-\[10px\] {
   margin: 10px;
 }
+.flex {
+  display: flex;
+}
 .table {
   display: table;
 }
-.h-\[40px\] {
-  height: 40px;
-}
-.w-\[126px\] {
-  width: 126px;
-}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
-.rounded-full {
-  border-radius: 9999px;
-}
 .border {
   border-width: 1px;
 }
-.border-none {
-  border-style: none;
-}
 .border-\[\#919191\] {
   --tw-border-opacity: 1;
   border-color: rgb(145 145 145 / var(--tw-border-opacity));
@@ -375,10 +366,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(242 242 242 / var(--tw-bg-opacity));
 }
-.bg-purple-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
-}
 .p-\[6px\] {
   padding: 6px;
 }
@@ -392,10 +379,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
 .shadow-\[0px_0px_1px_1px_\#919191\] {
   --tw-shadow: 0px 0px 1px 1px #919191;
   --tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
@@ -412,14 +395,6 @@ video {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import React$1 from 'react';
+import { SizeType } from 'antd/es/config-provider/SizeContext';
 
 type ElementType = {
     [x: string]: any;
@@ -11,7 +12,8 @@ type ElementType = {
     disabled?: boolean;
     prefix?: React.ReactNode;
     type?: string;
-    value?: string | number | boolean | any[] | null;
+    size?: SizeType;
+    value?: string | number | boolean | any[] | null | undefined;
     status?: "error" | "warning";
     styles?: React.CSSProperties;
     variant?: "outlined" | "borderless" | "filled";
@@ -21,6 +23,7 @@ type ElementType = {
     maxLength?: number;
     fieldNames?: any[];
     fields?: any[];
+    schema?: any[];
     options?: any[];
     onChange?: (value: string | number | boolean | object | any[]) => void;
     dropDownOptions?: any[];
@@ -38,7 +41,7 @@ type ElementType = {
     primaryText?: string;
     secondaryText?: string;
     count?: number;
-    icon?: React.JSX.Element;
+    icon?: string;
     placement?: string;
     profileImage?: string;
     buttonClassName?: string;
@@ -48,6 +51,8 @@ type ElementType = {
     element?: string;
     secondTextClassName?: string;
     iconsClassName?: string;
+    labelClassName?: string;
+    containerClassName?: string;
 };
 
 interface ElementExecuterProps$3 extends ElementType {
@@ -104,4 +109,6 @@ declare const TableElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };
+declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import React$1 from 'react';
+import { SizeType } from 'antd/es/config-provider/SizeContext';
 
 type ElementType = {
     [x: string]: any;
@@ -11,7 +12,8 @@ type ElementType = {
     disabled?: boolean;
     prefix?: React.ReactNode;
     type?: string;
-    value?: string | number | boolean | any[] | null;
+    size?: SizeType;
+    value?: string | number | boolean | any[] | null | undefined;
     status?: "error" | "warning";
     styles?: React.CSSProperties;
     variant?: "outlined" | "borderless" | "filled";
@@ -21,6 +23,7 @@ type ElementType = {
     maxLength?: number;
     fieldNames?: any[];
     fields?: any[];
+    schema?: any[];
     options?: any[];
     onChange?: (value: string | number | boolean | object | any[]) => void;
     dropDownOptions?: any[];
@@ -38,7 +41,7 @@ type ElementType = {
     primaryText?: string;
     secondaryText?: string;
     count?: number;
-    icon?: React.JSX.Element;
+    icon?: string;
     placement?: string;
     profileImage?: string;
     buttonClassName?: string;
@@ -48,6 +51,8 @@ type ElementType = {
     element?: string;
     secondTextClassName?: string;
     iconsClassName?: string;
+    labelClassName?: string;
+    containerClassName?: string;
 };
 
 interface ElementExecuterProps$3 extends ElementType {
@@ -104,4 +109,6 @@ declare const TableElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };
+declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };

package/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   CheckboxElement: () => CheckboxElement,
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
+  DateRangePickerElement: () => DateRangePickerElement,
   MultipleSelectElement: () => MultipleSelectElement,
   Navbar: () => Navbar,
   NumberElement: () => NumberElement,
@@ -53,7 +54,7 @@ module.exports = __toCommonJS(src_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var TextElement = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.label && /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Input,
     {
       placeholder: props.placeholder,
@@ -189,7 +190,6 @@ var SelectElement = (props) => {
 // src/Components/RadioElement.tsx
 var import_react6 = __toESM(require("react"));
 var import_antd6 = require("antd");
-var containerClassName = " ";
 var radioDefaultStyle = "bg-[#F2F2F2] border border-[#919191] rounded-[8px] m-[10px] hover:bg-[#F2F2F2] text-center text-black shadow-[0px_0px_1px_1px_#919191]";
 var radioSelectedDefaultStyle = "bg-[#E2D6F8] border border-[#B8A4DE] rounded-[8px] p-[6px] m-[10px] shadow-[0px_0px_1px_1px_#B8A4DE] text-center text-black shadow-[0px_0px_1px_1px_#919191]";
 var RadioElement = (props) => {
@@ -208,14 +208,14 @@ var RadioElement = (props) => {
     }
   };
   const getButtonStyle = (option) => {
-    return selectedValue === option.value ? `${radioSelectedDefaultStyle} ${option.selectedClassName}` : `${radioDefaultStyle} ${option.className}`;
+    return selectedValue === option.value ? `${radioSelectedDefaultStyle} ${props.activeClassName}` : `${radioDefaultStyle} ${props.className}`;
   };
-  return /* @__PURE__ */ import_react6.default.createElement("div", { className: containerClassName }, /* @__PURE__ */ import_react6.default.createElement("p", null, props.label), /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react6.default.createElement("p", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react6.default.createElement(
     import_antd6.Radio.Group,
     {
       onChange: handleChange,
       optionType,
-      className: props.className,
+      className: props.radioGroupClassName,
       value: selectedValue
     },
     props.options && props.options.map((option) => /* @__PURE__ */ import_react6.default.createElement(
@@ -388,25 +388,24 @@ var MultipleSelectElement = (props) => {
 
 // src/Components/Button.tsx
 var import_react12 = __toESM(require("react"));
-var import_antd10 = require("antd");
-var defaultClassName = "w-[126px] h-[40px] bg-purple-800 text-white rounded-full shadow-lg submit border-none";
 var ButtonElement = (props) => {
   const handleClick = typeof props.action === "string" ? () => {
     console.log("Performing action:", props.action);
   } : props.action;
   return /* @__PURE__ */ import_react12.default.createElement(
-    import_antd10.Button,
+    "button",
     {
       onClick: handleClick,
-      className: `${defaultClassName} ${props.className ? props.className : ""}`
+      className: `${props.className ? props.className : ""}`
     },
+    props.icon && /* @__PURE__ */ import_react12.default.createElement("img", { src: props.icon }),
     props.label
   );
 };
 
 // src/Components/AddMoreTable.tsx
 var import_react13 = __toESM(require("react"));
-var import_antd11 = require("antd");
+var import_antd10 = require("antd");
 var import_icons2 = require("@ant-design/icons");
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
@@ -501,13 +500,13 @@ var AddMoreTable = (props) => {
     eachRow.variable_data.forEach((variable, subIndex) => {
       Object.keys(variable).forEach((key) => {
         if (key === "SubRows") {
-          rowData[`${key}`] = /* @__PURE__ */ import_react13.default.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
+          rowData[`${key}`] = /* @__PURE__ */ import_react13.default.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
         } else {
           rowData[`${key}`] = renderInputElement(variable[key]);
         }
       });
     });
-    rowData.actions = /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
+    rowData.actions = /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
     console.log("=====rowdata", rowData);
     return rowData;
   });
@@ -524,7 +523,7 @@ var AddMoreTable = (props) => {
     });
   }
   return /* @__PURE__ */ import_react13.default.createElement(
-    import_antd11.Table,
+    import_antd10.Table,
     {
       columns,
       dataSource,
@@ -545,7 +544,7 @@ var Sidebar = (props) => {
   return /* @__PURE__ */ import_react14.default.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react14.default.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
     return /* @__PURE__ */ import_react14.default.createElement("li", { onClick: () => {
       handleChange(item);
-    }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ import_react14.default.createElement("p", null, item.icon), /* @__PURE__ */ import_react14.default.createElement("p", null, item.label));
+    }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ import_react14.default.createElement("img", { src: item.icon, className: props.className }), /* @__PURE__ */ import_react14.default.createElement("p", null, item.label));
   })));
 };
 
@@ -554,25 +553,25 @@ var import_react18 = __toESM(require("react"));
 
 // src/Components/Notification.tsx
 var import_react15 = __toESM(require("react"));
-var import_antd12 = require("antd");
+var import_antd11 = require("antd");
 var import_io = require("react-icons/io");
 var popoverContentStyle = {
   minWidth: "300px",
   maxWidth: "100%"
 };
 var Notification = (props) => /* @__PURE__ */ import_react15.default.createElement(
-  import_antd12.Popover,
+  import_antd11.Popover,
   {
     className: props.className,
     content: /* @__PURE__ */ import_react15.default.createElement("div", { style: popoverContentStyle }, " ", /* @__PURE__ */ import_react15.default.createElement(
-      import_antd12.List,
+      import_antd11.List,
       {
         itemLayout: "horizontal",
         dataSource: props.items,
-        renderItem: (item, index) => /* @__PURE__ */ import_react15.default.createElement(import_antd12.List.Item, { key: item.text }, /* @__PURE__ */ import_react15.default.createElement(
-          import_antd12.List.Item.Meta,
+        renderItem: (item, index) => /* @__PURE__ */ import_react15.default.createElement(import_antd11.List.Item, { key: item.text }, /* @__PURE__ */ import_react15.default.createElement(
+          import_antd11.List.Item.Meta,
           {
-            avatar: /* @__PURE__ */ import_react15.default.createElement(import_antd12.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
+            avatar: /* @__PURE__ */ import_react15.default.createElement(import_antd11.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
             title: item.text,
             description: item.time
           }
@@ -582,7 +581,7 @@ var Notification = (props) => /* @__PURE__ */ import_react15.default.createEleme
     trigger: "focus",
     placement: "bottomRight"
   },
-  /* @__PURE__ */ import_react15.default.createElement(import_antd12.Button, { className: props.buttonClassName }, /* @__PURE__ */ import_react15.default.createElement(import_antd12.Badge, { size: "small", count: props.count }, /* @__PURE__ */ import_react15.default.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ import_react15.default.createElement(import_io.IoIosNotifications, null))))
+  /* @__PURE__ */ import_react15.default.createElement(import_antd11.Button, { className: props.buttonClassName }, /* @__PURE__ */ import_react15.default.createElement(import_antd11.Badge, { size: "small", count: props.count }, /* @__PURE__ */ import_react15.default.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ import_react15.default.createElement(import_io.IoIosNotifications, null))))
 );
 
 // src/Components/SpanElement.tsx
@@ -591,9 +590,9 @@ var SpanElement = (props) => /* @__PURE__ */ import_react16.default.createElemen
 
 // src/Components/Profile.tsx
 var import_react17 = __toESM(require("react"));
-var import_antd13 = require("antd");
+var import_antd12 = require("antd");
 var import_icons3 = require("@ant-design/icons");
-var Profile = (props) => /* @__PURE__ */ import_react17.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react17.default.createElement(import_antd13.Avatar, { style: { backgroundColor: "#87d068", marginRight: "10px" }, icon: /* @__PURE__ */ import_react17.default.createElement(import_icons3.UserOutlined, null) }), /* @__PURE__ */ import_react17.default.createElement("div", { className: props.profileSubClassName }, /* @__PURE__ */ import_react17.default.createElement("p", null, props.primaryText), /* @__PURE__ */ import_react17.default.createElement("p", { className: props.secondTextClassName }, " ", props.secondaryText)));
+var Profile = (props) => /* @__PURE__ */ import_react17.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react17.default.createElement(import_antd12.Avatar, { style: { backgroundColor: "#87d068", marginRight: "10px" }, icon: /* @__PURE__ */ import_react17.default.createElement(import_icons3.UserOutlined, null) }), /* @__PURE__ */ import_react17.default.createElement("div", { className: props.profileSubClassName }, /* @__PURE__ */ import_react17.default.createElement("p", null, props.primaryText), /* @__PURE__ */ import_react17.default.createElement("p", { className: props.secondTextClassName }, " ", props.secondaryText)));
 
 // src/Components/Navbar.tsx
 var Navbar = (props) => {
@@ -610,31 +609,198 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-var import_react19 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var import_antd14 = require("antd");
+
+// src/Components/Model.tsx
+var import_react20 = __toESM(require("react"));
+var import_antd13 = require("antd");
+
+// src/Components/ModelBody.tsx
+var import_react19 = __toESM(require("react"));
+var ModelBody = (props) => {
+  return /* @__PURE__ */ import_react19.default.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map((eachField) => {
+    if (eachField.element === "div") {
+      return /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, eachField.label);
+    } else if (eachField.element === "input-radio") {
+      return /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react19.default.createElement(RadioElement, { ...eachField }));
+    } else if (eachField.element === "button") {
+      return /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react19.default.createElement(ButtonElement, { ...eachField }));
+    } else {
+      return null;
+    }
+  }));
+};
+
+// src/Components/Model.tsx
+var ModelElement = (props) => {
+  const { model, onCancel, selectedRecord, columns } = props;
+  return /* @__PURE__ */ import_react20.default.createElement(
+    import_antd13.Modal,
+    {
+      centered: true,
+      open: model,
+      onCancel,
+      footer: null,
+      width: 850,
+      title: /* @__PURE__ */ import_react20.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexWrap: "wrap",
+            padding: "20px",
+            width: "full",
+            margin: "-10px"
+          }
+        },
+        Object.entries(selectedRecord).map(([key, value]) => {
+          const record = columns.filter((eachColumn) => eachColumn.key === key);
+          return record.length > 0 ? /* @__PURE__ */ import_react20.default.createElement("p", { style: { fontWeight: "500", padding: "10px" }, key }, /* @__PURE__ */ import_react20.default.createElement("span", { style: { fontWeight: "200", color: "gray", paddingRight: "10px" } }, record[0].title), String(value)) : "";
+        })
+      )
+    },
+    /* @__PURE__ */ import_react20.default.createElement(ModelBody, { ...props })
+  );
+};
+
+// src/Components/TableElement.tsx
 var TableElement = (props) => {
   const { thead, tbody } = props;
-  console.log("thead-----", thead);
-  console.log("tbody------", tbody);
-  const columns = thead && thead.map((col) => ({
-    title: col.label,
-    dataIndex: col.name,
-    key: col.key
+  const [selectedRecord, setSelectedRecord] = (0, import_react21.useState)({});
+  const [model, setModel] = (0, import_react21.useState)(false);
+  const handleChange = (record) => {
+    if (props.onChange) {
+      props.onChange(record);
+    }
+  };
+  let columns = [];
+  if (thead) {
+    columns = [
+      {
+        title: "#",
+        dataIndex: "#",
+        key: "#"
+      },
+      ...thead.map((col, ind) => ({
+        title: col.label,
+        dataIndex: col.name,
+        key: col.key,
+        sorter: {
+          compare: (a, b) => {
+            if (typeof a[col.key] === "number" && typeof a[col.key] === "number") {
+              return a[col.key] - b[col.key];
+            } else if (typeof a[col.key] === "string" && typeof a[col.key] === "string") {
+              return a[col.key].localeCompare(b[col.key]);
+            }
+          }
+        }
+      }))
+    ];
+  }
+  const dataSource = tbody && tbody.map((row, index) => ({
+    ...row,
+    [columns[0].key]: index + 1
   }));
-  return /* @__PURE__ */ import_react19.default.createElement(import_antd14.Table, { dataSource: tbody, columns, bordered: true, pagination: false });
+  const count = dataSource ? dataSource.length : 0;
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
+    import_antd14.Table,
+    {
+      pagination: {
+        showTotal: (total) => `Total: ${total} items`,
+        total: count,
+        showSizeChanger: count > 10
+      },
+      dataSource,
+      columns,
+      bordered: true,
+      size: props.size && props.size,
+      onRow: (record) => {
+        return {
+          onClick: () => {
+            setSelectedRecord(record);
+            handleChange(record);
+            setModel(true);
+          },
+          style: { cursor: "pointer" }
+        };
+      }
+    }
+  ), model && /* @__PURE__ */ import_react21.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
 
 // src/Components/DatePicker.tsx
-var import_react20 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_antd15 = require("antd");
 var import_icons4 = require("@ant-design/icons");
+var import_moment = __toESM(require("moment"));
 var DatePickerElement = (props) => {
-  const handleChange = (value) => {
+  const [date, setDate] = (0, import_react22.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);
+      if (props.onChange) {
+        props.onChange(formattedDate);
+      }
+    } else {
+      setDate(null);
+      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(value);
+      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_react22.default.createElement("div", null, /* @__PURE__ */ import_react22.default.createElement("button", { onClick: onHandleDecrement }, /* @__PURE__ */ import_react22.default.createElement(import_icons4.LeftOutlined, null)), /* @__PURE__ */ import_react22.default.createElement(
+    import_antd15.DatePicker,
+    {
+      placeholder: props.placeholder,
+      value: date,
+      variant: "borderless",
+      onChange: handleChange
+    }
+  ), /* @__PURE__ */ import_react22.default.createElement("button", { onClick: onHandleIncrement }, /* @__PURE__ */ import_react22.default.createElement(import_icons4.RightOutlined, null)));
+};
+
+// src/Components/DateRangePickerElement.tsx
+var import_react23 = __toESM(require("react"));
+var import_antd16 = require("antd");
+var import_dayjs = __toESM(require("dayjs"));
+var DateRangePickerElement = (props) => {
+  const { RangePicker } = import_antd16.DatePicker;
+  const handleChange = (dates, dateStrings) => {
+    if (dates && props.onChange) {
+      props.onChange(dateStrings);
+    } else {
+      console.log("Clear");
     }
   };
-  return /* @__PURE__ */ import_react20.default.createElement("div", null, /* @__PURE__ */ import_react20.default.createElement(import_icons4.LeftOutlined, null), /* @__PURE__ */ import_react20.default.createElement(import_antd15.DatePicker, { placeholder: props.placeholder, variant: "borderless", value: props.value, nextIcon: true, prevIcon: true, onChange: handleChange }), /* @__PURE__ */ import_react20.default.createElement(import_icons4.RightOutlined, null));
+  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)()] }
+  ];
+  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -643,6 +809,7 @@ var DatePickerElement = (props) => {
   CheckboxElement,
   CkEditor,
   DatePickerElement,
+  DateRangePickerElement,
   MultipleSelectElement,
   Navbar,
   NumberElement,

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import React from "react";
 import { Input as AntInput } from "antd";
 var TextElement = (props) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.label && /* @__PURE__ */ React.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ React.createElement(
     AntInput,
     {
       placeholder: props.placeholder,
@@ -138,7 +138,6 @@ var SelectElement = (props) => {
 // src/Components/RadioElement.tsx
 import React6, { useState as useState2 } from "react";
 import { Radio } from "antd";
-var containerClassName = " ";
 var radioDefaultStyle = "bg-[#F2F2F2] border border-[#919191] rounded-[8px] m-[10px] hover:bg-[#F2F2F2] text-center text-black shadow-[0px_0px_1px_1px_#919191]";
 var radioSelectedDefaultStyle = "bg-[#E2D6F8] border border-[#B8A4DE] rounded-[8px] p-[6px] m-[10px] shadow-[0px_0px_1px_1px_#B8A4DE] text-center text-black shadow-[0px_0px_1px_1px_#919191]";
 var RadioElement = (props) => {
@@ -157,14 +156,14 @@ var RadioElement = (props) => {
     }
   };
   const getButtonStyle = (option) => {
-    return selectedValue === option.value ? `${radioSelectedDefaultStyle} ${option.selectedClassName}` : `${radioDefaultStyle} ${option.className}`;
+    return selectedValue === option.value ? `${radioSelectedDefaultStyle} ${props.activeClassName}` : `${radioDefaultStyle} ${props.className}`;
   };
-  return /* @__PURE__ */ React6.createElement("div", { className: containerClassName }, /* @__PURE__ */ React6.createElement("p", null, props.label), /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React6.createElement("p", { className: props.labelClassName }, props.label), /* @__PURE__ */ React6.createElement(
     Radio.Group,
     {
       onChange: handleChange,
       optionType,
-      className: props.className,
+      className: props.radioGroupClassName,
       value: selectedValue
     },
     props.options && props.options.map((option) => /* @__PURE__ */ React6.createElement(
@@ -337,25 +336,24 @@ var MultipleSelectElement = (props) => {
 
 // src/Components/Button.tsx
 import React11 from "react";
-import { Button as Button2 } from "antd";
-var defaultClassName = "w-[126px] h-[40px] bg-purple-800 text-white rounded-full shadow-lg submit border-none";
 var ButtonElement = (props) => {
   const handleClick = typeof props.action === "string" ? () => {
     console.log("Performing action:", props.action);
   } : props.action;
   return /* @__PURE__ */ React11.createElement(
-    Button2,
+    "button",
     {
       onClick: handleClick,
-      className: `${defaultClassName} ${props.className ? props.className : ""}`
+      className: `${props.className ? props.className : ""}`
     },
+    props.icon && /* @__PURE__ */ React11.createElement("img", { src: props.icon }),
     props.label
   );
 };
 
 // src/Components/AddMoreTable.tsx
 import React12, { useEffect, useState as useState4 } from "react";
-import { Table, Button as Button3 } from "antd";
+import { Table, Button as Button2 } from "antd";
 import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
@@ -450,13 +448,13 @@ var AddMoreTable = (props) => {
     eachRow.variable_data.forEach((variable, subIndex) => {
       Object.keys(variable).forEach((key) => {
         if (key === "SubRows") {
-          rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+          rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
         } else {
           rowData[`${key}`] = renderInputElement(variable[key]);
         }
       });
     });
-    rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+    rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
     console.log("=====rowdata", rowData);
     return rowData;
   });
@@ -494,7 +492,7 @@ var Sidebar = (props) => {
   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("p", null, item.icon), /* @__PURE__ */ React13.createElement("p", null, item.label));
+    }, 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));
   })));
 };
 
@@ -503,7 +501,7 @@ import React17 from "react";
 
 // src/Components/Notification.tsx
 import React14 from "react";
-import { Popover, Badge, Button as Button4, Avatar, List } from "antd";
+import { Popover, Badge, Button as Button3, Avatar, List } from "antd";
 import { IoIosNotifications } from "react-icons/io";
 var popoverContentStyle = {
   minWidth: "300px",
@@ -531,7 +529,7 @@ var Notification = (props) => /* @__PURE__ */ React14.createElement(
     trigger: "focus",
     placement: "bottomRight"
   },
-  /* @__PURE__ */ React14.createElement(Button4, { className: props.buttonClassName }, /* @__PURE__ */ React14.createElement(Badge, { size: "small", count: props.count }, /* @__PURE__ */ React14.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ React14.createElement(IoIosNotifications, null))))
+  /* @__PURE__ */ React14.createElement(Button3, { className: props.buttonClassName }, /* @__PURE__ */ React14.createElement(Badge, { size: "small", count: props.count }, /* @__PURE__ */ React14.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ React14.createElement(IoIosNotifications, null))))
 );
 
 // src/Components/SpanElement.tsx
@@ -559,31 +557,198 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import React18 from "react";
+import React20, { useState as useState5 } from "react";
 import { Table as Table2 } from "antd";
+
+// src/Components/Model.tsx
+import React19 from "react";
+import { Modal } from "antd";
+
+// src/Components/ModelBody.tsx
+import React18 from "react";
+var ModelBody = (props) => {
+  return /* @__PURE__ */ React18.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map((eachField) => {
+    if (eachField.element === "div") {
+      return /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, eachField.label);
+    } else if (eachField.element === "input-radio") {
+      return /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, /* @__PURE__ */ React18.createElement(RadioElement, { ...eachField }));
+    } else if (eachField.element === "button") {
+      return /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, /* @__PURE__ */ React18.createElement(ButtonElement, { ...eachField }));
+    } else {
+      return null;
+    }
+  }));
+};
+
+// src/Components/Model.tsx
+var ModelElement = (props) => {
+  const { model, onCancel, selectedRecord, columns } = props;
+  return /* @__PURE__ */ React19.createElement(
+    Modal,
+    {
+      centered: true,
+      open: model,
+      onCancel,
+      footer: null,
+      width: 850,
+      title: /* @__PURE__ */ React19.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexWrap: "wrap",
+            padding: "20px",
+            width: "full",
+            margin: "-10px"
+          }
+        },
+        Object.entries(selectedRecord).map(([key, value]) => {
+          const record = columns.filter((eachColumn) => eachColumn.key === key);
+          return record.length > 0 ? /* @__PURE__ */ React19.createElement("p", { style: { fontWeight: "500", padding: "10px" }, key }, /* @__PURE__ */ React19.createElement("span", { style: { fontWeight: "200", color: "gray", paddingRight: "10px" } }, record[0].title), String(value)) : "";
+        })
+      )
+    },
+    /* @__PURE__ */ React19.createElement(ModelBody, { ...props })
+  );
+};
+
+// src/Components/TableElement.tsx
 var TableElement = (props) => {
   const { thead, tbody } = props;
-  console.log("thead-----", thead);
-  console.log("tbody------", tbody);
-  const columns = thead && thead.map((col) => ({
-    title: col.label,
-    dataIndex: col.name,
-    key: col.key
+  const [selectedRecord, setSelectedRecord] = useState5({});
+  const [model, setModel] = useState5(false);
+  const handleChange = (record) => {
+    if (props.onChange) {
+      props.onChange(record);
+    }
+  };
+  let columns = [];
+  if (thead) {
+    columns = [
+      {
+        title: "#",
+        dataIndex: "#",
+        key: "#"
+      },
+      ...thead.map((col, ind) => ({
+        title: col.label,
+        dataIndex: col.name,
+        key: col.key,
+        sorter: {
+          compare: (a, b) => {
+            if (typeof a[col.key] === "number" && typeof a[col.key] === "number") {
+              return a[col.key] - b[col.key];
+            } else if (typeof a[col.key] === "string" && typeof a[col.key] === "string") {
+              return a[col.key].localeCompare(b[col.key]);
+            }
+          }
+        }
+      }))
+    ];
+  }
+  const dataSource = tbody && tbody.map((row, index) => ({
+    ...row,
+    [columns[0].key]: index + 1
   }));
-  return /* @__PURE__ */ React18.createElement(Table2, { dataSource: tbody, columns, bordered: true, pagination: false });
+  const count = dataSource ? dataSource.length : 0;
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+    Table2,
+    {
+      pagination: {
+        showTotal: (total) => `Total: ${total} items`,
+        total: count,
+        showSizeChanger: count > 10
+      },
+      dataSource,
+      columns,
+      bordered: true,
+      size: props.size && props.size,
+      onRow: (record) => {
+        return {
+          onClick: () => {
+            setSelectedRecord(record);
+            handleChange(record);
+            setModel(true);
+          },
+          style: { cursor: "pointer" }
+        };
+      }
+    }
+  ), model && /* @__PURE__ */ React20.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
 
 // src/Components/DatePicker.tsx
-import React19 from "react";
+import React21, { useState as useState6 } from "react";
 import { DatePicker } from "antd";
 import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import moment from "moment";
 var DatePickerElement = (props) => {
-  const handleChange = (value) => {
+  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);
+      if (props.onChange) {
+        props.onChange(formattedDate);
+      }
+    } else {
+      setDate(null);
+      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(value);
+      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(
+    DatePicker,
+    {
+      placeholder: props.placeholder,
+      value: date,
+      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 as Space2 } from "antd";
+import dayjs from "dayjs";
+var DateRangePickerElement = (props) => {
+  const { RangePicker } = DatePicker2;
+  const handleChange = (dates, dateStrings) => {
+    if (dates && props.onChange) {
+      props.onChange(dateStrings);
+    } else {
+      console.log("Clear");
     }
   };
-  return /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement(LeftOutlined, null), /* @__PURE__ */ React19.createElement(DatePicker, { placeholder: props.placeholder, variant: "borderless", value: props.value, nextIcon: true, prevIcon: true, onChange: handleChange }), /* @__PURE__ */ React19.createElement(RightOutlined, null));
+  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()] }
+  ];
+  return /* @__PURE__ */ React22.createElement(Space2, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 export {
   AddMoreTable,
@@ -591,6 +756,7 @@ export {
   CheckboxElement,
   CkEditor,
   DatePickerElement,
+  DateRangePickerElement,
   MultipleSelectElement,
   Navbar,
   NumberElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.12-Beta99",
+  "version": "0.0.13-Beta0",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",
@@ -48,9 +48,12 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
+    "@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",
+    "moment": "^2.30.1",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "react-icons": "^5.2.1",