funuicss 3.8.1 → 3.8.2

package/css/fun.css

@@ -2091,6 +2091,7 @@ border-radius: var(--borderRadius);
 }
 
 
+
 /* Dropdown Container */
 .dropdown-container {
   position: relative;
@@ -3801,6 +3802,7 @@ padding-right: 2.5rem;
   display: flex;
   flex-direction: column;
   gap: 1px;
+
 }
 
 /* Table Row */
@@ -3836,10 +3838,11 @@ padding-right: 2.5rem;
 
 /* Cell specific */
 .table-cell {
-  background: var(--white);
-  border-bottom: 1px solid var(--light);
+  border-bottom: 0.5px solid var(--borderColor);
+    overflow: visible;
 }
 
+
 /* Text handling classes */
 .table-cell.truncate {
   white-space: nowrap;
@@ -3951,6 +3954,10 @@ padding-right: 2.5rem;
     max-width: 100% !important;
   }
   
+  .table-cell:first-child {
+    border-top: none;
+  }
+  
   .table-cell:last-child {
     border-bottom: none;
   }
@@ -3993,6 +4000,16 @@ padding-right: 2.5rem;
   }
 }
 
+.pagination-item{
+  height: 30px !important;
+  width: 30px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
 /* Empty State */
 .table-empty {
   display: flex;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.8.1",
+  "version": "3.8.2",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/empty/Empty.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 interface EmptyProps {
-    header?: React.ReactNode;
-    title?: string;
+    header?: React.ReactNode | String;
+    title?: string | React.ReactNode;
     titleSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     content?: React.ReactNode;
-    description?: string;
+    description?: string | React.ReactNode;
     descriptionSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     action?: React.ReactNode;
     ctaText?: string;

package/ui/table/Table.d.ts

@@ -41,6 +41,10 @@ type TableProps = {
         icon?: React.ReactNode;
         title?: React.ReactNode;
         subtitle: React.ReactNode;
+        ctaText?: string;
+        ctaIcon?: React.ReactNode | string;
+        showCta?: boolean;
+        ctaOnClick?: () => void;
     };
     customColumns?: {
         title: string;

package/ui/table/Table.js

@@ -85,6 +85,7 @@ var Flex_1 = __importDefault(require("../flex/Flex"));
 var ci_1 = require("react-icons/ci");
 var io5_1 = require("react-icons/io5");
 var Query_1 = require("./Query");
+var Empty_1 = __importDefault(require("../empty/Empty"));
 function Table(_a) {
     var _b, _c;
     var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, _d = _a.title, title = _d === void 0 ? "" : _d, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, right = _a.right, hideExport = _a.hideExport, height = _a.height, _f = _a.pageSize, pageSize = _f === void 0 ? data ? 10 : 0 : _f, // Default page size,
@@ -376,19 +377,18 @@ function Table(_a) {
                                         var _a;
                                         // Calculate index for custom column (after regular data fields)
                                         var colIndex = (((_a = data === null || data === void 0 ? void 0 : data.fields) === null || _a === void 0 ? void 0 : _a.length) || 0) + columnIndex;
-                                        return (React.createElement("div", { key: columnIndex, className: "table-cell", "data-label": column.title || "Action", style: {
+                                        return (React.createElement("div", { key: columnIndex, className: "table-cell wrap", "data-label": column.title || "Action", style: {
                                                 position: "relative",
                                                 overflow: "visible",
                                                 // Apply column-specific styles
                                                 minWidth: getColumnMinWidth(colIndex),
                                                 maxWidth: getColumnMaxWidth(colIndex),
-                                                width: getColumnWidth(colIndex)
+                                                width: getColumnWidth(colIndex),
+                                                whiteSpace: 'normal',
+                                                overflowWrap: 'break-word',
+                                                textOverflow: 'clip'
                                             } },
-                                            React.createElement("div", { style: {
-                                                    position: "relative",
-                                                    overflow: "visible",
-                                                    zIndex: 50,
-                                                } }, column.render && column.render(mdoc)),
+                                            column.render && column.render(mdoc),
                                             column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title))));
                                     })
                                     : "")); });
@@ -416,23 +416,21 @@ function Table(_a) {
                                     } }));
                             }))); }),
                     children ? children : ""),
