flowcore-fn 2.3.0 → 2.5.0

package/dist/pkg-index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/pkg-index.jsx
 var pkg_index_exports = {};
 __export(pkg_index_exports, {
+  Sidebar: () => Home,
   WorkflowPage: () => WorkflowPage
 });
 module.exports = __toCommonJS(pkg_index_exports);
@@ -434,7 +435,298 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 function WorkflowPage() {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WorkflowStep, {});
 }
+
+// src/pages/Sidebar.js
+var import_react6 = require("react");
+
+// src/components/Sidebar.jsx
+var import_react4 = require("react");
+var import_react5 = require("@remixicon/react");
+var import_router = require("next/router");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var workflowItems = [
+  { name: "Workflow Type", path: "/WorkflowType", icon: import_react5.RiGitMergeLine },
+  { name: "Workflow", path: "/workflow", icon: import_react5.RiNodeTree },
+  { name: "Workflow Step", path: "/workflowMaster", icon: import_react5.RiGitBranchLine },
+  { name: "Workflow Transition", path: "/TaskPermissionPage", icon: import_react5.RiCornerDownRightLine }
+];
+var permissionItems = [
+  { name: "Task Permission", path: "/WorkflowType", icon: import_react5.RiUserSettingsLine },
+  { name: "Assignment Rule", path: "/WorkflowType", icon: import_react5.RiFileShieldLine }
+];
+var hierarchyItems = [
+  { name: "Hierarchy Node", path: "/WorkflowType", icon: import_react5.RiNodeTree },
+  { name: "User Hierarchy Mapping", path: "/WorkflowType", icon: import_react5.RiUserSharedLine },
+  { name: "Workflow Settings", path: "/WorkflowType", icon: import_react5.RiSettings4Line }
+];
+var documentItems = [
+  { name: "Document Configuration", path: "/WorkflowType", icon: import_react5.RiFileSettingsLine }
+];
+var fileItems = [
+  { name: "File Instance", path: "/WorkflowType", icon: import_react5.RiFileList3Line },
+  { name: "File Pool", path: "/WorkflowType", icon: import_react5.RiDatabase2Line },
+  { name: "Uploaded Document", path: "/WorkflowType", icon: import_react5.RiFileUploadLine }
+];
+var communicationItems = [
+  { name: "Notification", path: "/WorkflowType", icon: import_react5.RiNotification4Line },
+  { name: "Comment", path: "/WorkflowType", icon: import_react5.RiChat3Line }
+];
+var taskItems = [
+  { name: "Task Instance", path: "/WorkflowType", icon: import_react5.RiCheckboxMultipleLine }
+];
+var trackingItems = [
+  { name: "Audit Log", path: "/WorkflowType", icon: import_react5.RiShieldCheckLine },
+  { name: "Movement History", path: "/WorkflowType", icon: import_react5.RiHistoryLine }
+];
+function Sidebar({ isOpen, onToggle }) {
+  const router = (0, import_router.useRouter)();
+  const [workflowOpen, setWorkflowOpen] = (0, import_react4.useState)(false);
+  const [permissionOpen, setPermissionOpen] = (0, import_react4.useState)(false);
+  const [hierarchyOpen, setHierarchyOpen] = (0, import_react4.useState)(false);
+  const [documentOpen, setDocumentOpen] = (0, import_react4.useState)(false);
+  const [filesOpen, setFilesOpen] = (0, import_react4.useState)(false);
+  const [tasksOpen, setTasksOpen] = (0, import_react4.useState)(false);
+  const [trackingOpen, setTrackingOpen] = (0, import_react4.useState)(false);
+  const [communicationOpen, setCommunicationOpen] = (0, import_react4.useState)(false);
+  const renderMenuItem = (item) => {
+    const Icon = item.icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: `
+        flex h-[56px] w-full items-center gap-[17px]
+        rounded-[9px] px-[17px]
+        text-left transition-colors duration-150
+        ${router.pathname === item.path ? "bg-blue-50 text-blue-600" : "text-[#344261] hover:bg-[#F6F8FC]"}
+      `,
+        onClick: () => router.push(item.path),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              className: "\r\n            flex h-[20px] w-[20px] shrink-0\r\n            items-center justify-center\r\n            rounded-[6px] text-[#405170]\r\n          ",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: 17 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "whitespace-nowrap text-[14px] font-medium leading-[22px]", children: item.name })
+        ]
+      },
+      item.name
+    );
+  };
+  const renderDropdown = (title, open, setOpen, items) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen(!open),
+          className: "\r\n          flex h-[50px] w-full items-center justify-between\r\n          rounded-[9px] px-[17px]\r\n          text-left text-[#344261]\r\n          transition-colors duration-150\r\n          hover:bg-[#F6F8FC]\r\n        ",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[16px] font-semibold", children: title }),
+            open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.RiArrowDownSLine, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.RiArrowRightSLine, { size: 18 })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ml-[8px] border-l border-[#E5E9F1] pl-[4px]", children: items.map(renderMenuItem) })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "aside",
+      {
+        className: `
+          flex h-screen flex-col overflow-hidden
+          border-r border-[#E5E9F1] bg-white
+          font-sans text-[#273657]
+          transition-all duration-300 ease-in-out
+          ${isOpen ? "w-[245px] min-w-[245px] translate-x-0 opacity-100" : "w-0 min-w-0 -translate-x-full opacity-0"}
+        `,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "header",
+            {
+              className: "\r\n    flex h-[84px] items-center justify-between\r\n    border-b border-[#EDF0F5]\r\n    px-[14px]\r\n  ",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    "svg",
+                    {
+                      width: "36",
+                      height: "42",
+                      viewBox: "0 0 48 56",
+                      fill: "none",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "path",
+                          {
+                            d: "M24 2L45 12.5L24 23L3 12.5L24 2Z",
+                            fill: "#356AF3"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "path",
+                          {
+                            d: "M24 8L34 13L24 18L14 13L24 8Z",
+                            fill: "white"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "path",
+                          {
+                            d: "M3 20L24 30.5L45 20V27L24 37.5L3 27V20Z",
+                            fill: "#356AF3"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "path",
+                          {
+                            d: "M3 33L24 43.5L45 33V40L24 50.5L3 40V33Z",
+                            fill: "#356AF3"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: "text-[18px] font-extrabold text-[#101318]", children: "FLOWCORE" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[12px] text-[#344261]", children: "Workflow Engine" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onToggle,
+                    className: "\r\n      flex h-8 w-8\r\n      items-center justify-center\r\n      rounded-lg\r\n      hover:bg-gray-100\r\n    ",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.RiMenuLine, { size: 18 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              className: "\r\n    min-h-0 flex-1\r\n    overflow-y-auto overflow-x-hidden\r\n    px-[27px] pb-[30px] pt-[31px]\r\n  ",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "p",
+                  {
+                    className: "\r\n      mb-[19px] ml-[15px]\r\n      text-[14px] font-bold uppercase\r\n      leading-[20px] tracking-[0.2px]\r\n      text-[#3C4D74]\r\n    ",
+                    children: "Configuration Masters"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-[3px]", children: [
+                  renderDropdown(
+                    "Workflow",
+                    workflowOpen,
+                    setWorkflowOpen,
+                    workflowItems
+                  ),
+                  renderDropdown(
+                    "Permissions",
+                    permissionOpen,
+                    setPermissionOpen,
+                    permissionItems
+                  ),
+                  renderDropdown(
+                    "Documents",
+                    documentOpen,
+                    setDocumentOpen,
+                    documentItems
+                  ),
+                  renderDropdown(
+                    "Hierarchy",
+                    hierarchyOpen,
+                    setHierarchyOpen,
+                    hierarchyItems
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "p",
+                  {
+                    className: "\r\n      mb-[19px] ml-[15px] mt-[39px]\r\n      text-[14px] font-bold uppercase\r\n      leading-[20px] tracking-[0.2px]\r\n      text-[#3C4D74]\r\n    ",
+                    children: "Runtime"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-[3px]", children: [
+                  renderDropdown(
+                    "Files",
+                    filesOpen,
+                    setFilesOpen,
+                    fileItems
+                  ),
+                  renderDropdown(
+                    "Tasks",
+                    tasksOpen,
+                    setTasksOpen,
+                    taskItems
+                  ),
+                  renderDropdown(
+                    "Tracking",
+                    trackingOpen,
+                    setTrackingOpen,
+                    trackingItems
+                  ),
+                  renderDropdown(
+                    "Communication",
+                    communicationOpen,
+                    setCommunicationOpen,
+                    communicationItems
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: "\r\n    shrink-0\r\n    bg-white\r\n    px-[27px]\r\n    pb-[34px]\r\n    pt-[18px]\r\n  ",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: "\r\n      flex h-[66px] w-full\r\n      items-center gap-[18px]\r\n      rounded-[10px]\r\n      border border-[#E1E5ED]\r\n      bg-white\r\n      px-[23px]\r\n      text-left\r\n      text-[16px]\r\n      font-semibold\r\n      text-[#2D3A58]\r\n      shadow-sm\r\n      hover:bg-[#F7F8FC]\r\n      transition\r\n    ",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.RiSettings4Line, { size: 20 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Settings" })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    !isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-label": "Open sidebar",
+        className: "\r\n            fixed left-[20px] top-[30px] z-[100]\r\n            flex h-[46px] w-[46px]\r\n            items-center justify-center\r\n            rounded-[9px]\r\n            border border-[#E1E5ED]\r\n            bg-white text-[#344261]\r\n            shadow-[0_2px_8px_rgba(0,0,0,0.08)]\r\n            transition-colors\r\n            hover:bg-[#F3F5F9]\r\n          ",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.RiMenuLine, { size: 18 })
+      }
+    )
+  ] });
+}
+
+// src/pages/Sidebar.js
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Home() {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Sidebar,
+    {
+      isOpen,
+      onToggle: () => setIsOpen(!isOpen)
+    }
+  ) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Sidebar,
   WorkflowPage
 });

package/dist/pkg-index.mjs

@@ -398,6 +398,318 @@ import { jsx as jsx4 } from "react/jsx-runtime";
 function WorkflowPage() {
   return /* @__PURE__ */ jsx4(WorkflowStep, {});
 }
+
+// src/pages/Sidebar.js
+import { useState as useState3 } from "react";
+
+// src/components/Sidebar.jsx
+import { useState as useState2 } from "react";
+import {
+  RiMenuLine,
+  RiGitMergeLine,
+  RiNodeTree,
+  RiGitBranchLine,
+  RiCornerDownRightLine,
+  RiUserSettingsLine,
+  RiFileShieldLine,
+  RiUserSharedLine,
+  RiSettings4Line,
+  RiFileSettingsLine,
+  RiFileList3Line,
+  RiFileUploadLine,
+  RiNotification4Line,
+  RiDatabase2Line,
+  RiChat3Line,
+  RiCheckboxMultipleLine,
+  RiShieldCheckLine,
+  RiHistoryLine,
+  RiArrowDownSLine,
+  RiArrowRightSLine
+} from "@remixicon/react";
+import { useRouter } from "next/router";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var workflowItems = [
+  { name: "Workflow Type", path: "/WorkflowType", icon: RiGitMergeLine },
+  { name: "Workflow", path: "/workflow", icon: RiNodeTree },
+  { name: "Workflow Step", path: "/workflowMaster", icon: RiGitBranchLine },
+  { name: "Workflow Transition", path: "/TaskPermissionPage", icon: RiCornerDownRightLine }
+];
+var permissionItems = [
+  { name: "Task Permission", path: "/WorkflowType", icon: RiUserSettingsLine },
+  { name: "Assignment Rule", path: "/WorkflowType", icon: RiFileShieldLine }
+];
+var hierarchyItems = [
+  { name: "Hierarchy Node", path: "/WorkflowType", icon: RiNodeTree },
+  { name: "User Hierarchy Mapping", path: "/WorkflowType", icon: RiUserSharedLine },
+  { name: "Workflow Settings", path: "/WorkflowType", icon: RiSettings4Line }
+];
+var documentItems = [
+  { name: "Document Configuration", path: "/WorkflowType", icon: RiFileSettingsLine }
+];
+var fileItems = [
+  { name: "File Instance", path: "/WorkflowType", icon: RiFileList3Line },
+  { name: "File Pool", path: "/WorkflowType", icon: RiDatabase2Line },
+  { name: "Uploaded Document", path: "/WorkflowType", icon: RiFileUploadLine }
+];
+var communicationItems = [
+  { name: "Notification", path: "/WorkflowType", icon: RiNotification4Line },
+  { name: "Comment", path: "/WorkflowType", icon: RiChat3Line }
+];
+var taskItems = [
+  { name: "Task Instance", path: "/WorkflowType", icon: RiCheckboxMultipleLine }
+];
+var trackingItems = [
+  { name: "Audit Log", path: "/WorkflowType", icon: RiShieldCheckLine },
+  { name: "Movement History", path: "/WorkflowType", icon: RiHistoryLine }
+];
+function Sidebar({ isOpen, onToggle }) {
+  const router = useRouter();
+  const [workflowOpen, setWorkflowOpen] = useState2(false);
+  const [permissionOpen, setPermissionOpen] = useState2(false);
+  const [hierarchyOpen, setHierarchyOpen] = useState2(false);
+  const [documentOpen, setDocumentOpen] = useState2(false);
+  const [filesOpen, setFilesOpen] = useState2(false);
+  const [tasksOpen, setTasksOpen] = useState2(false);
+  const [trackingOpen, setTrackingOpen] = useState2(false);
+  const [communicationOpen, setCommunicationOpen] = useState2(false);
+  const renderMenuItem = (item) => {
+    const Icon = item.icon;
+    return /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        className: `
+        flex h-[56px] w-full items-center gap-[17px]
+        rounded-[9px] px-[17px]
+        text-left transition-colors duration-150
+        ${router.pathname === item.path ? "bg-blue-50 text-blue-600" : "text-[#344261] hover:bg-[#F6F8FC]"}
+      `,
+        onClick: () => router.push(item.path),
+        children: [
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              className: "\r\n            flex h-[20px] w-[20px] shrink-0\r\n            items-center justify-center\r\n            rounded-[6px] text-[#405170]\r\n          ",
+              children: /* @__PURE__ */ jsx5(Icon, { size: 17 })
+            }
+          ),
+          /* @__PURE__ */ jsx5("span", { className: "whitespace-nowrap text-[14px] font-medium leading-[22px]", children: item.name })
+        ]
+      },
+      item.name
+    );
+  };
+  const renderDropdown = (title, open, setOpen, items) => {
+    return /* @__PURE__ */ jsxs4("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen(!open),
+          className: "\r\n          flex h-[50px] w-full items-center justify-between\r\n          rounded-[9px] px-[17px]\r\n          text-left text-[#344261]\r\n          transition-colors duration-150\r\n          hover:bg-[#F6F8FC]\r\n        ",
+          children: [
+            /* @__PURE__ */ jsx5("span", { className: "text-[16px] font-semibold", children: title }),
+            open ? /* @__PURE__ */ jsx5(RiArrowDownSLine, { size: 18 }) : /* @__PURE__ */ jsx5(RiArrowRightSLine, { size: 18 })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsx5("div", { className: "ml-[8px] border-l border-[#E5E9F1] pl-[4px]", children: items.map(renderMenuItem) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4(
+      "aside",
+      {
+        className: `
+          flex h-screen flex-col overflow-hidden
+          border-r border-[#E5E9F1] bg-white
+          font-sans text-[#273657]
+          transition-all duration-300 ease-in-out
+          ${isOpen ? "w-[245px] min-w-[245px] translate-x-0 opacity-100" : "w-0 min-w-0 -translate-x-full opacity-0"}
+        `,
+        children: [
+          /* @__PURE__ */ jsxs4(
+            "header",
+            {
+              className: "\r\n    flex h-[84px] items-center justify-between\r\n    border-b border-[#EDF0F5]\r\n    px-[14px]\r\n  ",
+              children: [
+                /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs4(
+                    "svg",
+                    {
+                      width: "36",
+                      height: "42",
+                      viewBox: "0 0 48 56",
+                      fill: "none",
+                      children: [
+                        /* @__PURE__ */ jsx5(
+                          "path",
+                          {
+                            d: "M24 2L45 12.5L24 23L3 12.5L24 2Z",
+                            fill: "#356AF3"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx5(
+                          "path",
+                          {
+                            d: "M24 8L34 13L24 18L14 13L24 8Z",
+                            fill: "white"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx5(
+                          "path",
+                          {
+                            d: "M3 20L24 30.5L45 20V27L24 37.5L3 27V20Z",
+                            fill: "#356AF3"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx5(
+                          "path",
+                          {
+                            d: "M3 33L24 43.5L45 33V40L24 50.5L3 40V33Z",
+                            fill: "#356AF3"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs4("div", { children: [
+                    /* @__PURE__ */ jsx5("h1", { className: "text-[18px] font-extrabold text-[#101318]", children: "FLOWCORE" }),
+                    /* @__PURE__ */ jsx5("p", { className: "text-[12px] text-[#344261]", children: "Workflow Engine" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onToggle,
+                    className: "\r\n      flex h-8 w-8\r\n      items-center justify-center\r\n      rounded-lg\r\n      hover:bg-gray-100\r\n    ",
+                    children: /* @__PURE__ */ jsx5(RiMenuLine, { size: 18 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: "\r\n    min-h-0 flex-1\r\n    overflow-y-auto overflow-x-hidden\r\n    px-[27px] pb-[30px] pt-[31px]\r\n  ",
+              children: [
+                /* @__PURE__ */ jsx5(
+                  "p",
+                  {
+                    className: "\r\n      mb-[19px] ml-[15px]\r\n      text-[14px] font-bold uppercase\r\n      leading-[20px] tracking-[0.2px]\r\n      text-[#3C4D74]\r\n    ",
+                    children: "Configuration Masters"
+                  }
+                ),
+                /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-[3px]", children: [
+                  renderDropdown(
+                    "Workflow",
+                    workflowOpen,
+                    setWorkflowOpen,
+                    workflowItems
+                  ),
+                  renderDropdown(
+                    "Permissions",
+                    permissionOpen,
+                    setPermissionOpen,
+                    permissionItems
+                  ),
+                  renderDropdown(
+                    "Documents",
+                    documentOpen,
+                    setDocumentOpen,
+                    documentItems
+                  ),
+                  renderDropdown(
+                    "Hierarchy",
+                    hierarchyOpen,
+                    setHierarchyOpen,
+                    hierarchyItems
+                  )
+                ] }),
+                /* @__PURE__ */ jsx5(
+                  "p",
+                  {
+                    className: "\r\n      mb-[19px] ml-[15px] mt-[39px]\r\n      text-[14px] font-bold uppercase\r\n      leading-[20px] tracking-[0.2px]\r\n      text-[#3C4D74]\r\n    ",
+                    children: "Runtime"
+                  }
+                ),
+                /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-[3px]", children: [
+                  renderDropdown(
+                    "Files",
+                    filesOpen,
+                    setFilesOpen,
+                    fileItems
+                  ),
+                  renderDropdown(
+                    "Tasks",
+                    tasksOpen,
+                    setTasksOpen,
+                    taskItems
+                  ),
+                  renderDropdown(
+                    "Tracking",
+                    trackingOpen,
+                    setTrackingOpen,
+                    trackingItems
+                  ),
+                  renderDropdown(
+                    "Communication",
+                    communicationOpen,
+                    setCommunicationOpen,
+                    communicationItems
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "\r\n    shrink-0\r\n    bg-white\r\n    px-[27px]\r\n    pb-[34px]\r\n    pt-[18px]\r\n  ",
+              children: /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  type: "button",
+                  className: "\r\n      flex h-[66px] w-full\r\n      items-center gap-[18px]\r\n      rounded-[10px]\r\n      border border-[#E1E5ED]\r\n      bg-white\r\n      px-[23px]\r\n      text-left\r\n      text-[16px]\r\n      font-semibold\r\n      text-[#2D3A58]\r\n      shadow-sm\r\n      hover:bg-[#F7F8FC]\r\n      transition\r\n    ",
+                  children: [
+                    /* @__PURE__ */ jsx5(RiSettings4Line, { size: 20 }),
+                    /* @__PURE__ */ jsx5("span", { children: "Settings" })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    !isOpen && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-label": "Open sidebar",
+        className: "\r\n            fixed left-[20px] top-[30px] z-[100]\r\n            flex h-[46px] w-[46px]\r\n            items-center justify-center\r\n            rounded-[9px]\r\n            border border-[#E1E5ED]\r\n            bg-white text-[#344261]\r\n            shadow-[0_2px_8px_rgba(0,0,0,0.08)]\r\n            transition-colors\r\n            hover:bg-[#F3F5F9]\r\n          ",
+        children: /* @__PURE__ */ jsx5(RiMenuLine, { size: 18 })
+      }
+    )
+  ] });
+}
+
+// src/pages/Sidebar.js
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Home() {
+  const [isOpen, setIsOpen] = useState3(true);
+  return /* @__PURE__ */ jsx6("div", { className: "flex h-screen", children: /* @__PURE__ */ jsx6(
+    Sidebar,
+    {
+      isOpen,
+      onToggle: () => setIsOpen(!isOpen)
+    }
+  ) });
+}
 export {
+  Home as Sidebar,
   WorkflowPage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowcore-fn",
-  "version": "2.3.0",
+  "version": "2.5.0",
   
   "main": "dist/pkg-index.js",
   "module": "dist/pkg-index.mjs",