npm - @apexcura/ui-components - Versions diffs - 0.0.14-Beta302 → 0.0.14-Beta304 - Mend

@apexcura/ui-components 0.0.14-Beta302 → 0.0.14-Beta304

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.css CHANGED Viewed

@@ -338,6 +338,9 @@ video {
 .fixed {
   position: fixed;
 }
+.m-10 {
+  margin: 2.5rem;
+}
 .m-\[10px\] {
   margin: 10px;
 }
@@ -350,12 +353,18 @@ video {
 .grid {
   display: grid;
 }
+.flex-col {
+  flex-direction: column;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
 .border {
   border-width: 1px;
 }
+.border-4 {
+  border-width: 4px;
+}
 .border-\[\#919191\] {
   --tw-border-opacity: 1;
   border-color: rgb(145 145 145 / var(--tw-border-opacity));
@@ -372,12 +381,22 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(242 242 242 / var(--tw-bg-opacity));
 }
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+.p-10 {
+  padding: 2.5rem;
+}
 .p-\[6px\] {
   padding: 6px;
 }
 .text-center {
   text-align: center;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .italic {
   font-style: italic;
 }

package/dist/index.d.mts CHANGED Viewed

@@ -72,11 +72,6 @@ type ElementType = {
     pagination?: boolean;
     is_detail?: boolean;
     dateTime?: string;
-    minRows?: number;
-    maxRows?: number;
-    mode?: "multiple" | "tags" | undefined;
-    picker?: "date" | "week" | "month" | "quarter" | "year";
-    weekrange?: boolean;
 };
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -106,7 +101,7 @@ declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
 declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
-declare const Sidebar: React$1.FC;
+declare const Sidebar: (props: ElementType) => React$1.JSX.Element;
 declare const Navbar: (props: ElementType) => React$1.JSX.Element;
@@ -144,8 +139,4 @@ declare const DoubleBarChart: (props: ElementType) => React$1.JSX.Element;
 declare const BarChart: (props: ElementType) => React$1.JSX.Element;
-declare const DivContainer: (props: ElementType) => React$1.JSX.Element;
-declare const ColorPickerElement: (props: ElementType) => React$1.JSX.Element;
-export { AddMoreTable, BarChart, ButtonElement, CheckboxElement, CircleDonut, CkEditor, ColorPickerElement, DatePickerElement, DateRangePickerElement, DivContainer, DoubleBarChart, DropDownGroup, FileUpload, HorizontalBarChart, Image, LineChart, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, SemiCircleDonut, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+export { AddMoreTable, BarChart, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DoubleBarChart, DropDownGroup, FileUpload, HorizontalBarChart, Image, LineChart, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, SemiCircleDonut, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.d.ts CHANGED Viewed

@@ -72,11 +72,6 @@ type ElementType = {
     pagination?: boolean;
     is_detail?: boolean;
     dateTime?: string;
-    minRows?: number;
-    maxRows?: number;
-    mode?: "multiple" | "tags" | undefined;
-    picker?: "date" | "week" | "month" | "quarter" | "year";
-    weekrange?: boolean;
 };
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -106,7 +101,7 @@ declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
 declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
-declare const Sidebar: React$1.FC;
+declare const Sidebar: (props: ElementType) => React$1.JSX.Element;
 declare const Navbar: (props: ElementType) => React$1.JSX.Element;
@@ -144,8 +139,4 @@ declare const DoubleBarChart: (props: ElementType) => React$1.JSX.Element;
 declare const BarChart: (props: ElementType) => React$1.JSX.Element;
-declare const DivContainer: (props: ElementType) => React$1.JSX.Element;
-declare const ColorPickerElement: (props: ElementType) => React$1.JSX.Element;
-export { AddMoreTable, BarChart, ButtonElement, CheckboxElement, CircleDonut, CkEditor, ColorPickerElement, DatePickerElement, DateRangePickerElement, DivContainer, DoubleBarChart, DropDownGroup, FileUpload, HorizontalBarChart, Image, LineChart, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, SemiCircleDonut, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+export { AddMoreTable, BarChart, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DoubleBarChart, DropDownGroup, FileUpload, HorizontalBarChart, Image, LineChart, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, SemiCircleDonut, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.js CHANGED Viewed

@@ -36,10 +36,8 @@ __export(src_exports, {
   CheckboxElement: () => CheckboxElement,
   CircleDonut: () => CircleDonut,
   CkEditor: () => CkEditor,
-  ColorPickerElement: () => ColorPickerElement,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
-  DivContainer: () => DivContainer,
   DoubleBarChart: () => DoubleBarChart,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
@@ -167,19 +165,20 @@ var TextareaElement = (props) => {
       props.onChange(e.target.value);
     }
   };
-  const defaultMinRows = 2;
-  const defaultMaxRows = 6;
   return /* @__PURE__ */ import_react4.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react4.default.createElement(
     TextArea,
     {
       placeholder: props.placeholder,
       allowClear: true,
+      defaultValue: props.defaultValue,
       disabled: props.disabled,
       id: props.name,
-      autoSize: { minRows: props.minRows ? props.minRows : defaultMinRows, maxRows: props.maxRows ? props.maxRows : defaultMaxRows },
+      status: props.status,
       className: props.className,
+      variant: props.variant,
       name: props.name,
       showCount: true,
+      maxLength: props.maxLength,
       onChange: (e) => {
         handleChange(e);
       }
@@ -195,9 +194,11 @@ var filterOptions = (input, option) => {
 };
 var SelectElement = (props) => {
   const handleChange = (value) => {
+    console.log("++=====", typeof value);
     if (props.onChange) {
       if (typeof value === "string") {
         const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
+        console.log(filterOption2);
         props.onChange(filterOption2);
       } else {
         const selectedOptions = value ? value.map((eachVal) => {
@@ -207,7 +208,7 @@ var SelectElement = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ import_react5.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: props.name, className: props.className }, props.label), /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col p-10 m-10" }, props.label && /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: props.name, className: "font-semibold text-default-400 text-red bg-green-500 border-4" }, props.label), /* @__PURE__ */ import_react5.default.createElement(
     import_antd5.Select,
     {
       options: props.options,
@@ -216,8 +217,7 @@ var SelectElement = (props) => {
       filterOption: filterOptions,
       showSearch: true,
       className: props.className,
-      onChange: handleChange,
-      mode: props.mode
+      onChange: handleChange
     }
   ));
 };
@@ -232,6 +232,7 @@ var RadioElement = (props) => {
   const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
   const optionType = props.optionType === "button" ? "button" : void 0;
   const handleChange = (option) => {
+    console.log(option);
     setSelectedValue(option);
     setIsDisabled(true);
     if (props.onChange) {
@@ -283,7 +284,7 @@ var CheckboxElement = (props) => {
     }
   };
   const onHandleAllChanges = (e) => {
-    const newList = e.target.checked ? props.options : [""];
+    const newList = e.target.checked ? props.options : [];
     setCheckedList(newList);
     if (props.onChange) {
       props.onChange(newList);
@@ -323,6 +324,7 @@ var CkEditor = (props) => {
 var import_react9 = __toESM(require("react"));
 var import_antd8 = require("antd");
 var onSearch = (value) => {
+  console.log("search:", value);
 };
 var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
 var SingleSelectElement = (props) => {
@@ -603,6 +605,7 @@ var AddMoreTable = (props) => {
     });
   };
   (0, import_react13.useEffect)(() => {
+    console.log(rows);
   }, [rows]);
   const renderInputElement = (element, value) => {
     if (!element) return null;
@@ -662,12 +665,26 @@ var AddMoreTable = (props) => {
 // src/Components/Sidebar.tsx
 var import_react14 = __toESM(require("react"));
-var Sidebar = () => {
-  const [navToggle, setNavToggle] = (0, import_react14.useState)(false);
-  const [footerToggle, setFooterToggle] = (0, import_react14.useState)(false);
-  const handleNavToggle = () => setNavToggle(!navToggle);
-  const handleFooterToggle = () => setFooterToggle(!footerToggle);
-  return /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-bar" }, /* @__PURE__ */ import_react14.default.createElement("input", { id: "nav-toggle", type: "checkbox", checked: navToggle, onChange: handleNavToggle }), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-header" }, /* @__PURE__ */ import_react14.default.createElement("a", { id: "nav-title", href: "https://codepen.io", target: "_blank", rel: "noopener noreferrer" }, "C", /* @__PURE__ */ import_react14.default.createElement("i", { className: "fab fa-codepen" }), "DEPEN"), /* @__PURE__ */ import_react14.default.createElement("label", { htmlFor: "nav-toggle" }, /* @__PURE__ */ import_react14.default.createElement("span", { id: "nav-toggle-burger" })), /* @__PURE__ */ import_react14.default.createElement("hr", null)), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-content" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-palette" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Your Work")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-images" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Assets")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-thumbtack" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Pinned Items")), /* @__PURE__ */ import_react14.default.createElement("hr", null), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-heart" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Following")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-chart-line" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Trending")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-fire" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Challenges")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-magic" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Spark")), /* @__PURE__ */ import_react14.default.createElement("hr", null), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-gem" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Codepen Pro")), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-content-highlight" })), /* @__PURE__ */ import_react14.default.createElement("input", { id: "nav-footer-toggle", type: "checkbox", checked: footerToggle, onChange: handleFooterToggle }), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer" }, /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-heading" }, /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-avatar" }, /* @__PURE__ */ import_react14.default.createElement("img", { src: "https://gravatar.com/avatar/4474ca42d303761c2901fa819c4f2547", alt: "avatar" })), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-titlebox" }, /* @__PURE__ */ import_react14.default.createElement("a", { id: "nav-footer-title", href: "https://codepen.io/uahnbu/pens/public", target: "_blank", rel: "noopener noreferrer" }, "uahnbu"), /* @__PURE__ */ import_react14.default.createElement("span", { id: "nav-footer-subtitle" }, "Admin")), /* @__PURE__ */ import_react14.default.createElement("label", { htmlFor: "nav-footer-toggle" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-caret-up" }))), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")));
+var Sidebar = (props) => {
+  const handleChange = (item) => {
+    if (props.onChange) {
+      props.onChange(item);
+    }
+  };
+  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, { key: props.name }, /* @__PURE__ */ import_react14.default.createElement("div", { className: props.imgClassName }, /* @__PURE__ */ import_react14.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react14.default.createElement("div", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, { key: item.label }, /* @__PURE__ */ import_react14.default.createElement(
+      ButtonElement,
+      {
+        ...item,
+        className: item.active ? props.activeClassName : props.className,
+        iconsClassName: props.iconsClassName,
+        onClick: (e) => {
+          e.preventDefault();
+          handleChange(item);
+        }
+      }
+    ));
+  })));
 };
 // src/Components/Navbar.tsx
@@ -733,9 +750,11 @@ var Navbar = (props) => {
 // src/Components/TableElement.tsx
 var import_react19 = __toESM(require("react"));
 var import_antd13 = require("antd");
+var import_icons5 = require("@ant-design/icons");
 var TableElement = (props) => {
   const { thead, tbody } = props;
   const [dataSource, setDataSource] = (0, import_react19.useState)([]);
+  const defaultVal = props.value;
   (0, import_react19.useEffect)(() => {
     if (tbody) {
       setDataSource(
@@ -747,6 +766,13 @@ var TableElement = (props) => {
       );
     }
   }, [tbody]);
+  const handleChange = (record) => {
+    if (record) {
+      props.onChange && props.onChange(record);
+    } else {
+      props.onChange && props.onChange(defaultVal);
+    }
+  };
   let columns = [];
   if (thead) {
     columns = [
@@ -773,6 +799,26 @@ var TableElement = (props) => {
         }
       }))
     ];
+    if (props.view) {
+      columns.push({
+        title: "View",
+        dataIndex: "View",
+        key: "View",
+        render: (_, record) => {
+          return /* @__PURE__ */ import_react19.default.createElement(
+            "a",
+            {
+              onClick: () => {
+                if (props.view) {
+                  handleChange(record);
+                }
+              }
+            },
+            /* @__PURE__ */ import_react19.default.createElement(import_icons5.EyeOutlined, null)
+          );
+        }
+      });
+    }
   }
   const onChangeTable = (pagination, filters, sorter, extra) => {
     if (extra && extra.currentDataSource) {
@@ -791,6 +837,11 @@ var TableElement = (props) => {
   };
   const rowSelectionConfig = props.rowSelection ? {
     onChange: (selectedRowKeys, selectedRows) => {
+      console.log(
+        `selectedRowKeys: ${selectedRowKeys}`,
+        "selectedRows: ",
+        selectedRows
+      );
       if (props.onChange) {
         props.onChange(selectedRows);
       }
@@ -808,6 +859,16 @@ var TableElement = (props) => {
         showSizeChanger: props.count ? props.count > 10 : 0 > 10,
         onChange: onChangePage
       } : false,
+      onRow: (record) => {
+        return {
+          onClick: () => {
+            if (props.view) {
+              handleChange(record);
+            }
+          },
+          style: { cursor: "pointer" }
+        };
+      },
       rowSelection: rowSelectionConfig,
       dataSource,
       columns,
@@ -826,15 +887,16 @@ var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat.j
 var import_moment = __toESM(require("moment"));
 import_dayjs.default.extend(import_customParseFormat.default);
 var DatePickerElement = (props) => {
-  const [dateState, setDateState] = (0, import_react20.useState)(null);
+  const [dateState, setDateState] = (0, import_react20.useState)("");
   const handleChange = (date, dateString) => {
     if (date) {
+      const formattedDate = dateString;
       setDateState(date);
       if (props.onChange) {
-        props.onChange(dateString);
+        props.onChange(formattedDate);
       }
     } else {
-      setDateState(null);
+      setDateState("");
       if (props.onChange) {
         props.onChange("");
       }
@@ -849,9 +911,8 @@ var DatePickerElement = (props) => {
       disabledDate,
       placeholder: props.placeholder,
       value: dateState,
-      format: "DD-MM-YYYY",
-      onChange: handleChange,
-      picker: props.picker
+      format: { format: "DD-MM-YYYY" },
+      onChange: handleChange
     }
   ));
 };
@@ -860,59 +921,34 @@ var DatePickerElement = (props) => {
 var import_react21 = __toESM(require("react"));
 var import_antd15 = require("antd");
 var import_dayjs2 = __toESM(require("dayjs"));
+var import_moment2 = __toESM(require("moment"));
 var DateRangePickerElement = (props) => {
   const { value } = props;
   const { RangePicker } = import_antd15.DatePicker;
   const dateValues = value ? value.map((date) => (0, import_dayjs2.default)(date, "DD-MM-YYYY")) : null;
-  const today = (0, import_dayjs2.default)();
   const handleChange = (dates, dateStrings) => {
     if (dates) {
-      let [start, end] = dates;
-      if (start && start.isBefore(today) && end && end.isAfter(today)) {
-        end = today;
-      }
-      const adjustedDates = [start, end].map(
-        (date) => date ? date.format("DD-MM-YYYY") : null
-      );
-      props.onChange && props.onChange(adjustedDates);
+      props.onChange && props.onChange(dateStrings);
     } else {
       props.onChange && props.onChange("");
     }
   };
-  let rangePresets = [
-    { label: "Last 7 Days", value: [(0, import_dayjs2.default)().subtract(6, "d"), today] },
-    { label: "Last 14 Days", value: [(0, import_dayjs2.default)().subtract(13, "d"), today] },
-    { label: "Last 30 Days", value: [(0, import_dayjs2.default)().subtract(29, "d"), today] },
-    { label: "Last 90 Days", value: [(0, import_dayjs2.default)().subtract(89, "d"), today] }
+  const rangePresets = [
+    { 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)()] }
   ];
   const disabledDate = (current) => {
-    if (props.weekrange) {
-      return current && current < today.subtract(7, "d") || current > today;
-    }
-    return current && current > today;
-  };
-  const handleCalendarChange = (dates) => {
-    if (dates) {
-      let [start, end] = dates;
-      if (start && start.isBefore(today) && end && end.isAfter(today)) {
-        end = today;
-      }
-      const adjustedDates = [start, end].map(
-        (date) => date ? date.format("DD-MM-YYYY") : null
-      );
-      props.onChange && props.onChange(adjustedDates);
-    } else {
-      props.onChange && props.onChange("");
-    }
+    return current && current > (0, import_moment2.default)();
   };
   return /* @__PURE__ */ import_react21.default.createElement(import_antd15.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react21.default.createElement(
     RangePicker,
     {
       disabledDate,
-      ...!props.weekrange && { presets: rangePresets },
-      format: "DD-MM-YYYY",
+      presets: rangePresets,
+      format: { format: "DD-MM-YYYY" },
       onChange: handleChange,
-      onCalendarChange: handleCalendarChange,
       value: dateValues
     }
   ));
@@ -1004,14 +1040,12 @@ var DropDownGroup = (props) => {
 // src/Components/FilesUpload.tsx
 var import_react25 = __toESM(require("react"));
 var import_antd18 = require("antd");
-var import_icons5 = require("@ant-design/icons");
+var import_icons6 = require("@ant-design/icons");
 var FileUpload = (props) => {
   const { Dragger } = import_antd18.Upload;
-  const [files, setFiles] = (0, import_react25.useState)(props.value && props.value.length > 0 ? props.value : []);
-  console.log("+++++++++++++", files);
+  const [files, setFiles] = (0, import_react25.useState)([]);
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
-    console.log("--------filelist", files);
     if (props.onChange) {
       props.onChange({
         name: props.name,
@@ -1037,7 +1071,7 @@ var FileUpload = (props) => {
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ import_react25.default.createElement("p", null, /* @__PURE__ */ import_react25.default.createElement(import_icons5.InboxOutlined, null)),
+    /* @__PURE__ */ import_react25.default.createElement("p", null, /* @__PURE__ */ import_react25.default.createElement(import_icons6.InboxOutlined, null)),
     /* @__PURE__ */ import_react25.default.createElement("p", null, "Click or drag file to upload")
   ));
 };
@@ -1058,6 +1092,7 @@ var TabsElement = (props) => {
 var import_react27 = __toESM(require("react"));
 var import_antd20 = require("antd");
 var onChange = (checked) => {
+  console.log(`switch to ${checked}`);
 };
 var SwitchElement = () => /* @__PURE__ */ import_react27.default.createElement(import_antd20.Switch, { defaultChecked: true, onChange });
@@ -1068,12 +1103,12 @@ var Upload2 = (props) => {
   const handleFileChange = (e) => {
     setFile(e.target.files[0]);
     if (props.onChange) {
-      console.log(e.target.files[0]);
       props.onChange(e.target.files[0]);
     }
   };
   const handleUpload = async () => {
     if (!file) {
+      console.error("No file selected");
       return;
     }
   };
@@ -1576,23 +1611,6 @@ var BarChart = (props) => {
   };
   return /* @__PURE__ */ import_react35.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react35.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react35.default.createElement(import_react_chartjs_24.Bar, { data, options }));
 };
-// src/Components/DivContainer.tsx
-var import_react36 = __toESM(require("react"));
-var DivContainer = (props) => {
-  return /* @__PURE__ */ import_react36.default.createElement("div", { className: props.className, onClick: props.onClick }, props.label);
-};
-// src/Components/ColorPickerElement.tsx
-var import_react37 = __toESM(require("react"));
-var import_antd22 = require("antd");
-var ColorPickerElement = (props) => {
-  const onHandleChange = (value, hex) => {
-    console.log(hex);
-    props.onChange && props.onChange(hex);
-  };
-  return /* @__PURE__ */ import_react37.default.createElement(import_antd22.Space, null, /* @__PURE__ */ import_react37.default.createElement("p", null, props.label), /* @__PURE__ */ import_react37.default.createElement(import_antd22.Space, { direction: "vertical" }, /* @__PURE__ */ import_react37.default.createElement(import_antd22.ColorPicker, { showText: true, defaultValue: "#1677ff", onChange: onHandleChange })));
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -1601,10 +1619,8 @@ var ColorPickerElement = (props) => {
   CheckboxElement,
   CircleDonut,
   CkEditor,
-  ColorPickerElement,
   DatePickerElement,
   DateRangePickerElement,
-  DivContainer,
   DoubleBarChart,
   DropDownGroup,
   FileUpload,

package/dist/index.mjs CHANGED Viewed

@@ -99,19 +99,20 @@ var TextareaElement = (props) => {
       props.onChange(e.target.value);
     }
   };
-  const defaultMinRows = 2;
-  const defaultMaxRows = 6;
   return /* @__PURE__ */ React4.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React4.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React4.createElement(
     TextArea,
     {
       placeholder: props.placeholder,
       allowClear: true,
+      defaultValue: props.defaultValue,
       disabled: props.disabled,
       id: props.name,
-      autoSize: { minRows: props.minRows ? props.minRows : defaultMinRows, maxRows: props.maxRows ? props.maxRows : defaultMaxRows },
+      status: props.status,
       className: props.className,
+      variant: props.variant,
       name: props.name,
       showCount: true,
+      maxLength: props.maxLength,
       onChange: (e) => {
         handleChange(e);
       }
@@ -127,9 +128,11 @@ var filterOptions = (input, option) => {
 };
 var SelectElement = (props) => {
   const handleChange = (value) => {
+    console.log("++=====", typeof value);
     if (props.onChange) {
       if (typeof value === "string") {
         const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
+        console.log(filterOption2);
         props.onChange(filterOption2);
       } else {
         const selectedOptions = value ? value.map((eachVal) => {
@@ -139,7 +142,7 @@ var SelectElement = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ React5.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React5.createElement("label", { htmlFor: props.name, className: props.className }, props.label), /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col p-10 m-10" }, props.label && /* @__PURE__ */ React5.createElement("label", { htmlFor: props.name, className: "font-semibold text-default-400 text-red bg-green-500 border-4" }, props.label), /* @__PURE__ */ React5.createElement(
     Select,
     {
       options: props.options,
@@ -148,8 +151,7 @@ var SelectElement = (props) => {
       filterOption: filterOptions,
       showSearch: true,
       className: props.className,
-      onChange: handleChange,
-      mode: props.mode
+      onChange: handleChange
     }
   ));
 };
@@ -164,6 +166,7 @@ var RadioElement = (props) => {
   const [selectedValue, setSelectedValue] = useState2(props.value);
   const optionType = props.optionType === "button" ? "button" : void 0;
   const handleChange = (option) => {
+    console.log(option);
     setSelectedValue(option);
     setIsDisabled(true);
     if (props.onChange) {
@@ -215,7 +218,7 @@ var CheckboxElement = (props) => {
     }
   };
   const onHandleAllChanges = (e) => {
-    const newList = e.target.checked ? props.options : [""];
+    const newList = e.target.checked ? props.options : [];
     setCheckedList(newList);
     if (props.onChange) {
       props.onChange(newList);
@@ -255,6 +258,7 @@ var CkEditor = (props) => {
 import React9 from "react";
 import { Select as Select2 } from "antd";
 var onSearch = (value) => {
+  console.log("search:", value);
 };
 var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
 var SingleSelectElement = (props) => {
@@ -535,6 +539,7 @@ var AddMoreTable = (props) => {
     });
   };
   useEffect(() => {
+    console.log(rows);
   }, [rows]);
   const renderInputElement = (element, value) => {
     if (!element) return null;
@@ -593,13 +598,27 @@ var AddMoreTable = (props) => {
 };
 // src/Components/Sidebar.tsx
-import React14, { useState as useState5 } from "react";
-var Sidebar = () => {
-  const [navToggle, setNavToggle] = useState5(false);
-  const [footerToggle, setFooterToggle] = useState5(false);
-  const handleNavToggle = () => setNavToggle(!navToggle);
-  const handleFooterToggle = () => setFooterToggle(!footerToggle);
-  return /* @__PURE__ */ React14.createElement("div", { id: "nav-bar" }, /* @__PURE__ */ React14.createElement("input", { id: "nav-toggle", type: "checkbox", checked: navToggle, onChange: handleNavToggle }), /* @__PURE__ */ React14.createElement("div", { id: "nav-header" }, /* @__PURE__ */ React14.createElement("a", { id: "nav-title", href: "https://codepen.io", target: "_blank", rel: "noopener noreferrer" }, "C", /* @__PURE__ */ React14.createElement("i", { className: "fab fa-codepen" }), "DEPEN"), /* @__PURE__ */ React14.createElement("label", { htmlFor: "nav-toggle" }, /* @__PURE__ */ React14.createElement("span", { id: "nav-toggle-burger" })), /* @__PURE__ */ React14.createElement("hr", null)), /* @__PURE__ */ React14.createElement("div", { id: "nav-content" }, /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-palette" }), /* @__PURE__ */ React14.createElement("span", null, "Your Work")), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-images" }), /* @__PURE__ */ React14.createElement("span", null, "Assets")), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-thumbtack" }), /* @__PURE__ */ React14.createElement("span", null, "Pinned Items")), /* @__PURE__ */ React14.createElement("hr", null), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-heart" }), /* @__PURE__ */ React14.createElement("span", null, "Following")), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-chart-line" }), /* @__PURE__ */ React14.createElement("span", null, "Trending")), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-fire" }), /* @__PURE__ */ React14.createElement("span", null, "Challenges")), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-magic" }), /* @__PURE__ */ React14.createElement("span", null, "Spark")), /* @__PURE__ */ React14.createElement("hr", null), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-gem" }), /* @__PURE__ */ React14.createElement("span", null, "Codepen Pro")), /* @__PURE__ */ React14.createElement("div", { id: "nav-content-highlight" })), /* @__PURE__ */ React14.createElement("input", { id: "nav-footer-toggle", type: "checkbox", checked: footerToggle, onChange: handleFooterToggle }), /* @__PURE__ */ React14.createElement("div", { id: "nav-footer" }, /* @__PURE__ */ React14.createElement("div", { id: "nav-footer-heading" }, /* @__PURE__ */ React14.createElement("div", { id: "nav-footer-avatar" }, /* @__PURE__ */ React14.createElement("img", { src: "https://gravatar.com/avatar/4474ca42d303761c2901fa819c4f2547", alt: "avatar" })), /* @__PURE__ */ React14.createElement("div", { id: "nav-footer-titlebox" }, /* @__PURE__ */ React14.createElement("a", { id: "nav-footer-title", href: "https://codepen.io/uahnbu/pens/public", target: "_blank", rel: "noopener noreferrer" }, "uahnbu"), /* @__PURE__ */ React14.createElement("span", { id: "nav-footer-subtitle" }, "Admin")), /* @__PURE__ */ React14.createElement("label", { htmlFor: "nav-footer-toggle" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-caret-up" }))), /* @__PURE__ */ React14.createElement("div", { id: "nav-footer-content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")));
+import React14 from "react";
+var Sidebar = (props) => {
+  const handleChange = (item) => {
+    if (props.onChange) {
+      props.onChange(item);
+    }
+  };
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, { key: props.name }, /* @__PURE__ */ React14.createElement("div", { className: props.imgClassName }, /* @__PURE__ */ React14.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ React14.createElement("div", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ React14.createElement(React14.Fragment, { key: item.label }, /* @__PURE__ */ React14.createElement(
+      ButtonElement,
+      {
+        ...item,
+        className: item.active ? props.activeClassName : props.className,
+        iconsClassName: props.iconsClassName,
+        onClick: (e) => {
+          e.preventDefault();
+          handleChange(item);
+        }
+      }
+    ));
+  })));
 };
 // src/Components/Navbar.tsx
@@ -663,11 +682,13 @@ var Navbar = (props) => {
 };
 // src/Components/TableElement.tsx
-import React19, { useState as useState6, useEffect as useEffect2 } from "react";
+import React19, { useState as useState5, useEffect as useEffect2 } from "react";
 import { Table as Table2 } from "antd";
+import { EyeOutlined } from "@ant-design/icons";
 var TableElement = (props) => {
   const { thead, tbody } = props;
-  const [dataSource, setDataSource] = useState6([]);
+  const [dataSource, setDataSource] = useState5([]);
+  const defaultVal = props.value;
   useEffect2(() => {
     if (tbody) {
       setDataSource(
@@ -679,6 +700,13 @@ var TableElement = (props) => {
       );
     }
   }, [tbody]);
+  const handleChange = (record) => {
+    if (record) {
+      props.onChange && props.onChange(record);
+    } else {
+      props.onChange && props.onChange(defaultVal);
+    }
+  };
   let columns = [];
   if (thead) {
     columns = [
@@ -705,6 +733,26 @@ var TableElement = (props) => {
         }
       }))
     ];
+    if (props.view) {
+      columns.push({
+        title: "View",
+        dataIndex: "View",
+        key: "View",
+        render: (_, record) => {
+          return /* @__PURE__ */ React19.createElement(
+            "a",
+            {
+              onClick: () => {
+                if (props.view) {
+                  handleChange(record);
+                }
+              }
+            },
+            /* @__PURE__ */ React19.createElement(EyeOutlined, null)
+          );
+        }
+      });
+    }
   }
   const onChangeTable = (pagination, filters, sorter, extra) => {
     if (extra && extra.currentDataSource) {
@@ -723,6 +771,11 @@ var TableElement = (props) => {
   };
   const rowSelectionConfig = props.rowSelection ? {
     onChange: (selectedRowKeys, selectedRows) => {
+      console.log(
+        `selectedRowKeys: ${selectedRowKeys}`,
+        "selectedRows: ",
+        selectedRows
+      );
       if (props.onChange) {
         props.onChange(selectedRows);
       }
@@ -740,6 +793,16 @@ var TableElement = (props) => {
         showSizeChanger: props.count ? props.count > 10 : 0 > 10,
         onChange: onChangePage
       } : false,
+      onRow: (record) => {
+        return {
+          onClick: () => {
+            if (props.view) {
+              handleChange(record);
+            }
+          },
+          style: { cursor: "pointer" }
+        };
+      },
       rowSelection: rowSelectionConfig,
       dataSource,
       columns,
@@ -751,22 +814,23 @@ var TableElement = (props) => {
 };
 // src/Components/DatePicker.tsx
-import React20, { useState as useState7 } from "react";
+import React20, { useState as useState6 } from "react";
 import { DatePicker } from "antd";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat.js";
 import moment from "moment";
 dayjs.extend(customParseFormat);
 var DatePickerElement = (props) => {
-  const [dateState, setDateState] = useState7(null);
+  const [dateState, setDateState] = useState6("");
   const handleChange = (date, dateString) => {
     if (date) {
+      const formattedDate = dateString;
       setDateState(date);
       if (props.onChange) {
-        props.onChange(dateString);
+        props.onChange(formattedDate);
       }
     } else {
-      setDateState(null);
+      setDateState("");
       if (props.onChange) {
         props.onChange("");
       }
@@ -781,9 +845,8 @@ var DatePickerElement = (props) => {
       disabledDate,
       placeholder: props.placeholder,
       value: dateState,
-      format: "DD-MM-YYYY",
-      onChange: handleChange,
-      picker: props.picker
+      format: { format: "DD-MM-YYYY" },
+      onChange: handleChange
     }
   ));
 };
@@ -792,59 +855,34 @@ var DatePickerElement = (props) => {
 import React21 from "react";
 import { DatePicker as DatePicker2, Space } from "antd";
 import dayjs2 from "dayjs";
+import moment2 from "moment";
 var DateRangePickerElement = (props) => {
   const { value } = props;
   const { RangePicker } = DatePicker2;
   const dateValues = value ? value.map((date) => dayjs2(date, "DD-MM-YYYY")) : null;
-  const today = dayjs2();
   const handleChange = (dates, dateStrings) => {
     if (dates) {
-      let [start, end] = dates;
-      if (start && start.isBefore(today) && end && end.isAfter(today)) {
-        end = today;
-      }
-      const adjustedDates = [start, end].map(
-        (date) => date ? date.format("DD-MM-YYYY") : null
-      );
-      props.onChange && props.onChange(adjustedDates);
+      props.onChange && props.onChange(dateStrings);
     } else {
       props.onChange && props.onChange("");
     }
   };
-  let rangePresets = [
-    { label: "Last 7 Days", value: [dayjs2().subtract(6, "d"), today] },
-    { label: "Last 14 Days", value: [dayjs2().subtract(13, "d"), today] },
-    { label: "Last 30 Days", value: [dayjs2().subtract(29, "d"), today] },
-    { label: "Last 90 Days", value: [dayjs2().subtract(89, "d"), today] }
+  const rangePresets = [
+    { 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()] }
   ];
   const disabledDate = (current) => {
-    if (props.weekrange) {
-      return current && current < today.subtract(7, "d") || current > today;
-    }
-    return current && current > today;
-  };
-  const handleCalendarChange = (dates) => {
-    if (dates) {
-      let [start, end] = dates;
-      if (start && start.isBefore(today) && end && end.isAfter(today)) {
-        end = today;
-      }
-      const adjustedDates = [start, end].map(
-        (date) => date ? date.format("DD-MM-YYYY") : null
-      );
-      props.onChange && props.onChange(adjustedDates);
-    } else {
-      props.onChange && props.onChange("");
-    }
+    return current && current > moment2();
   };
   return /* @__PURE__ */ React21.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React21.createElement(
     RangePicker,
     {
       disabledDate,
-      ...!props.weekrange && { presets: rangePresets },
-      format: "DD-MM-YYYY",
+      presets: rangePresets,
+      format: { format: "DD-MM-YYYY" },
       onChange: handleChange,
-      onCalendarChange: handleCalendarChange,
       value: dateValues
     }
   ));
@@ -869,10 +907,10 @@ var SingleCheckbox = (props) => {
 };
 // src/Components/DropDownGroup.tsx
-import React24, { useState as useState8 } from "react";
+import React24, { useState as useState7 } from "react";
 import { Select as Select4 } from "antd";
 var DropDownGroup = (props) => {
-  const [selectedValue, setSelectedValue] = useState8({
+  const [selectedValue, setSelectedValue] = useState7({
     firstValue: {},
     secondValue: {},
     temp: ""
@@ -934,16 +972,14 @@ var DropDownGroup = (props) => {
 };
 // src/Components/FilesUpload.tsx
-import React25, { useState as useState9 } from "react";
+import React25, { useState as useState8 } from "react";
 import { Upload } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
 var FileUpload = (props) => {
   const { Dragger } = Upload;
-  const [files, setFiles] = useState9(props.value && props.value.length > 0 ? props.value : []);
-  console.log("+++++++++++++", files);
+  const [files, setFiles] = useState8([]);
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
-    console.log("--------filelist", files);
     if (props.onChange) {
       props.onChange({
         name: props.name,
@@ -990,22 +1026,23 @@ var TabsElement = (props) => {
 import React27 from "react";
 import { Switch } from "antd";
 var onChange = (checked) => {
+  console.log(`switch to ${checked}`);
 };
 var SwitchElement = () => /* @__PURE__ */ React27.createElement(Switch, { defaultChecked: true, onChange });
 // src/Components/Upload.tsx
-import React28, { useState as useState10 } from "react";
+import React28, { useState as useState9 } from "react";
 var Upload2 = (props) => {
-  const [file, setFile] = useState10();
+  const [file, setFile] = useState9();
   const handleFileChange = (e) => {
     setFile(e.target.files[0]);
     if (props.onChange) {
-      console.log(e.target.files[0]);
       props.onChange(e.target.files[0]);
     }
   };
   const handleUpload = async () => {
     if (!file) {
+      console.error("No file selected");
       return;
     }
   };
@@ -1022,11 +1059,11 @@ var Upload2 = (props) => {
 };
 // src/Components/OtpElement.tsx
-import React29, { useState as useState11, useRef, useEffect as useEffect3 } from "react";
+import React29, { useState as useState10, useRef, useEffect as useEffect3 } from "react";
 import { Input as Input3 } from "antd";
 var OtpElement = (props) => {
   const length = props.length;
-  const [otp, setOtp] = useState11(Array(length).fill(""));
+  const [otp, setOtp] = useState10(Array(length).fill(""));
   const inputRefs = useRef([]);
   const handleChange = (e, index) => {
     const value = e.target.value;
@@ -1532,23 +1569,6 @@ var BarChart = (props) => {
   };
   return /* @__PURE__ */ React35.createElement("div", { className: props.className }, /* @__PURE__ */ React35.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React35.createElement(Bar2, { data, options }));
 };
-// src/Components/DivContainer.tsx
-import React36 from "react";
-var DivContainer = (props) => {
-  return /* @__PURE__ */ React36.createElement("div", { className: props.className, onClick: props.onClick }, props.label);
-};
-// src/Components/ColorPickerElement.tsx
-import React37 from "react";
-import { ColorPicker, Space as Space2 } from "antd";
-var ColorPickerElement = (props) => {
-  const onHandleChange = (value, hex) => {
-    console.log(hex);
-    props.onChange && props.onChange(hex);
-  };
-  return /* @__PURE__ */ React37.createElement(Space2, null, /* @__PURE__ */ React37.createElement("p", null, props.label), /* @__PURE__ */ React37.createElement(Space2, { direction: "vertical" }, /* @__PURE__ */ React37.createElement(ColorPicker, { showText: true, defaultValue: "#1677ff", onChange: onHandleChange })));
-};
 export {
   AddMoreTable,
   BarChart,
@@ -1556,10 +1576,8 @@ export {
   CheckboxElement,
   CircleDonut,
   CkEditor,
-  ColorPickerElement,
   DatePickerElement,
   DateRangePickerElement,
-  DivContainer,
   DoubleBarChart,
   DropDownGroup,
   FileUpload,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta302",
+  "version": "0.0.14-Beta304",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",

package/tailwind.config.js CHANGED Viewed

@@ -1,9 +1,9 @@
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};