-                filteredData.length === 0 && !isLoading && !children && (React.createElement("div", { className: "table-empty" },
-                    React.createElement("div", { className: "empty-icon" }, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.icon) || React.createElement(pi_1.PiEmpty, { size: 30, className: "text-error" })),
-                    React.createElement("div", null, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.title) || (React.createElement(Text_1.default, { text: "No Record Found!", size: "xl" }))),
-                    React.createElement("div", null, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.subtitle) || (React.createElement(Text_1.default, { text: "You can try reloading the page or check your query" }))))))),
+                filteredData.length === 0 && !isLoading && !children && (React.createElement("div", null,
+                    React.createElement(Empty_1.default, { ctaIcon: (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.ctaIcon) || React.createElement(pi_1.PiSpinnerGap, null), title: (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.title) || 'No Record Found!', description: (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.subtitle) || 'You can try reloading the page or check your query', ctaText: (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.ctaText) || 'Reload', showCta: (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.showCta) || false, ctaOnClick: function () { return (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.ctaOnClick) ? emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.ctaOnClick() : window.location.reload; } }))))),
         data && pageSize && filteredData.length > pageSize && (React.createElement("div", { className: "padding bt" },
             React.createElement(RowFlex_1.default, { gap: 1, funcss: 'pointer', justify: "center" },
                 React.createElement("div", { className: "pagination-nav ".concat(currentPage === 1 ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage > 1 && handleChangePage(1); }, title: "First page" },
                     React.createElement(Text_1.default, { text: "\u00AB\u00AB" })),
-                React.createElement("div", { className: "pagination-nav ".concat(currentPage === 1 ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage > 1 && handleChangePage(currentPage - 1); }, title: "Previous page" },
+                React.createElement("div", { className: "pagination-nav p ".concat(currentPage === 1 ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage > 1 && handleChangePage(currentPage - 1); }, title: "Previous page" },
                     React.createElement(Text_1.default, { text: "\u2039" })),
-                React.createElement("div", { className: "pagination" }, Array.from({ length: endPage - startPage + 1 }, function (_, i) {
+                React.createElement(Flex_1.default, null, Array.from({ length: endPage - startPage + 1 }, function (_, i) {
                     var pageNumber = startPage + i;
                     var isActive = currentPage === pageNumber;
-                    return (React.createElement("div", { key: pageNumber, className: "pagination-item ".concat(isActive ? 'pagination-item-active h-30 w-30 circle flex central primary text-xs text-bold' : ''), onClick: function () { return handleChangePage(pageNumber); } },
-                        React.createElement(Text_1.default, { text: "".concat(pageNumber), bold: isActive })));
+                    return (React.createElement("div", { key: pageNumber },
+                        React.createElement("div", { className: "pagination-item text-xs ".concat(isActive ? 'pagination-item-active primary' : ''), onClick: function () { return handleChangePage(pageNumber); } }, "".concat(pageNumber))));
                 })),
-                React.createElement("div", { className: "pagination-nav ".concat(currentPage === totalPages ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage < totalPages && handleChangePage(currentPage + 1); }, title: "Next page" },
+                React.createElement("div", { className: "pagination-nav p ".concat(currentPage === totalPages ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage < totalPages && handleChangePage(currentPage + 1); }, title: "Next page" },
                     React.createElement(Text_1.default, { text: "\u203A" })),
                 React.createElement("div", { className: "pagination-nav ".concat(currentPage === totalPages ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage < totalPages && handleChangePage(totalPages); }, title: "Last page" },
                     React.createElement(Text_1.default, { text: "\u00BB\u00BB" })))))));