unifyedx-storybook-new 0.1.6 → 0.1.8

package/dist/unifyedx-storybook-new.css

@@ -646,6 +646,7 @@
   padding: 0rem 1.5rem;
   border-bottom: 1px solid #e5e7eb;
   flex-shrink: 0;
+  padding: 16px 20px;
 }
 
 .dialog-title-text {
@@ -3508,6 +3509,133 @@
   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;
+}
+
+.options-menu-wrapper {
+  position: relative;
+  display: inline-block;
+  text-align: left;
+}
+
+.options-menu-trigger {
+  display: inline-flex;
+  justify-content: center;
+  width: 100%;
+  padding: 0.25rem;
+  border-radius: 9999px;
+  cursor: pointer;
+  color: #4b5563; /* gray-600 */
+  background-color: transparent;
+  border: none;
+}
+
+.options-menu-trigger:hover {
+  background-color: #f3f4f6; /* gray-100 */
+}
+
+.options-menu-trigger:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.options-menu-panel {
+  position: absolute; /* Will be managed by floating-ui */
+  z-index: 20;
+  width: 12rem; /* 192px */
+  margin-top: 0.5rem;
+  origin-top-right: ;
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  padding: 0.25rem;
+}
+
+.options-menu-panel:focus {
+  outline: none;
+}
+
+.options-menu-item-wrapper {
+  /* Wrapper to contain dividers */
+}
+
+.menu-divider {
+  height: 1px;
+  background-color: #e5e7eb;
+  margin: 0.25rem 0;
+}
+
+.options-menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: #374151; /* gray-700 */
+  border-radius: 0.25rem;
+  transition: background-color 0.15s, color 0.15s;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.options-menu-item.active {
+  background-color: #2563eb;
+  color: white;
+}
+
+.options-menu-item:disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.options-menu-item .item-icon {
+  margin-right: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+}
 .avatar-container {
   display: inline-flex;
   align-items: center;
@@ -4643,6 +4771,7 @@
   padding: 0rem 1.5rem;
   border-bottom: 1px solid #e5e7eb;
   flex-shrink: 0;
+  padding: 16px 20px;
 }
 .dialog-title-text {
   font-size: 1.25rem;
@@ -6665,3 +6794,123 @@
   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;
+}
+.options-menu-wrapper {
+  position: relative;
+  display: inline-block;
+  text-align: left;
+}
+
+.options-menu-trigger {
+  display: inline-flex;
+  justify-content: center;
+  width: 100%;
+  padding: 0.25rem;
+  border-radius: 9999px;
+  cursor: pointer;
+  color: #4b5563; /* gray-600 */
+  background-color: transparent;
+  border: none;
+}
+.options-menu-trigger:hover {
+  background-color: #f3f4f6; /* gray-100 */
+}
+.options-menu-trigger:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.options-menu-panel {
+  position: absolute; /* Will be managed by floating-ui */
+  z-index: 20;
+  width: 12rem; /* 192px */
+  margin-top: 0.5rem;
+  origin-top-right: ;
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  padding: 0.25rem;
+}
+.options-menu-panel:focus {
+  outline: none;
+}
+
+.options-menu-item-wrapper {
+  /* Wrapper to contain dividers */
+}
+
+.menu-divider {
+  height: 1px;
+  background-color: #e5e7eb;
+  margin: 0.25rem 0;
+}
+
+.options-menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: #374151; /* gray-700 */
+  border-radius: 0.25rem;
+  transition: background-color 0.15s, color 0.15s;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.options-menu-item.active {
+  background-color: #2563eb;
+  color: white;
+}
+.options-menu-item:disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.options-menu-item .item-icon {
+  margin-right: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+}

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

@@ -1,6 +1,7 @@
 import React, { forwardRef, createElement, useState, useMemo, useId as useId$1, createContext, useContext, useCallback, useRef, useLayoutEffect, useEffect, Fragment, useImperativeHandle } from 'react';
