@algorithm-shift/design-system 1.2.984 → 1.2.986

package/dist/index.mjs

@@ -22,6 +22,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function Modal({
   isOpen,
   onModalClose,
+  onModalOpen,
   title,
   children,
   size = "md",
@@ -29,6 +30,11 @@ function Modal({
   className = "",
   style = {}
 }) {
+  useEffect(() => {
+    if (isOpen && onModalOpen) {
+      onModalOpen();
+    }
+  }, [isOpen]);
   useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -550,6 +556,7 @@ var Breadcrumb_default = Breadcrumb;
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
 import { ChevronDown } from "lucide-react";
+import Link2 from "next/link";
 
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -609,6 +616,19 @@ function DropdownMenuItem({
     }
   );
 }
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
 function DropdownMenuSub({
   ...props
 }) {
@@ -655,9 +675,9 @@ function DropdownMenuSubContent({
 }
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
-import Link2 from "next/link";
 import { jsx as jsx17, jsxs as jsxs7 } from "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__ */ jsxs7("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__ */ jsx17(
@@ -665,6 +685,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"
       }
     ),
@@ -678,7 +699,24 @@ function SplitButton({ style, textContent, className, list = [] }) {
           children: /* @__PURE__ */ jsx17(ChevronDown, { className: "w-4 h-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx17(DropdownMenuContent, { align: "end", className: "bg-white min-w-[120px]", children: list.map((item) => /* @__PURE__ */ jsx17(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ jsx17(Link2, { href: item.url || "#", children: item.header }) }, item.id)) })
+      /* @__PURE__ */ jsx17(
+        DropdownMenuContent,
+        {
+          align: "end",
+          className: "bg-white min-w-[120px]",
+          children: data.map((item) => /* @__PURE__ */ jsx17(
+            DropdownMenuItem,
+            {
+              className: "text-black",
+              onSelect: () => onGroupItemClick?.({
+                item
+              }),
+              children: /* @__PURE__ */ jsx17(Link2, { href: item.url || "#", children: item.header })
+            },
+            item.id
+          ))
+        }
+      )
     ] })
   ] });
 }
@@ -1455,6 +1493,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
               }
             )
@@ -2070,7 +2109,8 @@ function LazySelectDropdown({
         onFocus: handleFocus,
         onChange: handleSearchChange,
         readOnly: !isOpen || readOnly,
-        disabled
+        disabled,
+        autoComplete: "off"
       }
     ),
     selectedOption && !disabled && !readOnly && /* @__PURE__ */ jsx36(
@@ -3262,7 +3302,8 @@ function LazyMultiSelectDropdown({
               value: isOpen ? searchTerm : "",
               onChange: handleSearch,
               readOnly,
-              disabled
+              disabled,
+              autoComplete: "off"
             }
           )
         ]
@@ -3836,13 +3877,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 [];
   };
