@algorithm-shift/design-system 1.2.984 → 1.2.986

package/dist/index.d.mts

@@ -8,6 +8,7 @@ import { ClassValue } from 'clsx';
 interface ModalProps {
     isOpen: boolean | string;
     onModalClose?: () => void;
+    onModalOpen?: () => void;
     title: string;
     children: React$1.ReactNode;
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -15,7 +16,7 @@ interface ModalProps {
     className?: string;
     style?: React$1.CSSProperties;
 }
-declare function Modal({ isOpen, onModalClose, title, children, size, showCloseButton, className, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onModalClose, onModalOpen, title, children, size, showCloseButton, className, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
 interface ElementProps {
   children?: React.ReactNode;
@@ -234,6 +235,7 @@ interface NavbarProps extends ElementProps {
   isBuilder?: boolean;
   source?: string;
   navList?: Record<string, any>;
+  onSearch?: (search: { searchTerm: string }) => void;
 }
 
 interface BreadcrumbProps extends ElementProps {
@@ -243,6 +245,8 @@ interface BreadcrumbProps extends ElementProps {
 interface ButtonGroupProps extends ElementProps {
   textContent?: string;
   list?: Record<string, any>;
+  onGroupItemClick?: (data: { item: Record<string, any>}) => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 interface AccordionProps extends ElementProps {
   name?: string;
@@ -311,7 +315,7 @@ declare const Typography: ({ className, style, tagName, textContent, }: Typograp
 
 declare const Breadcrumb: ({ list, className, style }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
 
-declare function SplitButton({ style, textContent, className, list }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare function ButtonGroup({ style, textContent, className, list, onGroupItemClick, onClick }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
 type IconSet = 'fa-css' | 'fa' | 'fontawesome' | 'lucide';
 type FAPrefix = 'fas' | 'far' | 'fab' | string;
@@ -449,7 +453,8 @@ declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, styl
 
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 
-declare function Navbar({ style, badgeType, badgeCount, hideBadgeWhenZero, profileType, showName, imageUrl, altText, canvasMode, list, profileMenu, userName, isBuilder, source, navList }: NavbarProps): react_jsx_runtime.JSX.Element;
+declare function Navbar({ style, badgeType, badgeCount, hideBadgeWhenZero, profileType, showName, imageUrl, altText, canvasMode, // desktop | mobile | tablet
+list, profileMenu, userName, isBuilder, source, navList, onSearch }: NavbarProps): react_jsx_runtime.JSX.Element;
 
 declare const _default$1: React$1.MemoExoticComponent<({ className, style, loading: externalLoading, dataKey, dataLabel, apiUrl, isPaginationEnabled, limit, canvasMode, ...props }: BarChartProps) => react_jsx_runtime.JSX.Element>;
 
@@ -473,4 +478,4 @@ declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Ele
 declare function cn(...inputs: ClassValue[]): string;
 declare function getInitials(name: string): string;
 
-export { Accordion, AccordionGroup, _default$1 as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DateTimePicker as DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, HistoryTimeline, Icon, ImageControl as Image, Modal, MultiCheckbox, LazyMultiSelectDropdown as MultiSelect, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, _default as PieChart, RadioInput as RadioGroup, _default$2 as Repeater, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };
+export { Accordion, AccordionGroup, _default$1 as BarChart, Breadcrumb, ButtonWrapper as Button, ButtonGroup, CheckboxInput as Checkbox, Container, DateTimePicker as DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, HistoryTimeline, Icon, ImageControl as Image, Modal, MultiCheckbox, LazyMultiSelectDropdown as MultiSelect, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, _default as PieChart, RadioInput as RadioGroup, _default$2 as Repeater, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { ClassValue } from 'clsx';
 interface ModalProps {
     isOpen: boolean | string;
     onModalClose?: () => void;
+    onModalOpen?: () => void;
     title: string;
     children: React$1.ReactNode;
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -15,7 +16,7 @@ interface ModalProps {
     className?: string;
     style?: React$1.CSSProperties;
 }
-declare function Modal({ isOpen, onModalClose, title, children, size, showCloseButton, className, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onModalClose, onModalOpen, title, children, size, showCloseButton, className, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
 interface ElementProps {
   children?: React.ReactNode;
@@ -234,6 +235,7 @@ interface NavbarProps extends ElementProps {
   isBuilder?: boolean;
   source?: string;
   navList?: Record<string, any>;
+  onSearch?: (search: { searchTerm: string }) => void;
 }
 
 interface BreadcrumbProps extends ElementProps {
@@ -243,6 +245,8 @@ interface BreadcrumbProps extends ElementProps {
 interface ButtonGroupProps extends ElementProps {
   textContent?: string;
   list?: Record<string, any>;
+  onGroupItemClick?: (data: { item: Record<string, any>}) => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 interface AccordionProps extends ElementProps {
   name?: string;
@@ -311,7 +315,7 @@ declare const Typography: ({ className, style, tagName, textContent, }: Typograp
 
 declare const Breadcrumb: ({ list, className, style }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
 
-declare function SplitButton({ style, textContent, className, list }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare function ButtonGroup({ style, textContent, className, list, onGroupItemClick, onClick }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
 type IconSet = 'fa-css' | 'fa' | 'fontawesome' | 'lucide';
 type FAPrefix = 'fas' | 'far' | 'fab' | string;
@@ -449,7 +453,8 @@ declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, styl
 
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 
-declare function Navbar({ style, badgeType, badgeCount, hideBadgeWhenZero, profileType, showName, imageUrl, altText, canvasMode, list, profileMenu, userName, isBuilder, source, navList }: NavbarProps): react_jsx_runtime.JSX.Element;
+declare function Navbar({ style, badgeType, badgeCount, hideBadgeWhenZero, profileType, showName, imageUrl, altText, canvasMode, // desktop | mobile | tablet
+list, profileMenu, userName, isBuilder, source, navList, onSearch }: NavbarProps): react_jsx_runtime.JSX.Element;
 
 declare const _default$1: React$1.MemoExoticComponent<({ className, style, loading: externalLoading, dataKey, dataLabel, apiUrl, isPaginationEnabled, limit, canvasMode, ...props }: BarChartProps) => react_jsx_runtime.JSX.Element>;
 
@@ -473,4 +478,4 @@ declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Ele
 declare function cn(...inputs: ClassValue[]): string;
 declare function getInitials(name: string): string;
 
-export { Accordion, AccordionGroup, _default$1 as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DateTimePicker as DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, HistoryTimeline, Icon, ImageControl as Image, Modal, MultiCheckbox, LazyMultiSelectDropdown as MultiSelect, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, _default as PieChart, RadioInput as RadioGroup, _default$2 as Repeater, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };
+export { Accordion, AccordionGroup, _default$1 as BarChart, Breadcrumb, ButtonWrapper as Button, ButtonGroup, CheckboxInput as Checkbox, Container, DateTimePicker as DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, HistoryTimeline, Icon, ImageControl as Image, Modal, MultiCheckbox, LazyMultiSelectDropdown as MultiSelect, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, _default as PieChart, RadioInput as RadioGroup, _default$2 as Repeater, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };

package/dist/index.js

@@ -36,7 +36,7 @@ __export(src_exports, {
   BarChart: () => BarChart_default,
   Breadcrumb: () => Breadcrumb_default,
   Button: () => Button_default,
-  ButtonGroup: () => SplitButton,
+  ButtonGroup: () => ButtonGroup,
   Checkbox: () => Checkbox_default,
   Container: () => Container_default,
   DatePicker: () => DateTimePicker,
@@ -119,6 +119,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function Modal({
   isOpen,
   onModalClose,
+  onModalOpen,
   title,
   children,
   size = "md",
@@ -126,6 +127,11 @@ function Modal({
   className = "",
   style = {}
 }) {
+  (0, import_react.useEffect)(() => {
+    if (isOpen && onModalOpen) {
+      onModalOpen();
+    }
+  }, [isOpen]);
   (0, import_react.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -647,6 +653,7 @@ var Breadcrumb_default = Breadcrumb;
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
 var import_lucide_react3 = require("lucide-react");
+var import_link2 = __toESM(require("next/link"));
 
 // src/components/ui/dropdown-menu.tsx
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
@@ -706,6 +713,19 @@ function DropdownMenuItem({
     }
   );
 }
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
 function DropdownMenuSub({
   ...props
 }) {
@@ -752,9 +772,9 @@ function DropdownMenuSubContent({
 }
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
-var import_link2 = __toESM(require("next/link"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function SplitButton({ style, textContent, className, list = [] }) {
+function ButtonGroup({ style, textContent, className, list = [], onGroupItemClick, onClick }) {
+  const data = Array.isArray(list) ? list : [];
   const bgColor = style?.backgroundColor || "";
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "inline-flex rounded-md overflow-hidden border border-teal-200 bg-teal-700 items-center focus:ring-0", style: { backgroundColor: bgColor }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -762,6 +782,7 @@ function SplitButton({ style, textContent, className, list = [] }) {
       {
         className: `rounded-none border-r px-4 py-2 text-whit focus:ring-0 ${className || ""}`,
         style: { backgroundColor: bgColor },
+        onClick: (e) => onClick?.(e),
         children: textContent || "Button"
       }
     ),
@@ -775,7 +796,24 @@ function SplitButton({ style, textContent, className, list = [] }) {
           children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react3.ChevronDown, { className: "w-4 h-4" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuContent, { align: "end", className: "bg-white min-w-[120px]", children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_link2.default, { href: item.url || "#", children: item.header }) }, item.id)) })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        DropdownMenuContent,
+        {
+          align: "end",
+          className: "bg-white min-w-[120px]",
+          children: data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            DropdownMenuItem,
+            {
+              className: "text-black",
+              onSelect: () => onGroupItemClick?.({
+                item
+              }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_link2.default, { href: item.url || "#", children: item.header })
+            },
+            item.id
+          ))
+        }
+      )
     ] })
   ] });
 }
@@ -1552,6 +1590,7 @@ function MultiCheckbox({
               {
                 id: props.name ? `${props.name}-${opt.value}` : opt.value,
                 className: cn(hasError && "text-red-600"),
+                htmlFor: props.name ? `${props.name}-${opt.value}` : opt.value,
                 children: opt.label
               }
             )
@@ -2167,7 +2206,8 @@ function LazySelectDropdown({
         onFocus: handleFocus,
         onChange: handleSearchChange,
         readOnly: !isOpen || readOnly,
-        disabled
+        disabled,
+        autoComplete: "off"
       }
     ),
     selectedOption && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -3355,7 +3395,8 @@ function LazyMultiSelectDropdown({
               value: isOpen ? searchTerm : "",
               onChange: handleSearch,
               readOnly,
-              disabled
+              disabled,
+              autoComplete: "off"
             }
           )
         ]
@@ -3923,13 +3964,13 @@ function DataTable({
     const shouldShowLeftDots = leftSiblingIndex > 2;
     const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
     if (!shouldShowLeftDots && shouldShowRightDots) {
-      return [1, 2, 3, "...", totalPages];
+      return [1, 2, 3, "..."];
     }
     if (shouldShowLeftDots && !shouldShowRightDots) {
       return [1, "...", totalPages - 2, totalPages - 1, totalPages];
     }
     if (shouldShowLeftDots && shouldShowRightDots) {
-      return [1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages];
+      return [1, "...", currentPage - 1, currentPage, currentPage + 1, "..."];
     }
     return [];
   };
@@ -4135,7 +4176,7 @@ function DataTable({
         return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           TableCell,
           {
-            className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2`,
+            className: `break-words whitespace-normal align-top ${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2`,
             style: {
               width: cell.column.getSize(),
               minWidth: cell.column.columnDef.minSize,
@@ -5249,7 +5290,11 @@ var import_jsx_runtime63 = require("react/jsx-runtime");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 
 // src/components/Navigation/Navbar/Navbar.tsx
+var import_react34 = require("react");
 var import_lucide_react18 = require("lucide-react");
+var import_image2 = __toESM(require("next/image"));
+var import_link4 = __toESM(require("next/link"));
+var import_navigation3 = require("next/navigation");
 
 // src/components/ui/avatar.tsx
 var React12 = __toESM(require("react"));
@@ -5290,11 +5335,6 @@ var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/Navigation/Navbar/Navbar.tsx
-var import_link4 = __toESM(require("next/link"));
-var import_image2 = __toESM(require("next/image"));
-var import_navigation3 = require("next/navigation");
-var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_react34 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 function Navbar({
   style,
@@ -5306,44 +5346,76 @@ function Navbar({
   imageUrl,
   altText = "Logo",
   canvasMode = "desktop",
+  // desktop | mobile | tablet
   list = [],
   profileMenu = [],
   userName = "Guest User",
   isBuilder = false,
   source,
-  navList
+  navList,
+  onSearch
 }) {
-  const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
   const router = (0, import_navigation3.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_react34.useState)(false);
-  const [pendingUrl, setPendingUrl] = (0, import_react34.useState)(null);
+  const [screenMode, setScreenMode] = (0, import_react34.useState)(
+    canvasMode
+  );
+  (0, import_react34.useEffect)(() => {
+    const detectMode = () => {
+      if (window.innerWidth < 640) setScreenMode("mobile");
+      else if (window.innerWidth < 1024) setScreenMode("tablet");
+      else setScreenMode("desktop");
+    };
+    detectMode();
+    window.addEventListener("resize", detectMode);
+    return () => window.removeEventListener("resize", detectMode);
+  }, []);
+  const mode = canvasMode || screenMode;
+  const isMobile = mode === "mobile";
+  const isTablet = mode === "tablet";
+  const isDesktop = mode === "desktop";
   const handleBuilderExit = (0, import_react34.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
-        setPendingUrl(url);
-        setShowExitDialog(true);
+        showSonnerToast({ variant: "info", title: `You will be redirected to ${url} in the real app.`, duration: 3e3 });
+      } else {
+        router.push(url);
       }
     },
     [isBuilder]
   );
-  const confirmExit = () => {
-    if (pendingUrl) {
-      setShowExitDialog(false);
-      router.push(pendingUrl);
-    }
-  };
-  const formatedMenu = (0, import_react34.useMemo)(() => {
-    if (source === "state" && navList && navList.length) {
-      return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
+  const formattedMenu = (0, import_react34.useMemo)(() => {
+    if (source === "state" && navList?.length) {
+      return navList.map((i) => ({
+        ...i,
+        header: i.name || "Menu"
+      }));
     }
-    return list || [];
-  }, [source, navList]);
+    return list;
+  }, [source, navList, list]);
+  const RenderSearchInput = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-1 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react18.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      Input,
+      {
+        placeholder: "Search",
+        className: "pl-9 text-gray-500",
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            const query = event.target.value;
+            onSearch?.({
+              searchTerm: query
+            });
+          }
+        }
+      }
+    )
+  ] }) });
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "nav",
       {
-        className: "w-full h-[75px] border-b border-b-white dark:border-b-gray-800 dark:bg-gray-800 bg-white shadow-sm",
+        className: "w-full min-h-[75px] border-b border-gray-200 dark:border-gray-800 dark:bg-gray-800 bg-white shadow-sm",
         style,
         children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -5352,69 +5424,36 @@ function Navbar({
               href: "/",
               onClick: (e) => handleBuilderExit(e, "/"),
               className: "flex items-center space-x-2",
-              children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_image2.default, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" })
+              children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_image2.default, { src: imageUrl, alt: altText, width: 180, height: 40 }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" })
             }
           ),
-          !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+          isDesktop && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "hidden md:flex items-center space-x-6", children: formattedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             import_link4.default,
             {
-              href: item.url || "#",
+              href: item.url,
               onClick: (e) => handleBuilderExit(e, item.url),
-              className: "text-sm font-medium dark:text-white text-gray-600 hover:text-gray-900 transition-colors",
+              className: "text-sm font-medium text-gray-600 dark:text-white hover:text-gray-900",
               children: item.header
             },
             item.id
           )) }),
           /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center space-x-3", children: [
-            !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react18.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
-            ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react18.Search, { className: "h-5 w-5 text-gray-400" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react18.Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
-              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
+            (isDesktop || isTablet) && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RenderSearchInput, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react18.Bell, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }) }),
+              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center bg-red-500 rounded-full text-white text-[10px]", children: badgeCount }) : !hideBadgeWhenZero && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DropdownMenu, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center space-x-2", children: [
-                !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
-                !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                    AvatarImage,
-                    {
-                      src: "/images/appbuilder/toolset/profile.svg",
-                      alt: "Profile"
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "icon",
-                      className: "text-gray-900 md:hidden dark:invert",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react18.Menu, { className: "h-6 w-6" })
-                    }
-                  )
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react18.Menu, { className: "h-6 w-6" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center space-x-2 cursor-pointer", children: [
+                !isMobile && showName && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h4", { className: "text-gray-900 dark:text-gray-300 text-sm", children: userName }),
+                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Avatar, { className: "h-8 w-8", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(AvatarImage, { src: "/images/appbuilder/toolset/profile.svg", alt: "profile" }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "bg-green-700 text-white h-full w-full rounded-full flex items-center justify-center text-xs", children: getInitials(userName) }) }),
+                (isMobile || isTablet) && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react18.Menu, { className: "h-6 w-6" }) })
               ] }) }),
               /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
-                profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_jsx_runtime66.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                  import_link4.default,
-                  {
-                    href: item.url || "#",
-                    onClick: (e) => handleBuilderExit(e, item.url),
-                    children: item.header
-                  }
-                ) }, item.id)) }),
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "md:hidden", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_dropdown_menu.DropdownMenuSeparator, {}),
-                  formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_jsx_runtime66.Fragment, { children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                    import_link4.default,
-                    {
-                      href: item.url || "#",
-                      onClick: (e) => handleBuilderExit(e, item.url),
-                      children: item.header
-                    }
-                  ) }, item.id)) })
+                profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_link4.default, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id)),
+                (isMobile || isTablet) && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DropdownMenuSeparator, {}),
+                  formattedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_link4.default, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id))
                 ] })
               ] })
             ] })
@@ -5422,16 +5461,7 @@ function Navbar({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DialogFooter, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
-      ] })
-    ] }) })
+    isMobile && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RenderSearchInput, {}) })
   ] });
 }