-import { Popover as Popover$1, PopoverButton, PopoverPanel, Transition, Dialog, TransitionChild, DialogPanel, DialogTitle, TabGroup, TabList, Tab, TabPanels, RadioGroup as RadioGroup$1, Listbox, ListboxButton, ListboxOptions, ListboxOption, SwitchGroup, Switch } from '@headlessui/react';
+import { Popover as Popover$1, PopoverButton, PopoverPanel, Transition, Dialog, TransitionChild, DialogPanel, DialogTitle, TabGroup, TabList, Tab, TabPanels, RadioGroup as RadioGroup$1, Listbox, ListboxButton, ListboxOptions, ListboxOption, SwitchGroup, Switch, Menu as Menu$1, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
 import { motion, AnimatePresence } from 'framer-motion';
+import { useFloating, offset as offset$2, flip as flip$2, shift as shift$2, autoUpdate as autoUpdate$1 } from '@floating-ui/react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -581,11 +582,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$k = [
+const __iconNode$m = [
   ["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$m);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -595,13 +596,13 @@ const ArrowLeft = createLucideIcon("arrow-left", __iconNode$k);
  */
 
 
-const __iconNode$j = [
+const __iconNode$l = [
   ["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$l);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -611,8 +612,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$k = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$k);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -622,8 +623,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$j = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$j);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -633,8 +634,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$i = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$i);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -644,8 +645,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$h = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$h);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -655,11 +656,11 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$f);
  */
 
 
-const __iconNode$e = [
+const __iconNode$g = [
   ["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$g);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -669,11 +670,11 @@ const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$e);
  */
 
 
-const __iconNode$d = [
+const __iconNode$f = [
   ["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$f);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -683,11 +684,11 @@ const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$d);
  */
 
 
-const __iconNode$c = [
+const __iconNode$e = [
   ["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$e);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -697,11 +698,11 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$d = [
   ["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$d);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -711,12 +712,12 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$b);
  */
 
 
-const __iconNode$a = [
+const __iconNode$c = [
   ["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$c);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -726,12 +727,27 @@ const CloudUpload = createLucideIcon("cloud-upload", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$b = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
+  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
+];
+const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$b);
+
+/**
+ * @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$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 +757,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 +772,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 +783,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 +798,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 +43215,80 @@ 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
+    ] })
+  ] });
+};
+
+const OptionsMenu = ({
+  options = [],
+  onSelect,
+  triggerIcon: TriggerIcon = EllipsisVertical
+}) => {
+  const { refs, floatingStyles } = useFloating({
+    whileElementsMounted: autoUpdate$1,
+    middleware: [offset$2(5), flip$2(), shift$2({ padding: 5 })]
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Menu$1, { as: "div", className: "options-menu-wrapper", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(MenuButton, { ref: refs.setReference, className: "options-menu-trigger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriggerIcon, { size: 20 }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Transition,
+      {
+        as: Fragment,
+        enter: "transition ease-out duration-100",
+        enterFrom: "transform opacity-0 scale-95",
+        enterTo: "transform opacity-100 scale-100",
+        leave: "transition ease-in duration-75",
+        leaveFrom: "transform opacity-100 scale-100",
+        leaveTo: "transform opacity-0 scale-95",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          MenuItems,
+          {
+            ref: refs.setFloating,
+            style: floatingStyles,
+            className: "options-menu-panel",
+            children: options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "options-menu-item-wrapper", children: [
+              option.dividerBefore && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "menu-divider" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { children: ({ active }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "button",
+                {
+                  onClick: () => onSelect(option),
+                  className: `options-menu-item ${active ? "active" : ""}`,
+                  disabled: option.disabled,
+                  children: [
+                    option.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "item-icon", children: option.icon }),
+                    option.label
+                  ]
+                }
+              ) })
+            ] }, option.label))
+          }
+        )
+      }
+    )
+  ] });
+};
+
+export { Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, OptionsMenu, 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.8",
   "type": "module",
   "main": "dist/unifyedx-storybook-new.es.js",
   "module": "dist/unifyedx-storybook-new.es.js",
@@ -18,6 +18,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.13",
     "@headlessui/react": "*",
     "@hookform/resolvers": "^5.1.1",
     "@storybook/jest": "^0.2.2",
@@ -37,6 +38,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",
@@ -72,6 +74,7 @@
     "@headlessui/react": "*",
     "framer-motion": "*",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "@floating-ui/react": "^0.27.13"
   }
 }