@algorithm-shift/design-system 1.2.953 → 1.2.954

package/dist/index.d.mts

@@ -131,7 +131,7 @@ interface TabsProps extends ElementProps {
   tabs?: Record<string, any>;
   pathname?: string;
   verticalMenu?: boolean;
-  canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
   isBuilder?: boolean;
   source?: string;
   parentKey?: string;
@@ -163,7 +163,7 @@ interface PieChartProps extends ElementProps {
   showPercentage?: boolean;
   showLegends?: boolean;
   labelType?: string;
-  canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
   loading?: boolean;
 }
 
@@ -171,7 +171,7 @@ interface BarChartProps extends ElementProps {
   data?: Record<string, any>;
   chartType?: string;
   legendsPosition?: string;
-  canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
   loading?: boolean;
 }
 
@@ -201,7 +201,7 @@ interface NavbarProps extends ElementProps {
   showName?: boolean;
   imageUrl?: string;
   altText?: string;
-  canvasMode?: 'desktop' | 'tablet' | 'mobile' | string;
+  canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app' | string;
   list?: Record<string, any>;
   profileMenu?: Record<string, any>;
   userName?: string;

package/dist/index.d.ts

@@ -131,7 +131,7 @@ interface TabsProps extends ElementProps {
   tabs?: Record<string, any>;
   pathname?: string;
   verticalMenu?: boolean;
-  canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
   isBuilder?: boolean;
   source?: string;
   parentKey?: string;
@@ -163,7 +163,7 @@ interface PieChartProps extends ElementProps {
   showPercentage?: boolean;
   showLegends?: boolean;
   labelType?: string;
-  canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
   loading?: boolean;
 }
 
@@ -171,7 +171,7 @@ interface BarChartProps extends ElementProps {
   data?: Record<string, any>;
   chartType?: string;
   legendsPosition?: string;
-  canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
   loading?: boolean;
 }
 
@@ -201,7 +201,7 @@ interface NavbarProps extends ElementProps {
   showName?: boolean;
   imageUrl?: string;
   altText?: string;
-  canvasMode?: 'desktop' | 'tablet' | 'mobile' | string;
+  canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app' | string;
   list?: Record<string, any>;
   profileMenu?: Record<string, any>;
   userName?: string;

package/dist/index.js

@@ -28163,17 +28163,32 @@ var import_react23 = require("react");
 var import_react_international_phone = require("react-international-phone");
 var import_style = require("react-international-phone/style.css");
 var import_jsx_runtime40 = require("react/jsx-runtime");
+var ensureIndiaCode = (val) => {
+  if (!val) return "";
+  const trimmed = val.trim();
+  if (trimmed.startsWith("+")) return trimmed;
+  const local = trimmed.replace(/^0+/, "");
+  return `+91${local}`;
+};
 var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   (0, import_react23.useEffect)(() => {
     if (props.value !== void 0) {
-      handleChange?.(props.value);
+      const normalized = ensureIndiaCode(props.value);
+      handleChange?.(normalized);
     }
   }, []);
   const handleChange = (val) => {
-    props.onChange?.(val, props?.name || "");
+    const normalized = ensureIndiaCode(val);
+    const event = {
+      target: {
+        name: props.name || "",
+        value: normalized
+      }
+    };
+    props.onChange?.(event, props.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -28181,7 +28196,7 @@ var PhoneInput = ({ className, style, ...props }) => {
       {
         defaultCountry: "in",
         name: props.name,
-        value: props.value || "",
+        value: props.value ? ensureIndiaCode(props.value) : "",
         className: cn(
           "rounded-md border-1",
           className,
@@ -28191,7 +28206,7 @@ var PhoneInput = ({ className, style, ...props }) => {
           ...style,
           borderColor: props.errorMessage ? "#f87171" : style?.borderColor
         },
-        onChange: (phone) => handleChange(phone),
+        onChange: handleChange,
         inputProps: {
           id: "phone-field",
           style: { width: "100%", border: "none", outline: "none" }
@@ -29413,9 +29428,10 @@ function DataTable({
   const [columnVisibility, setColumnVisibility] = React10.useState({});
   const [manualSort, setManualSort] = React10.useState(null);
   const [searchTerm, setSearchTerm] = React10.useState("");
+  const tableData = Array.isArray(data) ? data : [];
   const dynamicCols = useDynamicColumns({ columns });
   const table = (0, import_react_table2.useReactTable)({
-    data: data ?? [],
+    data: tableData,
     columns: dynamicCols,
     state: {
       columnFilters,
@@ -29461,6 +29477,7 @@ function DataTable({
     }
     return [];
   };
+  const pageCount = table.getPageCount() === 0 ? 1 : table.getPageCount();
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 bg-gray-50`, children: [
       globalSearch && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
@@ -29538,88 +29555,100 @@ function DataTable({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Table3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Table3, { className: "table-fixed", children: [
       /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableRow, { children: hg.headers.map((header, index) => {
         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_runtime53.jsx)(TableHead, { className: "relative select-none", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-            "span",
-            {
-              className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
-              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_table2.flexRender)(header.column.columnDef.header, header.getContext()),
-                canSort && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-                  sortDir === "asc" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowUp, { size: 14, className: "text-gray-500" }),
-                  sortDir === "desc" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowDown, { size: 14, className: "text-gray-500" }),
-                  !sortDir && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowUpDown, { size: 14, className: "text-gray-400" })
-                ] })
-              ]
-            }
-          ),
-          canFilter && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Popover, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-              "span",
-              {
-                role: "presentation",
-                className: "pl-5 cursor-pointer",
-                onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faEllipsisH, className: "w-5 h-5 text-gray-500" })
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-              PopoverContent,
-              {
-                align: "center",
-                sideOffset: 14,
-                className: "w-50 p-3 z-[200] border-gray-300",
-                avoidCollisions: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-                  "form",
+        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          TableHead,
+          {
+            className: "relative select-none",
+            style: {
+              width: header.column.getSize(),
+              minWidth: header.column.columnDef.minSize,
+              maxWidth: header.column.columnDef.maxSize
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+                "span",
+                {
+                  className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
+                  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_table2.flexRender)(header.column.columnDef.header, header.getContext()),
+                    canSort && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+                      sortDir === "asc" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowUp, { size: 14, className: "text-gray-500" }),
+                      sortDir === "desc" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowDown, { size: 14, className: "text-gray-500" }),
+                      !sortDir && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowUpDown, { size: 14, className: "text-gray-400" })
+                    ] })
+                  ]
+                }
+              ),
+              canFilter && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Popover, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  "span",
+                  {
+                    role: "presentation",
+                    className: "pl-5 cursor-pointer",
+                    onClick: (e) => e.stopPropagation(),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faEllipsisH, className: "w-5 h-5 text-gray-500" })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  PopoverContent,
                   {
-                    onSubmit: (e) => {
-                      e.preventDefault();
-                      const formData = new FormData(e.currentTarget);
-                      const value = formData.get("filter") || "";
-                      if (onFilterChange && value) {
-                        onFilterChange({ columnKey: header.column.id, columnTerm: value });
+                    align: "center",
+                    sideOffset: 14,
+                    className: "w-50 p-3 z-[200] border-gray-300",
+                    avoidCollisions: true,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+                      "form",
+                      {
+                        onSubmit: (e) => {
+                          e.preventDefault();
+                          const formData = new FormData(e.currentTarget);
+                          const value = formData.get("filter") || "";
+                          if (onFilterChange && value) {
+                            onFilterChange({ columnKey: header.column.id, columnTerm: value });
+                          }
+                        },
+                        className: "space-y-2",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                            "input",
+                            {
+                              name: "filter",
+                              placeholder: "Search",
+                              defaultValue: header.column.getFilterValue() ?? "",
+                              className: "border-gray-300 border-1 block p-3 rounded-md text-xs w-full h-9 focus:ring-0 focus:border-gray-300 focus-visible:ring-0 focus-visible:border-gray-300 focus-visible:outline-none mt-2 font-normal",
+                              autoComplete: "off"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "justify-end flex", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                            Button,
+                            {
+                              type: "submit",
+                              className: "py-2 px-3 bg-[#12715B] text-white text-xs h-auto cursor-pointer",
+                              children: "Apply"
+                            }
+                          ) })
+                        ]
                       }
-                    },
-                    className: "space-y-2",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                        "input",
-                        {
-                          name: "filter",
-                          placeholder: "Search",
-                          defaultValue: header.column.getFilterValue() ?? "",
-                          className: "border-gray-300 border-1 block p-3 rounded-md text-xs w-full h-9 focus:ring-0 focus:border-gray-300 focus-visible:ring-0 focus-visible:border-gray-300 focus-visible:outline-none mt-2 font-normal",
-                          autoComplete: "off"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "justify-end flex", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                        Button,
-                        {
-                          type: "submit",
-                          className: "py-2 px-3 bg-[#12715B] text-white text-xs h-auto cursor-pointer",
-                          children: "Apply"
-                        }
-                      ) })
-                    ]
+                    )
                   }
                 )
-              }
-            )
-          ] })
-        ] }) }, `header-${header.id}-${index}`);
+              ] })
+            ] })
+          },
+          `header-${header.id}-${index}`
+        );
       }) }, `header-group-${hg.id}`)) }),
       /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableRow, { children: dynamicCols.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableCell, { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "h-4 bg-gray-200 rounded w-3/4 block animate-pulse" }) }, j)) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
         const meta = cell.column.columnDef.meta || {};
@@ -29628,8 +29657,13 @@ function DataTable({
         return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
           TableCell,
           {
-            className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative`,
-            style: meta?.cellStyle,
+            className: `${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,
+              maxWidth: cell.column.columnDef.maxSize,
+              ...meta?.cellStyle ?? {}
+            },
             onClick: () => {
               if (isClickable && onCellClick) {
                 onCellClick(cell.row.original, cell.column.id);
@@ -29668,7 +29702,7 @@ function DataTable({
         "Page ",
         table.getState().pagination.pageIndex + 1,
         " of ",
-        table.getPageCount()
+        pageCount
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -30015,7 +30049,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
   }, [tabs, source, parentKey, menuNameKey, menuUrlKey]);
-  const baseClasses = "text-[12px] text-foreground p-2 text-center rounded-md transition-colors";
+  const baseClasses = "text-foreground p-2 text-center rounded-md transition-colors";
   const activeClasses = "bg-white/10 text-white";
   const hoverClasses = "hover:bg-white/5";
   const isActive = (path) => {
@@ -30085,7 +30119,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                   DropdownMenuItem,
                   {
                     asChild: true,
-                    className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
+                    className: "cursor-pointer rounded-sm px-3 py-2 text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
                     children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                       import_link5.default,
                       {
@@ -30138,7 +30172,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                 DropdownMenuItem,
                 {
                   asChild: true,
-                  className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100",
+                  className: "cursor-pointer rounded-sm px-3 py-2 text-gray-800 hover:bg-gray-100",
                   children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_link5.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
                 },
                 item.id || index