npm - @algorithm-shift/design-system - Versions diffs - 1.2.952 → 1.2.954 - Mend

@algorithm-shift/design-system 1.2.952 → 1.2.954

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -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;
@@ -256,7 +256,7 @@ declare function TabList({ children, style, className, activeTab, tabId }: TabLi
 declare function TabGroupComponent({ children, style, className, list, activeTab, onTabChange, }: TabGroupProps): react_jsx_runtime.JSX.Element;
 interface RepeaterProps<T> {
-    items: T[];
+    data: T[];
     count?: number;
     render: (item: T, index: number, array: T[]) => React__default.ReactNode;
     emptyFallback?: React__default.ReactNode;
@@ -265,7 +265,7 @@ interface RepeaterProps<T> {
     loading?: boolean;
     loadingText?: string;
 }
-declare function Repeater<T>({ items, count, render, emptyFallback, wrapper, className, loading, loadingText, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
+declare function Repeater<T>({ data, count, render, emptyFallback, wrapper, className, loading, loadingText, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
 declare const _default$2: typeof Repeater;
 declare const ButtonWrapper: ({ className, style, textContent, loadingText, loading, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
@@ -326,7 +326,7 @@ interface Option {
     value: string;
 }
 interface MultiSelectProps {
-    value: string[];
+    value: string[] | undefined;
     onChange: (value: string[], name: string) => void;
     data: Option[];
     placeholder?: string;

package/dist/index.d.ts CHANGED Viewed

@@ -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;
@@ -256,7 +256,7 @@ declare function TabList({ children, style, className, activeTab, tabId }: TabLi
 declare function TabGroupComponent({ children, style, className, list, activeTab, onTabChange, }: TabGroupProps): react_jsx_runtime.JSX.Element;
 interface RepeaterProps<T> {
-    items: T[];
+    data: T[];
     count?: number;
     render: (item: T, index: number, array: T[]) => React__default.ReactNode;
     emptyFallback?: React__default.ReactNode;
@@ -265,7 +265,7 @@ interface RepeaterProps<T> {
     loading?: boolean;
     loadingText?: string;
 }
-declare function Repeater<T>({ items, count, render, emptyFallback, wrapper, className, loading, loadingText, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
+declare function Repeater<T>({ data, count, render, emptyFallback, wrapper, className, loading, loadingText, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
 declare const _default$2: typeof Repeater;
 declare const ButtonWrapper: ({ className, style, textContent, loadingText, loading, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
@@ -326,7 +326,7 @@ interface Option {
     value: string;
 }
 interface MultiSelectProps {
-    value: string[];
+    value: string[] | undefined;
     onChange: (value: string[], name: string) => void;
     data: Option[];
     placeholder?: string;

package/dist/index.js CHANGED Viewed

@@ -325,7 +325,7 @@ function TabGroupComponent({
 var import_react4 = __toESM(require("react"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function Repeater({
-  items = [],
+  data = [],
   count,
   render,
   emptyFallback = null,
@@ -335,8 +335,8 @@ function Repeater({
   loadingText = "Loading..."
 }) {
   const list = import_react4.default.useMemo(
-    () => typeof count === "number" ? items.slice(0, count) : items,
-    [items, count]
+    () => typeof count === "number" ? data.slice(0, count) : data,
+    [data, count]
   );
   if (loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, children: loadingText });
@@ -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