@apexcura/ui-components 0.0.12-Beta70 → 0.0.12-Beta72

package/dist/index.css

@@ -335,12 +335,18 @@ video {
 .visible {
   visibility: visible;
 }
-.\!m-\[10px\] {
-  margin: 10px !important;
-}
 .m-\[10px\] {
   margin: 10px;
 }
+.ml-\[-7px\] {
+  margin-left: -7px;
+}
+.mt-\[-10px\] {
+  margin-top: -10px;
+}
+.flex {
+  display: flex;
+}
 .table {
   display: table;
 }
@@ -350,8 +356,11 @@ video {
 .w-\[126px\] {
   width: 126px;
 }
-.\!rounded-\[8px\] {
-  border-radius: 8px !important;
+.w-full {
+  width: 100%;
+}
+.justify-between {
+  justify-content: space-between;
 }
 .rounded-\[8px\] {
   border-radius: 8px;
@@ -359,26 +368,23 @@ video {
 .rounded-full {
   border-radius: 9999px;
 }
-.\!border {
-  border-width: 1px !important;
-}
 .border {
   border-width: 1px;
 }
 .border-none {
   border-style: none;
 }
-.\!border-\[\#B8A4DE\] {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(184 164 222 / var(--tw-border-opacity)) !important;
-}
 .border-\[\#919191\] {
   --tw-border-opacity: 1;
   border-color: rgb(145 145 145 / var(--tw-border-opacity));
 }
-.\!bg-\[\#E2D6F8\] {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(226 214 248 / var(--tw-bg-opacity)) !important;
+.border-\[\#B8A4DE\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(184 164 222 / var(--tw-border-opacity));
+}
+.bg-\[\#E2D6F8\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 214 248 / var(--tw-bg-opacity));
 }
 .bg-\[\#F2F2F2\] {
   --tw-bg-opacity: 1;
@@ -391,31 +397,26 @@ video {
 .p-\[6px\] {
   padding: 6px;
 }
-.\!text-center {
-  text-align: center !important;
+.pl-\[3px\] {
+  padding-left: 3px;
 }
 .text-center {
   text-align: center;
 }
+.text-\[10px\] {
+  font-size: 10px;
+}
 .italic {
   font-style: italic;
 }
-.\!text-black {
-  --tw-text-opacity: 1 !important;
-  color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
+.text-black {
+  --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 !important;
-  --tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color) !important;
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow) !important;
-}
 .shadow-\[0px_0px_1px_1px_\#919191\] {
   --tw-shadow: 0px 0px 1px 1px #919191;
   --tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import React$1 from 'react';
 
 type ElementType = {
+    [x: string]: any;
     selectedStyle: boolean;
     style: boolean;
     className: string | undefined;
@@ -33,6 +34,16 @@ type ElementType = {
     listItemClassName?: string;
     img?: string;
     items?: any[];
+    primaryText?: string;
+    secondaryText?: string;
+    count?: number;
+    icon?: React.JSX.Element;
+    placement?: string;
+    profileImage?: string;
+    buttonClassName?: string;
+    profileImageClassName?: string;
+    profileSubClassName?: string;
+    subContainerClassName?: string;
 };
 
 interface ElementExecuterProps$3 extends ElementType {
@@ -83,4 +94,6 @@ declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
 
 declare const Sidebar: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TextElement, TextareaElement };
+declare const Navbar: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TextElement, TextareaElement };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import React$1 from 'react';
 
 type ElementType = {
+    [x: string]: any;
     selectedStyle: boolean;
     style: boolean;
     className: string | undefined;
@@ -33,6 +34,16 @@ type ElementType = {
     listItemClassName?: string;
     img?: string;
     items?: any[];
+    primaryText?: string;
+    secondaryText?: string;
+    count?: number;
+    icon?: React.JSX.Element;
+    placement?: string;
+    profileImage?: string;
+    buttonClassName?: string;
+    profileImageClassName?: string;
+    profileSubClassName?: string;
+    subContainerClassName?: string;
 };
 
 interface ElementExecuterProps$3 extends ElementType {
@@ -83,4 +94,6 @@ declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
 
 declare const Sidebar: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TextElement, TextareaElement };
+declare const Navbar: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TextElement, TextareaElement };

package/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   CheckboxElement: () => CheckboxElement,
   CkEditor: () => CkEditor,
   MultipleSelectElement: () => MultipleSelectElement,
+  Navbar: () => Navbar,
   NumberElement: () => NumberElement,
   PasswordElement: () => PasswordElement,
   RadioElement: () => RadioElement,
@@ -187,15 +188,16 @@ var SelectElement = (props) => {
 var import_react6 = __toESM(require("react"));
 var import_antd6 = require("antd");
 var containerClassName = " ";
-var className = "bg-[#F2F2F2] border border-[#919191] !rounded-[8px] !m-[10px] hover:bg-[#F2F2F2] !text-center !text-black !shadow-[0px_0px_1px_1px_#919191]";
-var selectedClassName = "!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 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) => {
   const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
   const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
   const optionType = props.optionType === "button" ? "button" : void 0;
   const handleChange = (e) => {
     const selectedVal = e.target.value;
-    const selectedOptions = [{ id: selectedVal, value: selectedVal }];
+    const selectedLabel = e.target.label;
+    const selectedOptions = [{ id: selectedLabel, value: selectedVal }];
     setSelectedValue(selectedVal);
     setIsDisabled(true);
     if (props.onChange) {
@@ -203,9 +205,9 @@ var RadioElement = (props) => {
     }
   };
   const getButtonStyle = (option) => {
-    return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
+    return selectedValue === option.value ? `${radioSelectedDefaultStyle} ${option.selectedClassName}` : `${radioDefaultStyle} ${option.className}`;
   };
-  return /* @__PURE__ */ import_react6.default.createElement("div", { className: containerClassName }, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: containerClassName }, /* @__PURE__ */ import_react6.default.createElement("p", null, props.label), /* @__PURE__ */ import_react6.default.createElement(
     import_antd6.Radio.Group,
     {
       onChange: handleChange,
@@ -295,8 +297,7 @@ var CkEditor = (props) => {
     {
       apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
       onInit: (_evt, editor) => {
-        if (editor)
-          editorRef.current = editor;
+        if (editor) editorRef.current = editor;
       },
       initialValue: "<p>This is the initial content of the editor.</p>",
       init: {
@@ -475,8 +476,7 @@ var AddMoreTable = (props) => {
     console.log(rows);
   }, [rows]);
   const renderInputElement = (element, value) => {
-    if (!element)
-      return null;
+    if (!element) return null;
     const { element: type, label } = element;
     if (type === "single-select") {
       return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
@@ -534,10 +534,37 @@ var AddMoreTable = (props) => {
 // src/Components/Sidebar.tsx
 var import_react14 = __toESM(require("react"));
 var Sidebar = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("img", { src: props.img, alt: "logo" }), /* @__PURE__ */ import_react14.default.createElement("p", null, props.name)), /* @__PURE__ */ import_react14.default.createElement("ul", { className: props.listClassName }), props.items?.map((item) => {
-    console.log("item------", item);
-    return /* @__PURE__ */ import_react14.default.createElement("div", { className: props.listItemClassName }, /* @__PURE__ */ import_react14.default.createElement("span", null, item.icon), /* @__PURE__ */ import_react14.default.createElement("span", null, item.label));
-  }));
+  const handleChange = (item) => {
+    if (props.onChange) {
+      props.onChange(item);
+    }
+  };
+  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("span", null, item.icon), /* @__PURE__ */ import_react14.default.createElement("span", null, item.label));
+  })));
+};
+
+// src/Components/Navbar.tsx
+var import_react17 = __toESM(require("react"));
+
+// src/Components/Notification.tsx
+var import_react15 = __toESM(require("react"));
+var import_antd12 = require("antd");
+var Notification = (props) => /* @__PURE__ */ import_react15.default.createElement(import_antd12.Popover, { className: props.notification.className, content: props.notification.items?.map((eachItem) => {
+  return /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement("p", null, eachItem.text), /* @__PURE__ */ import_react15.default.createElement("p", null, eachItem.time));
+}), trigger: "focus", placement: "bottomRight" }, /* @__PURE__ */ import_react15.default.createElement(import_antd12.Badge, { count: props.notification.count }, props.notification.icon));
+
+// src/Components/Profile.tsx
+var import_react16 = __toESM(require("react"));
+var Profile = (props) => /* @__PURE__ */ import_react16.default.createElement("div", { className: props.profile.className }, /* @__PURE__ */ import_react16.default.createElement("img", { src: props.profile.profileImage, alt: "profile", className: props.profile.profileImageClassName }), /* @__PURE__ */ import_react16.default.createElement("div", { className: props.profile.profileSubClassName }, /* @__PURE__ */ import_react16.default.createElement("span", null, props.profile.primaryText), /* @__PURE__ */ import_react16.default.createElement("span", null, props.profile.secondaryText)));
+
+// src/Components/Navbar.tsx
+var Navbar = (props) => {
+  const test = "w-full flex justify-between";
+  const dashboradClass = "text-xl,text-default-600";
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: `${test} ${props.subContainerClassName}` }, /* @__PURE__ */ import_react17.default.createElement("div", { className: `${dashboradClass} ${props.dashboard.className}` }, props.dashboard.label), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex" }, /* @__PURE__ */ import_react17.default.createElement(Notification, { ...props }), /* @__PURE__ */ import_react17.default.createElement(Profile, { ...props })));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -546,6 +573,7 @@ var Sidebar = (props) => {
   CheckboxElement,
   CkEditor,
   MultipleSelectElement,
+  Navbar,
   NumberElement,
   PasswordElement,
   RadioElement,

package/dist/index.mjs

@@ -139,15 +139,16 @@ var SelectElement = (props) => {
 import React6, { useState as useState2 } from "react";
 import { Radio } from "antd";
 var containerClassName = " ";
-var className = "bg-[#F2F2F2] border border-[#919191] !rounded-[8px] !m-[10px] hover:bg-[#F2F2F2] !text-center !text-black !shadow-[0px_0px_1px_1px_#919191]";
-var selectedClassName = "!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 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) => {
   const [isDisabled, setIsDisabled] = useState2(props.disabled);
   const [selectedValue, setSelectedValue] = useState2(props.value);
   const optionType = props.optionType === "button" ? "button" : void 0;
   const handleChange = (e) => {
     const selectedVal = e.target.value;
-    const selectedOptions = [{ id: selectedVal, value: selectedVal }];
+    const selectedLabel = e.target.label;
+    const selectedOptions = [{ id: selectedLabel, value: selectedVal }];
     setSelectedValue(selectedVal);
     setIsDisabled(true);
     if (props.onChange) {
@@ -155,9 +156,9 @@ var RadioElement = (props) => {
     }
   };
   const getButtonStyle = (option) => {
-    return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
+    return selectedValue === option.value ? `${radioSelectedDefaultStyle} ${option.selectedClassName}` : `${radioDefaultStyle} ${option.className}`;
   };
-  return /* @__PURE__ */ React6.createElement("div", { className: containerClassName }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement("div", { className: containerClassName }, /* @__PURE__ */ React6.createElement("p", null, props.label), /* @__PURE__ */ React6.createElement(
     Radio.Group,
     {
       onChange: handleChange,
@@ -247,8 +248,7 @@ var CkEditor = (props) => {
     {
       apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
       onInit: (_evt, editor) => {
-        if (editor)
-          editorRef.current = editor;
+        if (editor) editorRef.current = editor;
       },
       initialValue: "<p>This is the initial content of the editor.</p>",
       init: {
@@ -427,8 +427,7 @@ var AddMoreTable = (props) => {
     console.log(rows);
   }, [rows]);
   const renderInputElement = (element, value) => {
-    if (!element)
-      return null;
+    if (!element) return null;
     const { element: type, label } = element;
     if (type === "single-select") {
       return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
@@ -486,10 +485,37 @@ var AddMoreTable = (props) => {
 // src/Components/Sidebar.tsx
 import React13 from "react";
 var Sidebar = (props) => {
-  return /* @__PURE__ */ React13.createElement("div", { className: props.className }, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("img", { src: props.img, alt: "logo" }), /* @__PURE__ */ React13.createElement("p", null, props.name)), /* @__PURE__ */ React13.createElement("ul", { className: props.listClassName }), props.items?.map((item) => {
-    console.log("item------", item);
-    return /* @__PURE__ */ React13.createElement("div", { className: props.listItemClassName }, /* @__PURE__ */ React13.createElement("span", null, item.icon), /* @__PURE__ */ React13.createElement("span", null, item.label));
-  }));
+  const handleChange = (item) => {
+    if (props.onChange) {
+      props.onChange(item);
+    }
+  };
+  return /* @__PURE__ */ React13.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ React13.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ React13.createElement("li", { onClick: () => {
+      handleChange(item);
+    }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ React13.createElement("span", null, item.icon), /* @__PURE__ */ React13.createElement("span", null, item.label));
+  })));
+};
+
+// src/Components/Navbar.tsx
+import React16 from "react";
+
+// src/Components/Notification.tsx
+import React14 from "react";
+import { Popover, Badge } from "antd";
+var Notification = (props) => /* @__PURE__ */ React14.createElement(Popover, { className: props.notification.className, content: props.notification.items?.map((eachItem) => {
+  return /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("p", null, eachItem.text), /* @__PURE__ */ React14.createElement("p", null, eachItem.time));
+}), trigger: "focus", placement: "bottomRight" }, /* @__PURE__ */ React14.createElement(Badge, { count: props.notification.count }, props.notification.icon));
+
+// src/Components/Profile.tsx
+import React15 from "react";
+var Profile = (props) => /* @__PURE__ */ React15.createElement("div", { className: props.profile.className }, /* @__PURE__ */ React15.createElement("img", { src: props.profile.profileImage, alt: "profile", className: props.profile.profileImageClassName }), /* @__PURE__ */ React15.createElement("div", { className: props.profile.profileSubClassName }, /* @__PURE__ */ React15.createElement("span", null, props.profile.primaryText), /* @__PURE__ */ React15.createElement("span", null, props.profile.secondaryText)));
+
+// src/Components/Navbar.tsx
+var Navbar = (props) => {
+  const test = "w-full flex justify-between";
+  const dashboradClass = "text-xl,text-default-600";
+  return /* @__PURE__ */ React16.createElement("div", { className: `${test} ${props.subContainerClassName}` }, /* @__PURE__ */ React16.createElement("div", { className: `${dashboradClass} ${props.dashboard.className}` }, props.dashboard.label), /* @__PURE__ */ React16.createElement("div", { className: "flex" }, /* @__PURE__ */ React16.createElement(Notification, { ...props }), /* @__PURE__ */ React16.createElement(Profile, { ...props })));
 };
 export {
   AddMoreTable,
@@ -497,6 +523,7 @@ export {
   CheckboxElement,
   CkEditor,
   MultipleSelectElement,
+  Navbar,
   NumberElement,
   PasswordElement,
   RadioElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.12-Beta70",
+  "version": "0.0.12-Beta72",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",
@@ -36,21 +36,23 @@
     "@types/react-global-configuration": "^1.3.3",
     "@types/testing-library__react": "^10.2.0",
     "antd": "^5.16.5",
-    "autoprefixer": "^10.4.19",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.38",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
-    "tsup": "^8.0.2",
+    "tsup": "^8.1.0",
     "typescript": "^5.4.5"
   },
   "engines": {
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@tinymce/tinymce-react": "^5.0.1"
+    "@tinymce/tinymce-react": "^5.0.1",
+    "autoprefixer": "^10.4.19",
+    "esbuild": "^0.21.4",
+    "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
+    "tailwindcss": "^3.4.3"
   }
 }

package/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer'),
-  ]
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 }

package/tailwind.config.js

@@ -1,9 +1,10 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}", // Adjust this path according to your project structure
-  ],
+  
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {},
   },
   plugins: [],
-};
+}
+