@algorithm-shift/design-system 1.2.64 → 1.2.66

package/dist/index.d.ts

@@ -104,6 +104,7 @@ interface TableProps extends ElementProps {
   onCellClick?: (cellData: Record<string, any>, columnId: string) => void;
   getRowSelection?: (rowSelection: Record<string, boolean>) => void;
   totalRecords?: number;
+  globalSearch?: boolean;
 }
 
 interface TabsProps extends ElementProps {
@@ -299,9 +300,14 @@ interface ExtendedTableProps extends TableProps {
   page?: number;
   itemsPerPage?: number;
   onPageChange?: (props: PageChangeProps) => void;
+  onSortChange?: (props: SortChangeProps) => void;
+  onFilterChange?: (props: FilterChangeProps) => void;
+  onGlobalSearch?: (props: SearchChangeProps) => void;
+  sort_by?: string;
+  sort_order?: string;
 }
 
-declare const Table: ({ columns, data, rowActions, className, style, pagination, paginationMode, itemsPerPage, onPageChange, page, loading, totalRecords, ...props }: ExtendedTableProps) => react_jsx_runtime.JSX.Element;
+declare const Table: ({ columns, data, rowActions, className, style, pagination, paginationMode, itemsPerPage, onPageChange, onSortChange, onFilterChange, onGlobalSearch, page, loading, totalRecords, globalSearch, ...props }: ExtendedTableProps) => react_jsx_runtime.JSX.Element;
 
 declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVisiblePages, perPage, }: CustomPaginationProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -243,6 +243,11 @@ function TabGroupComponent({
   activeTab,
   onTabChange
 }) {
+  (0, import_react3.useEffect)(() => {
+    if (list && list.length > 0 && !activeTab && onTabChange) {
+      onTabChange(list[0]?.tabId);
+    }
+  }, [list, activeTab, onTabChange]);
   const formatedList = (0, import_react3.useMemo)(
     () => Array.isArray(list) ? [...list].sort((a, b) => (a.orderNumber ?? 0) - (b.orderNumber ?? 0)) : [],
     [list]
@@ -27819,7 +27824,7 @@ var PhoneInput = ({ className, style, ...props }) => {
         name: props.name,
         value: props.value || "",
         className: cn(
-          "rounded-md",
+          "rounded-md border-1",
           className,
           props.errorMessage ? "border-red-500" : ""
         ),
@@ -28434,16 +28439,20 @@ function DataTable({
   onPageChange,
   pageSize = 10,
   paginationMode = "client",
-  totalRecords = 0
+  totalRecords = 0,
+  onSortChange,
+  onFilterChange,
+  onGlobalSearch,
+  globalSearch
 }) {
-  const [sorting, setSorting] = React6.useState([]);
   const [columnFilters, setColumnFilters] = React6.useState([]);
   const [columnVisibility, setColumnVisibility] = React6.useState({});
+  const [manualSort, setManualSort] = React6.useState(null);
+  const [searchTerm, setSearchTerm] = React6.useState("");
   const table = (0, import_react_table.useReactTable)({
     data,
     columns,
     state: {
-      sorting,
       columnFilters,
       columnVisibility,
       pagination: {
@@ -28451,11 +28460,9 @@ function DataTable({
         pageSize
       }
     },
-    onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
-    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
     getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
     getPaginationRowModel: pagination && paginationMode === "client" ? (0, import_react_table.getPaginationRowModel)() : void 0,
     manualPagination: paginationMode === "server",
@@ -28485,68 +28492,105 @@ function DataTable({
     }
     return [];
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "overflow-hidden rounded-md border w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex justify-end p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          className: "px-3 py-1 text-xs cursor-pointer",
-          children: "Manage Columns"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 border-b bg-gray-50`, children: [
+      globalSearch && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "relative w-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "input",
             {
-              type: "checkbox",
-              checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
-              ref: (input) => {
-                if (input) {
-                  input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
+              type: "text",
+              placeholder: "Search...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && onGlobalSearch) {
+                  onGlobalSearch(searchTerm.trim());
                 }
               },
-              onChange: (e) => {
-                table.getAllLeafColumns().forEach(
-                  (col) => col.toggleVisibility(e.target.checked)
-                );
-              }
+              className: "border border-gray-300 rounded-md text-sm px-3 py-2 pl-8 w-full focus:outline-none focus:ring-1 focus:ring-[#12715B]"
             }
           ),
-          "Toggle All"
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
         ] }),
-        table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-            "input",
-            {
-              type: "checkbox",
-              checked: column.getIsVisible(),
-              onChange: (e) => column.toggleVisibility(e.target.checked)
-            }
-          ),
-          column.columnDef.header?.toString() ?? column.id
-        ] }, column.id))
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          Button,
+          {
+            size: "sm",
+            className: "bg-[#12715B] text-white text-xs h-auto py-2 px-3",
+            onClick: () => onGlobalSearch?.(searchTerm.trim()),
+            children: "Search"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "px-3 py-1 text-xs cursor-pointer",
+            children: "Manage Columns"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
+                ref: (input) => {
+                  if (input) {
+                    input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
+                  }
+                },
+                onChange: (e) => {
+                  table.getAllLeafColumns().forEach(
+                    (col) => col.toggleVisibility(e.target.checked)
+                  );
+                }
+              }
+            ),
+            "Toggle All"
+          ] }),
+          table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: column.getIsVisible(),
+                onChange: (e) => column.toggleVisibility(e.target.checked)
+              }
+            ),
+            column.columnDef.header?.toString() ?? column.id
+          ] }, column.id))
+        ] })
       ] })
-    ] }) }),
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Table3, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: hg.headers.map((header) => {
         const canSort = header.column.getCanSort();
         const canFilter = header.column.getCanFilter();
+        const sortDir = manualSort?.key === header.column.id ? manualSort.dir : null;
         return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHead, { className: "relative select-none", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
             "span",
             {
               className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
-              onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+              onClick: () => {
+                if (!canSort) return;
+                const newDir = manualSort?.key === header.column.id && manualSort.dir === "asc" ? "desc" : "asc";
+                setManualSort({ key: header.column.id, dir: newDir });
+                onSortChange?.(header.column.id, newDir);
+              },
               children: [
                 (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
                 canSort && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-                  header.column.getIsSorted() === "asc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUp, { size: 14, className: "text-gray-500" }),
-                  header.column.getIsSorted() === "desc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowDown, { size: 14, className: "text-gray-500" }),
-                  !header.column.getIsSorted() && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUpDown, { size: 14, className: "text-gray-400" })
+                  sortDir === "asc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUp, { size: 14, className: "text-gray-500" }),
+                  sortDir === "desc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowDown, { size: 14, className: "text-gray-500" }),
+                  !sortDir && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUpDown, { size: 14, className: "text-gray-400" })
                 ] })
               ]
             }
@@ -28564,8 +28608,8 @@ function DataTable({
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               PopoverContent,
               {
-                align: "start",
-                sideOffset: 4,
+                align: "center",
+                sideOffset: 14,
                 className: "w-50 p-3 z-[200] border-gray-300",
                 avoidCollisions: true,
                 children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
@@ -28574,8 +28618,10 @@ function DataTable({
                     onSubmit: (e) => {
                       e.preventDefault();
                       const formData = new FormData(e.currentTarget);
-                      const value = formData.get("filter");
-                      header.column.setFilterValue(value || void 0);
+                      const value = formData.get("filter") || "";
+                      if (onFilterChange && value) {
+                        onFilterChange({ columnKey: header.column.id, columnTerm: value });
+                      }
                     },
                     className: "space-y-2",
                     children: [
@@ -28665,9 +28711,13 @@ var Table4 = ({
   paginationMode = "client",
   itemsPerPage = 10,
   onPageChange,
+  onSortChange,
+  onFilterChange,
+  onGlobalSearch,
   page,
   loading = false,
   totalRecords = 0,
+  globalSearch = false,
   ...props
 }) => {
   const rawColumns = Array.isArray(columns) ? columns : [];
@@ -28688,7 +28738,11 @@ var Table4 = ({
         onPageChange?.({ page: pageIndex + 1, itemsPerPage: pageSize });
       },
       paginationMode,
-      totalRecords
+      totalRecords,
+      onSortChange: (col, dir) => onSortChange?.({ sort_by: col, sort_order: dir }),
+      onFilterChange: (filters) => onFilterChange?.({ columnKey: filters.columnKey, columnTerm: filters.columnTerm }),
+      onGlobalSearch: (term) => onGlobalSearch?.({ searchTerm: term }),
+      globalSearch
     }
   ) });
 };
@@ -29085,20 +29139,20 @@ function Navbar({
   userName = "Guest User"
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("nav", { className: "w-full border-b bg-white shadow-sm", style, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("nav", { className: "w-full border-b border-b-white dark:border-b-gray-800 dark:bg-gray-800 bg-white shadow-sm", style, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: "/", className: "flex items-center space-x-2", children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_image3.default, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" }) }),
     !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       import_link6.default,
       {
         href: item.url || "#",
-        className: "text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors",
+        className: "text-sm font-medium dark:text-white text-gray-600 hover:text-gray-900 transition-colors",
         children: item.header
       },
       item.id
     )) }),
     /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center space-x-3", children: [
       !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(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_runtime58.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
       ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Button,
@@ -29109,13 +29163,13 @@ function Navbar({
           children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Search, { className: "h-5 w-5 text-gray-400" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative bg-[#E9E9E9] rounded-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F]" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
         badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.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_runtime58.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DropdownMenu, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center space-x-2", children: [
-          !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { className: "text-[#000000] text-[13px] font-[500] mb-0", children: userName }),
+          !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
           !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               AvatarImage,
@@ -29129,7 +29183,7 @@ function Navbar({
               {
                 variant: "ghost",
                 size: "icon",
-                className: "text-gray-900 md:hidden",
+                className: "text-gray-900 md:hidden dark:invert",
                 children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Menu, { className: "h-6 w-6" })
               }
             )
@@ -29138,16 +29192,16 @@ function Navbar({
             {
               variant: "ghost",
               size: "icon",
-              className: "text-gray-900",
+              className: "text-gray-900 dark:invert",
               children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Menu, { className: "h-6 w-6" })
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white", children: [
-          profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
+          profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) }),
           /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "md:hidden", children: [
             /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_dropdown_menu.DropdownMenuSeparator, {}),
-            list && list.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) })
+            list && list.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) })
           ] })
         ] })
       ] })