unifyedx-storybook-new 0.1.6 → 0.1.7

package/dist/unifyedx-storybook-new.css

@@ -3508,6 +3508,48 @@
   gap: 0.75rem; /* flex gap-3 */
   margin-right: 50px;
 }
+
+.page-header-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem; /* 12px */
+  margin-bottom: 1.25rem; /* 20px */
+  font-family: sans-serif;
+}
+
+.page-header-back-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin-top: 0.25rem; /* Aligns with heading */
+  color: #4b5563; /* gray-600 */
+  padding: 0;
+}
+
+.page-header-back-button:hover {
+  color: #111827;
+}
+
+.page-header-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.page-header-heading {
+  font-size: 1.25rem; /* text-xl */
+  font-weight: 600;
+  color: #374151; /* text-darkGrey-200 */
+  margin: 0;
+}
+
+.page-header-subheading {
+  font-size: 0.875rem; /* 14px */
+  font-weight: 400;
+  color: #4b5563;
+  opacity: 0.9;
+  margin: 0;
+}
 .avatar-container {
   display: inline-flex;
   align-items: center;
@@ -6665,3 +6707,43 @@
   gap: 0.75rem; /* flex gap-3 */
   margin-right: 50px;
 }
+.page-header-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem; /* 12px */
+  margin-bottom: 1.25rem; /* 20px */
+  font-family: sans-serif;
+}
+
+.page-header-back-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin-top: 0.25rem; /* Aligns with heading */
+  color: #4b5563; /* gray-600 */
+  padding: 0;
+}
+.page-header-back-button:hover {
+  color: #111827;
+}
+
+.page-header-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.page-header-heading {
+  font-size: 1.25rem; /* text-xl */
+  font-weight: 600;
+  color: #374151; /* text-darkGrey-200 */
+  margin: 0;
+}
+
+.page-header-subheading {
+  font-size: 0.875rem; /* 14px */
+  font-weight: 400;
+  color: #4b5563;
+  opacity: 0.9;
+  margin: 0;
+}

package/dist/unifyedx-storybook-new.es.js

@@ -581,11 +581,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$k = [
+const __iconNode$l = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$k);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$l);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -595,13 +595,13 @@ const ArrowLeft = createLucideIcon("arrow-left", __iconNode$k);
  */
 
 
-const __iconNode$j = [
+const __iconNode$k = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-const Calendar$1 = createLucideIcon("calendar", __iconNode$j);
+const Calendar$1 = createLucideIcon("calendar", __iconNode$k);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -611,8 +611,8 @@ const Calendar$1 = createLucideIcon("calendar", __iconNode$j);
  */
 
 
-const __iconNode$i = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$i);
+const __iconNode$j = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$j);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -622,8 +622,8 @@ const Check = createLucideIcon("check", __iconNode$i);
  */
 
 
-const __iconNode$h = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$h);
+const __iconNode$i = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$i);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -633,8 +633,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$h);
  */
 
 
-const __iconNode$g = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$g);
+const __iconNode$h = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$h);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -644,8 +644,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$g);
  */
 
 
-const __iconNode$f = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$f);
+const __iconNode$g = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$g);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -655,11 +655,11 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$f);
  */
 
 
-const __iconNode$e = [
+const __iconNode$f = [
   ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
   ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
 ];
-const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$e);
+const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$f);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -669,11 +669,11 @@ const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$e);
  */
 
 
-const __iconNode$d = [
+const __iconNode$e = [
   ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
   ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
 ];
-const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$d);
+const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$e);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -683,11 +683,11 @@ const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$d);
  */
 
 
-const __iconNode$c = [
+const __iconNode$d = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$c);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$d);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -697,11 +697,11 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$c = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$b);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$c);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -711,12 +711,12 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$b);
  */
 
 
-const __iconNode$a = [
+const __iconNode$b = [
   ["path", { d: "M12 13v8", key: "1l5pq0" }],
   ["path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242", key: "1pljnt" }],
   ["path", { d: "m8 17 4-4 4 4", key: "1quai1" }]
 ];
-const CloudUpload = createLucideIcon("cloud-upload", __iconNode$a);
+const CloudUpload = createLucideIcon("cloud-upload", __iconNode$b);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -726,12 +726,12 @@ const CloudUpload = createLucideIcon("cloud-upload", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$a = [
   ["path", { d: "M12 17h.01", key: "p32p05" }],
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z", key: "1mlx9k" }],
   ["path", { d: "M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3", key: "mhlwft" }]
 ];
-const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$9);
+const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$a);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -741,12 +741,12 @@ const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$9);
  */
 
 
-const __iconNode$8 = [
+const __iconNode$9 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info = createLucideIcon("info", __iconNode$8);
+const Info = createLucideIcon("info", __iconNode$9);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -756,8 +756,8 @@ const Info = createLucideIcon("info", __iconNode$8);
  */
 
 
-const __iconNode$7 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$7);
+const __iconNode$8 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$8);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -767,12 +767,12 @@ const LoaderCircle = createLucideIcon("loader-circle", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$7 = [
   ["path", { d: "m16 17 5-5-5-5", key: "1bji2h" }],
   ["path", { d: "M21 12H9", key: "dn1m92" }],
   ["path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4", key: "1uf3rs" }]
 ];
-const LogOut = createLucideIcon("log-out", __iconNode$6);
+const LogOut = createLucideIcon("log-out", __iconNode$7);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -782,12 +782,26 @@ const LogOut = createLucideIcon("log-out", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+const __iconNode$6 = [
   ["path", { d: "M4 12h16", key: "1lakjw" }],
   ["path", { d: "M4 18h16", key: "19g7jn" }],
   ["path", { d: "M4 6h16", key: "1o0s65" }]
 ];
-const Menu = createLucideIcon("menu", __iconNode$5);
+const Menu = createLucideIcon("menu", __iconNode$6);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$5 = [
+  ["path", { d: "M6 8L2 12L6 16", key: "kyvwex" }],
+  ["path", { d: "M2 12H22", key: "1m8cig" }]
+];
+const MoveLeft = createLucideIcon("move-left", __iconNode$5);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -43185,4 +43199,31 @@ const PageLayout = ({
   ] });
 };
 
-export { Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToggleSwitch, Tooltip, UnifyedCoreButton, WizardModal };
+const PageHeader = ({
+  heading,
+  subHeading,
+  breadcrumbItems = [],
+  // Expects the breadcrumb data as a prop
+  isLeftArrow = false,
+  onBackClick,
+  // Expects a handler for the back button
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "page-header-wrapper", ...props, children: [
+    isLeftArrow && onBackClick && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        className: "page-header-back-button",
+        "aria-label": "Go back",
+        onClick: onBackClick,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoveLeft, { size: 30 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "page-header-content", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "page-header-heading", children: heading }),
+      breadcrumbItems.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumbs, { crumbs: breadcrumbItems }) : subHeading ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "page-header-subheading", children: subHeading }) : null
+    ] })
+  ] });
+};
+
+export { Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, PageHeader, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToggleSwitch, Tooltip, UnifyedCoreButton, WizardModal };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unifyedx-storybook-new",
   "private": false,
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "main": "dist/unifyedx-storybook-new.es.js",
   "module": "dist/unifyedx-storybook-new.es.js",
@@ -37,6 +37,7 @@
     "react-dropzone": "^14.3.8",
     "react-file-icon": "^1.6.0",
     "react-hook-form": "^7.60.0",
+    "react-router-dom": "^7.7.0",
     "react-tooltip": "^5.29.1",
     "simplebar-react": "^3.3.2",
     "tailwindcss": "^4.1.11",