@@ -4048,7 +4089,7 @@ function DataTable({
         return /* @__PURE__ */ jsxs30(
           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,
@@ -5166,7 +5207,11 @@ import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
 import { jsx as jsx64 } from "react/jsx-runtime";
 
 // src/components/Navigation/Navbar/Navbar.tsx
+import { useCallback as useCallback4, useMemo as useMemo9, useState as useState14, useEffect as useEffect26 } from "react";
 import { Bell, Search as Search2, Menu as Menu2 } from "lucide-react";
+import Image3 from "next/image";
+import Link4 from "next/link";
+import { useRouter as useRouter2 } from "next/navigation";
 
 // src/components/ui/avatar.tsx
 import * as React12 from "react";
@@ -5207,11 +5252,6 @@ var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/Navigation/Navbar/Navbar.tsx
-import Link4 from "next/link";
-import Image3 from "next/image";
-import { useRouter as useRouter2 } from "next/navigation";
-import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
-import { useCallback as useCallback4, useMemo as useMemo9, useState as useState14 } from "react";
 import { Fragment as Fragment23, jsx as jsx66, jsxs as jsxs40 } from "react/jsx-runtime";
 function Navbar({
   style,
@@ -5223,44 +5263,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 = useRouter2();
-  const [showExitDialog, setShowExitDialog] = useState14(false);
-  const [pendingUrl, setPendingUrl] = useState14(null);
+  const [screenMode, setScreenMode] = useState14(
+    canvasMode
+  );
+  useEffect26(() => {
+    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 = useCallback4(
     (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 = useMemo9(() => {
-    if (source === "state" && navList && navList.length) {
-      return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
+  const formattedMenu = useMemo9(() => {
+    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__ */ jsx66("div", { className: "flex-1 px-2", children: /* @__PURE__ */ jsxs40("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+    /* @__PURE__ */ jsx66(Search2, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
+    /* @__PURE__ */ jsx66(
+      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__ */ jsxs40(Fragment23, { children: [
     /* @__PURE__ */ jsx66(
       "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__ */ jsxs40("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
           /* @__PURE__ */ jsx66(
@@ -5269,69 +5341,36 @@ function Navbar({
               href: "/",
               onClick: (e) => handleBuilderExit(e, "/"),
               className: "flex items-center space-x-2",
-              children: imageUrl ? /* @__PURE__ */ jsx66(Image3, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ jsx66("span", { className: "font-semibold text-blue-700", children: "Logo" })
+              children: imageUrl ? /* @__PURE__ */ jsx66(Image3, { src: imageUrl, alt: altText, width: 180, height: 40 }) : /* @__PURE__ */ jsx66("span", { className: "font-semibold text-blue-700", children: "Logo" })
             }
           ),
-          !isMobileView && /* @__PURE__ */ jsx66("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ jsx66(
+          isDesktop && /* @__PURE__ */ jsx66("div", { className: "hidden md:flex items-center space-x-6", children: formattedMenu.map((item) => /* @__PURE__ */ jsx66(
             Link4,
             {
-              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__ */ jsxs40("div", { className: "flex items-center space-x-3", children: [
-            !isMobileView ? /* @__PURE__ */ jsx66("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs40("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-              /* @__PURE__ */ jsx66(Search2, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
-              /* @__PURE__ */ jsx66(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
-            ] }) }) : /* @__PURE__ */ jsx66(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ jsx66(Search2, { className: "h-5 w-5 text-gray-400" }) }),
-            /* @__PURE__ */ jsxs40("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
-              /* @__PURE__ */ jsx66(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx66(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
-              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx66("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__ */ jsx66("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
+            (isDesktop || isTablet) && /* @__PURE__ */ jsx66(RenderSearchInput, {}),
+            /* @__PURE__ */ jsxs40("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-md", children: [
+              /* @__PURE__ */ jsx66(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx66(Bell, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }) }),
+              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx66("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__ */ jsx66("span", { className: "absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full" })
             ] }),
             /* @__PURE__ */ jsxs40(DropdownMenu, { children: [
-              /* @__PURE__ */ jsx66(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs40("div", { className: "flex items-center space-x-2", children: [
-                !isMobileView && showName && /* @__PURE__ */ jsx66("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
-                !isMobileView ? /* @__PURE__ */ jsxs40(Fragment23, { children: [
-                  /* @__PURE__ */ jsx66(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ jsx66(
-                    AvatarImage,
-                    {
-                      src: "/images/appbuilder/toolset/profile.svg",
-                      alt: "Profile"
-                    }
-                  ) : /* @__PURE__ */ jsx66("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__ */ jsx66(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "icon",
-                      className: "text-gray-900 md:hidden dark:invert",
-                      children: /* @__PURE__ */ jsx66(Menu2, { className: "h-6 w-6" })
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsx66(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ jsx66(Menu2, { className: "h-6 w-6" }) })
+              /* @__PURE__ */ jsx66(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs40("div", { className: "flex items-center space-x-2 cursor-pointer", children: [
+                !isMobile && showName && /* @__PURE__ */ jsx66("h4", { className: "text-gray-900 dark:text-gray-300 text-sm", children: userName }),
+                /* @__PURE__ */ jsx66(Avatar, { className: "h-8 w-8", children: profileType === "avatar" ? /* @__PURE__ */ jsx66(AvatarImage, { src: "/images/appbuilder/toolset/profile.svg", alt: "profile" }) : /* @__PURE__ */ jsx66("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__ */ jsx66(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx66(Menu2, { className: "h-6 w-6" }) })
               ] }) }),
               /* @__PURE__ */ jsxs40(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
-                profileMenu && profileMenu.length > 0 && /* @__PURE__ */ jsx66(Fragment23, { children: profileMenu.map((item) => /* @__PURE__ */ jsx66(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx66(
-                  Link4,
-                  {
-                    href: item.url || "#",
-                    onClick: (e) => handleBuilderExit(e, item.url),
-                    children: item.header
-                  }
-                ) }, item.id)) }),
-                /* @__PURE__ */ jsxs40("div", { className: "md:hidden", children: [
+                profileMenu.map((item) => /* @__PURE__ */ jsx66(DropdownMenuItem, { children: /* @__PURE__ */ jsx66(Link4, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id)),
+                (isMobile || isTablet) && /* @__PURE__ */ jsxs40(Fragment23, { children: [
                   /* @__PURE__ */ jsx66(DropdownMenuSeparator, {}),
-                  formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ jsx66(Fragment23, { children: formatedMenu.map((item) => /* @__PURE__ */ jsx66(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx66(
-                    Link4,
-                    {
-                      href: item.url || "#",
-                      onClick: (e) => handleBuilderExit(e, item.url),
-                      children: item.header
-                    }
-                  ) }, item.id)) })
+                  formattedMenu.map((item) => /* @__PURE__ */ jsx66(DropdownMenuItem, { children: /* @__PURE__ */ jsx66(Link4, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id))
                 ] })
               ] })
             ] })
@@ -5339,21 +5378,12 @@ function Navbar({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx66(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ jsxs40(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ jsxs40(DialogHeader, { children: [
-        /* @__PURE__ */ jsx66(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ jsx66(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
-      ] }),
-      /* @__PURE__ */ jsxs40(DialogFooter, { children: [
-        /* @__PURE__ */ jsx66(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx66(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
-      ] })
-    ] }) })
+    isMobile && /* @__PURE__ */ jsx66("div", { className: "p-3", children: /* @__PURE__ */ jsx66(RenderSearchInput, {}) })
   ] });
 }
 
 // src/components/Chart/BarChart.tsx
-import React13, { useEffect as useEffect26, useMemo as useMemo10, useState as useState15, useCallback as useCallback5 } from "react";
+import React13, { useEffect as useEffect27, useMemo as useMemo10, useState as useState15, useCallback as useCallback5 } from "react";
 import axios3 from "axios";
 import {
   BarChart,
@@ -5431,7 +5461,7 @@ var ChartComponent = ({
   const [currentPage, setCurrentPage] = useState15(1);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  useEffect26(() => {
+  useEffect27(() => {
     if (apiUrl) {
       setCurrentPage(1);
     }
@@ -5473,7 +5503,7 @@ var ChartComponent = ({
       if (!cancelled) setLocalLoading(false);
     }
   }, [apiUrl, limit]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!apiUrl) return;
     fetchData(currentPage);
   }, [apiUrl, currentPage, fetchData]);
@@ -5672,7 +5702,7 @@ var ChartComponent = ({
 var BarChart_default = React13.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React14, { useEffect as useEffect27, useMemo as useMemo11, useState as useState16 } from "react";
+import React14, { useEffect as useEffect28, useMemo as useMemo11, useState as useState16 } from "react";
 import axios4 from "axios";
 import {
   PieChart,
@@ -5762,7 +5792,7 @@ var DonutChart = ({
   const [localLoading, setLocalLoading] = useState16(false);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  useEffect27(() => {
+  useEffect28(() => {
     if (!apiUrl) return;
     let cancelled = false;
     const fetchData = async () => {
@@ -5844,7 +5874,7 @@ var DonutChart = ({
     return { inner: 70, outer: 130 };
   };
   const [mounted, setMounted] = useState16(false);
-  useEffect27(() => {
+  useEffect28(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
@@ -6085,7 +6115,7 @@ export {
   BarChart_default as BarChart,
   Breadcrumb_default as Breadcrumb,
   Button_default as Button,
-  SplitButton as ButtonGroup,
+  ButtonGroup,
   Checkbox_default as Checkbox,
   Container_default as Container,
   DateTimePicker as DatePicker,