funuicss 3.7.0 → 3.7.2

package/ui/input/Input.js

@@ -66,6 +66,7 @@ var Button_1 = __importDefault(require("../button/Button"));
 var theme_1 = require("../theme/theme");
 var componentUtils_1 = require("../../utils/componentUtils");
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
+var Text_1 = __importDefault(require("../text/Text"));
 // Status icons mapping
 var statusIcons = {
     success: react_1.default.createElement(pi_1.PiCheckCircle, null),
@@ -75,14 +76,16 @@ var statusIcons = {
 };
 // Utility function to generate CSS classes
 var generateInputClasses = function (_a) {
-    var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b;
+    var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b, _c = _a.hasNoPrefix, hasNoPrefix = _c === void 0 ? false : _c, _d = _a.hasNoLabel, hasNoLabel = _d === void 0 ? false : _d;
     var statusClass = status ? "".concat(status, "-input") : '';
     var roundedClass = rounded ? 'rounded' : '';
     var bgClass = bg || '';
     var flatClass = flat ? 'flat' : '';
     var cornerClass = leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '';
     var borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : (!bordered && !borderless ? 'borderedInput' : '');
-    return "\n    ".concat(statusClass, "\n    ").concat(roundedClass, "\n    ").concat(bgClass, "\n    ").concat(funcss || '', "\n    ").concat(flatClass, "\n    ").concat(cornerClass, "\n    ").concat(borderClass, "\n    ").concat(additionalClasses, "\n    input\n  ").trim().replace(/\s+/g, ' ');
+    var noPrefixClass = hasNoPrefix ? 'no_prefix' : '';
+    var noLabelClass = hasNoLabel ? 'no_label' : '';
+    return "\n    ".concat(statusClass, "\n    ").concat(roundedClass, "\n    ").concat(bgClass, "\n    ").concat(funcss || '', "\n    ").concat(flatClass, "\n    ").concat(cornerClass, "\n    ").concat(borderClass, "\n    ").concat(additionalClasses, "\n    ").concat(noPrefixClass, "\n    ").concat(noLabelClass, "\n    input\n  ").trim().replace(/\s+/g, ' ');
 };
 // Iconic Input Wrapper Component
 var IconicInputWrapper = function (_a) {
@@ -102,8 +105,9 @@ var IconicInputWrapper = function (_a) {
 };
 // Input Container with Floating Label
 var InputContainer = function (_a) {
-    var label = _a.label, status = _a.status, helperText = _a.helperText, children = _a.children, isFocused = _a.isFocused, hasValue = _a.hasValue, fullWidth = _a.fullWidth, id = _a.id, startIcon = _a.startIcon, prefix = _a.prefix;
-    var showFloatingLabel = label && (isFocused || hasValue);
+    var label = _a.label, status = _a.status, helperText = _a.helperText, children = _a.children, isFocused = _a.isFocused, hasValue = _a.hasValue, fullWidth = _a.fullWidth, id = _a.id, startIcon = _a.startIcon, prefix = _a.prefix, _b = _a.isSelect, isSelect = _b === void 0 ? false : _b;
+    // For select inputs, label is always active
+    var showFloatingLabel = label && (isSelect || isFocused || hasValue);
     return (react_1.default.createElement("div", { className: "input-wrapper ".concat(fullWidth ? 'full-width' : '') },
         react_1.default.createElement("div", { className: "input-container-with-label" },
             label && (react_1.default.createElement("label", { htmlFor: id, className: "floating-label ".concat(startIcon || prefix ? "label-left" : "", "  ").concat(showFloatingLabel ? 'active' : '', " ").concat(status ? "label-".concat(status) : '') }, label)),
@@ -194,6 +198,13 @@ var TextInput = function (_a) {
         }
     }, [final.stringSuffix]);
     var themeVariant = (0, theme_1.useVariant)().variant;
+    // Determine effective icons: stringPrefix/stringSuffix take priority, then local, then config
+    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
+    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    // Check if there's no start icon or prefix
+    var hasNoPrefix = !effectivePrefix;
+    // Check if there's no label
+    var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
         rounded: final.rounded,
@@ -204,6 +215,8 @@ var TextInput = function (_a) {
         rightRounded: final.rightRounded,
         bordered: final.bordered,
         borderless: final.borderless,
+        hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+        hasNoLabel: hasNoLabel,
     });
     var style = final.fullWidth ? { width: '100%' } : undefined;
     var handleChange = function (e) {
@@ -222,9 +235,6 @@ var TextInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
-    // Determine effective icons: stringPrefix/stringSuffix take priority, then local, then config
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
     // Show placeholder only when label is active (focused or has value)
     var showPlaceholder = placeholder && label && (isFocused || !!inputValue);
     var inputElement = (react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, type: type, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: inputValue }, rest)));
@@ -314,6 +324,13 @@ var SelectInput = function (_a) {
     }, [final.stringSuffix]);
     var selectHasValue = !!selectValue;
     var themeVariant = (0, theme_1.useVariant)().variant;
+    // Determine effective icons
+    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
+    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    // Check if there's no start icon or prefix
+    var hasNoPrefix = !effectivePrefix;
+    // Check if there's no label
+    var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
         rounded: final.rounded,
@@ -324,6 +341,8 @@ var SelectInput = function (_a) {
         rightRounded: final.rightRounded,
         bordered: final.bordered,
         borderless: final.borderless,
+        hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+        hasNoLabel: hasNoLabel,
     });
     var style = final.fullWidth ? { width: '100%' } : undefined;
     var handleChange = function (e) {
@@ -342,11 +361,9 @@ var SelectInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
     var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, value: selectValue, style: style }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
     var wrappedSelect = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, selectElement));
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id }, wrappedSelect));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, isSelect: true }, wrappedSelect));
 };
 exports.SelectInput = SelectInput;
 // Textarea Component
@@ -430,6 +447,13 @@ var TextareaInput = function (_a) {
         }
     }, [final.stringSuffix]);
     var themeVariant = (0, theme_1.useVariant)().variant;
+    // Determine effective icons
+    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
+    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    // Check if there's no start icon or prefix
+    var hasNoPrefix = !effectivePrefix;
+    // Check if there's no label
+    var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
         rounded: final.rounded,
@@ -440,6 +464,8 @@ var TextareaInput = function (_a) {
         rightRounded: final.rightRounded,
         bordered: final.bordered,
         borderless: final.borderless,
+        hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+        hasNoLabel: hasNoLabel,
     });
     var style = final.fullWidth ? { width: '100%' } : undefined;
     var handleChange = function (e) {
@@ -458,8 +484,6 @@ var TextareaInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
     // Show placeholder only when label is active (focused or has value)
     var showPlaceholder = placeholder && label && (isFocused || !!textValue);
     var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: textValue, rows: rows }, rest)));
@@ -467,7 +491,7 @@ var TextareaInput = function (_a) {
     return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: final.fullWidth, id: id }, wrappedTextarea));
 };
 exports.TextareaInput = TextareaInput;
-// File Input Component (unchanged as it doesn't have the same value issue)
+// File Input Component (updated with no_prefix and no_label logic)
 var FileInput = function (_a) {
     var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, helperText = _a.helperText, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "icon", "extra", "button", "btn", "value", "variant"]);
     var _e = (0, react_1.useState)(''), fileName = _e[0], setFileName = _e[1];
@@ -545,6 +569,10 @@ var FileInput = function (_a) {
     };
     var effectivePrefix = prefixNode || final.prefix || final.startIcon;
     var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    // Check if there's no start icon or prefix
+    var hasNoPrefix = !effectivePrefix;
+    // Check if there's no label (file inputs typically don't have labels in the same way)
+    var hasNoLabel = true; // File inputs use their own label system
     if (btn) {
         var className = generateInputClasses({
             status: final.status,
@@ -556,7 +584,9 @@ var FileInput = function (_a) {
             rightRounded: final.rightRounded,
             bordered: true,
             borderless: false,
-            additionalClasses: 'filedInput'
+            additionalClasses: 'filedInput',
+            hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+            hasNoLabel: hasNoLabel,
         });
         var style = final.fullWidth ? { width: '100%' } : undefined;
         var fileInputElement = (react_1.default.createElement("div", { className: "fileInput" },
@@ -568,13 +598,8 @@ var FileInput = function (_a) {
     var uploadElement = (react_1.default.createElement("div", { className: "_upload_container" },
         react_1.default.createElement("label", { htmlFor: id, className: "_upload_label" },
             react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null)),
-            react_1.default.createElement("div", { className: "_upload_text", style: {
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    display: 'inline-block',
-                    width: '100%',
-                } }, fileName || label),
+            react_1.default.createElement("div", { className: "_upload_text fit" },
+                react_1.default.createElement(Text_1.default, { text: fileName || label, truncate: 1, block: true })),
             extra && react_1.default.createElement("div", { className: "text-small opacity-3" }, extra)),
         react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest))));
     return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: undefined, status: final.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: final.fullWidth, id: id }, uploadElement));

package/ui/richtext/RichText.js

@@ -118,7 +118,7 @@ var RichText = function (_a) {
             react_1.default.createElement(Flex_1.default, { justify: "space-between", gap: 1, alignItems: "center", width: "100%" },
                 (showEmojis || afterEmoji) ? (react_1.default.createElement("div", null,
                     react_1.default.createElement(Flex_1.default, { width: "100%", gap: 0.5, alignItems: "center" },
-                        showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
+                        showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
                                 react_1.default.createElement(Circle_1.default, { size: 2, funcss: "bg border" },
                                     react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),
                                 react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "Emojis" })), items: [

package/ui/specials/Circle.d.ts

@@ -10,7 +10,8 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
     raised?: boolean;
     bordered?: boolean;
     key?: React.Key;
+    style?: React.CSSProperties;
     onClick?: () => void;
 }
-export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, bordered, ...rest }: Circle_Props): React.JSX.Element;
+export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, bordered, style, ...rest }: Circle_Props): React.JSX.Element;
 export {};

package/ui/specials/Circle.js

@@ -59,10 +59,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Circle;
 var React = __importStar(require("react"));
 function Circle(_a) {
-    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, bordered = _a.bordered, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "bordered"]);
-    return (React.createElement("div", __assign({ className: " animated fade-in ".concat(bordered ? "border" : "", " pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || 'lighter', " ").concat(hoverable ? 'hoverable' : ''), style: {
-            width: "".concat(size + "rem" || '2.3rem'),
-            height: "".concat(size + "rem" || '2.3rem'),
-        }, key: key, onClick: onClick }, rest),
+    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, bordered = _a.bordered, style = _a.style, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "bordered", "style"]);
+    return (React.createElement("div", __assign({ className: " animated fade-in ".concat(bordered ? "border" : "", " pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || 'lighter', " ").concat(hoverable ? 'hoverable' : ''), style: __assign({ width: "".concat(size + "rem" || '2.3rem'), height: "".concat(size + "rem" || '2.3rem') }, style), key: key, onClick: onClick }, rest),
         React.createElement(React.Fragment, null, children)));
 }

package/ui/table/Table.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 type TableProps = {
     children?: React.ReactNode;
     funcss?: string;
+    trCss?: string;
     title?: string;
     bordered?: boolean;
     noStripped?: boolean;
@@ -40,5 +41,5 @@ type TableProps = {
 };
 export default function Table({ children, funcss, bordered, noStripped, hoverable, title, showTotal, light, dark, head, body, data, isLoading, right, hideExport, height, pageSize, // Default page size,
 customColumns, filterableFields, // New prop
-emptyResponse, filterOnchange, clearSearch, prioritizeSearchFields, onRowClick, ...rest }: TableProps): React.JSX.Element;
+emptyResponse, filterOnchange, clearSearch, prioritizeSearchFields, onRowClick, trCss, ...rest }: TableProps): React.JSX.Element;
 export {};

package/ui/table/Table.js

@@ -70,10 +70,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Table;
 var React = __importStar(require("react"));
-var Head_1 = __importDefault(require("./Head"));
-var Body_1 = __importDefault(require("./Body"));
-var Row_1 = __importDefault(require("./Row"));
-var Data_1 = __importDefault(require("./Data"));
 var Input_1 = __importDefault(require("../input/Input"));
 var react_1 = require("react");
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
@@ -81,8 +77,6 @@ var Button_1 = __importDefault(require("../button/Button"));
 var pi_1 = require("react-icons/pi");
 var Circle_1 = __importDefault(require("../specials/Circle"));
 var Text_1 = __importDefault(require("../text/Text"));
-var View_1 = __importDefault(require("../view/View"));
-var ScrollInView_1 = __importDefault(require("../ScrollInView/ScrollInView"));
 var Select_1 = __importDefault(require("../select/Select"));
 var Export_1 = require("./Export");
 var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
@@ -95,7 +89,7 @@ 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,
     customColumns = _a.customColumns, filterableFields = _a.filterableFields, // New prop
-    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, onRowClick = _a.onRowClick, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields", "onRowClick"]);
+    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, onRowClick = _a.onRowClick, trCss = _a.trCss, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields", "onRowClick", "trCss"]);
     // Check if data is null or undefined before accessing its properties
     // Replace this in your component
     var _h = (0, react_1.useState)(''), search = _h[0], setSearch = _h[1];
@@ -188,28 +182,26 @@ function Table(_a) {
     }, [selectedField, selectedValue]);
     return (React.createElement("div", { className: "".concat(funcss ? funcss : '', " roundEdge") },
         data &&
-            React.createElement("div", { className: "padding bb" },
+            React.createElement("div", { className: "pr-4 pl-4 pt-2 pb-2 lighter tableHeader mb-2", style: { overflow: "show" } },
                 React.createElement(RowFlex_1.default, { gap: 0.5, justify: 'space-between' },
                     title ?
                         React.createElement("div", null,
                             showTotal && data &&
                                 React.createElement("div", null,
-                                    React.createElement(Text_1.default, { text: 'Records: ', size: 'sm' }),
-                                    React.createElement(Text_1.default, { text: filteredData.length, weight: 600 })),
+                                    React.createElement(Text_1.default, { text: "".concat(filteredData.length, " Records"), size: 'sm', weight: 500 })),
                             title &&
                                 React.createElement("div", null,
-                                    React.createElement(Text_1.default, { text: title || "", size: 'h6' })))
+                                    React.createElement(Text_1.default, { text: title || "", size: 'h6', lineHeight: '0.8' })))
                         :
                             React.createElement(React.Fragment, null, showTotal && data &&
                                 React.createElement("div", null,
-                                    React.createElement(Text_1.default, { text: 'Records: ', size: 'sm' }),
-                                    React.createElement(Text_1.default, { text: filteredData.length, weight: 600, color: 'primary' }))),
+                                    React.createElement(Text_1.default, { text: "".concat(filteredData.length, " Records"), size: 'sm', weight: 500 }))),
                     data ?
                         React.createElement("div", null,
                             React.createElement(Flex_1.default, { width: '100%', wrap: 'nowrap', alignItems: 'center', gap: 0.7 },
                                 !selectedField && !showSearch && filterableFields &&
                                     React.createElement("div", null,
-                                        React.createElement(Select_1.default, { fullWidth: true, searchable: true, funcss: 'min-w-300 w-full', rounded: true, value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
+                                        React.createElement(Select_1.default, { fullWidth: true, searchable: true, funcss: 'min-w-300 w-full bg', rounded: true, value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
                                                 { text: '🔍 Filter', value: '' },
                                                 { text: 'All*', value: '' }
                                             ], (filterableFields || []).map(function (field) { return ({
@@ -217,7 +209,7 @@ function Table(_a) {
                                                 value: field
                                             }); }), true) })),
                                 selectedField && !showSearch && filterableFields && (React.createElement("div", { className: '' },
-                                    React.createElement(Select_1.default, { rounded: true, searchable: true, funcss: 'min-w-300 w-full', fullWidth: true, value: selectedValue || '', onChange: function (e) {
+                                    React.createElement(Select_1.default, { rounded: true, searchable: true, funcss: 'min-w-300 w-full bg', fullWidth: true, value: selectedValue || '', onChange: function (e) {
                                             if (e === 'clear_all') {
                                                 setSelectedField('');
                                             }
@@ -238,72 +230,83 @@ function Table(_a) {
                                 showSearch ?
                                     React.createElement(Flex_1.default, { gap: 0.5, wrap: 'nowrap', alignItems: 'center' },
                                         React.createElement("div", { className: 'animated slide-up' },
-                                            React.createElement(Input_1.default, { borderless: true, funcss: 'min-w-300', fullWidth: true, rounded: true, value: searchQuery, onChange: function (e) { return setsearchQuery(e.target.value); }, label: "Search..." })),
-                                        React.createElement("div", { className: 'animated fade-in' },
+                                            React.createElement(Input_1.default, { borderless: true, funcss: 'min-w-300 bg', fullWidth: true, rounded: true, value: searchQuery, onChange: function (e) { return setsearchQuery(e.target.value); }, label: "Search..." })),
+                                        React.createElement("div", null,
                                             React.createElement("div", { onClick: function () { return setshowSearch(false); } },
                                                 React.createElement(ToolTip_1.default, null,
                                                     filterableFields ? React.createElement(io5_1.IoFilterOutline, { className: 'pointer' })
                                                         :
                                                             React.createElement(pi_1.PiXThin, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(false); } }),
-                                                    React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: filterableFields ? "Filter" : "Close Search" })))))
+                                                    React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: filterableFields ? "Filter" : "Close Search" })))))
                                     :
-                                        React.createElement("div", { className: 'animated fade-in' },
+                                        React.createElement("div", null,
                                             React.createElement(ToolTip_1.default, null,
                                                 React.createElement(ci_1.CiSearch, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(true); } }),
-                                                React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Search Data" })))))
+                                                React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: "Search Data" })))))
                         : '',
-                    React.createElement(React.Fragment, null,
+                    React.createElement(React.Fragment, null, (right || !hideExport) &&
                         React.createElement(RowFlex_1.default, { gap: 0.5 },
                             right && right,
                             !hideExport &&
-                                React.createElement("div", { className: 'animated slide-up' },
+                                React.createElement("div", null,
                                     React.createElement(ToolTip_1.default, null,
                                         React.createElement(Circle_1.default, { bg: 'lighter', bordered: true, onClick: Export },
                                             React.createElement(pi_1.PiExportThin, null)),
-                                        React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Export Data" }))))))),
+                                        React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: "Export Data" }))))))),
         React.createElement("main", { style: { overflow: "auto", width: "100%" } },
-            React.createElement("table", __assign({ className: "table  ".concat(bordered ? 'border' : '', " ").concat(noStripped ? '' : 'stripped', " ").concat(hoverable ? 'hoverableTr' : '', " ").concat(light ? 'light' : '', " ").concat(dark ? 'dark' : ''), style: {
+            React.createElement("div", __assign({ className: "table-grid ".concat(bordered ? 'bordered' : '', " ").concat(noStripped ? '' : 'stripped', " ").concat(hoverable ? 'hoverableTr' : '', " ").concat(light ? 'light' : '', " ").concat(dark ? 'dark' : ''), style: {
                     height: height ? height + "px" : "",
                     position: 'relative',
                     zIndex: 1
                 } }, rest),
-                data &&
-                    (data === null || data === void 0 ? void 0 : data.titles) &&
-                    React.createElement(Head_1.default, null, data.titles.map(function (mdoc) { return (React.createElement("th", { key: mdoc },
-                        React.createElement(Text_1.default, { text: mdoc, weight: 500, funcss: 'text-secondary' }))); })),
-                head && React.createElement(Head_1.default, null, head),
-                body && React.createElement(Body_1.default, null, body),
-                data &&
-                    (function () {
-                        var results = (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, prioritizeSearchFields);
-                        var shouldSlice = !searchQuery || results.length > 10;
-                        return (shouldSlice ? results.slice(startIndex, endIndex) : results)
-                            .map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined },
-                            data.fields.map(function (fdoc, findex) {
-                                var _a;
-                                return (React.createElement(Data_1.default, { key: fdoc, funcss: data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || '' : '' }, getNestedValue(mdoc, fdoc)));
-                            }),
-                            customColumns ?
-                                customColumns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex },
-                                    column.render && column.render(mdoc),
-                                    column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title)))); }) : "")); });
-                    })(),
-                isLoading &&
-                    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function () { return (React.createElement(Row_1.default, { funcss: 'skeleton' })); }),
-                children ? children : ''),
-            (filteredData.length === 0 && !isLoading && !children) &&
-                React.createElement(ScrollInView_1.default, null,
-                    React.createElement(View_1.default, { funcss: 'max-w-400 p-4 text-center center' },
-                        React.createElement("div", null, (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" }))))),
-        data &&
-            React.createElement(React.Fragment, null, pageSize &&
-                React.createElement(React.Fragment, null, filteredData.length > pageSize &&
-                    React.createElement("div", { className: "padding bt" },
-                        React.createElement(RowFlex_1.default, { gap: 1, justify: 'center' },
-                            React.createElement("div", { className: "pagination" }, Array.from({ length: endPage - startPage + 1 }, function (_, i) { return (React.createElement(Circle_1.default, { size: 2.5, key: startPage + i, onClick: function () { return handleChangePage(startPage + i); }, funcss: currentPage === startPage + i ? 'primary pageCircle' : 'lighter pageCircle text-primary' },
-                                React.createElement(Text_1.default, { text: "".concat(startPage + i), bold: true, size: 'sm' }))); }))))))));
+                data && (data === null || data === void 0 ? void 0 : data.titles) && (React.createElement("div", { className: "table-head" }, data.titles.map(function (mdoc, index) { return (React.createElement("div", { key: mdoc, className: "table-header text-secondary ".concat(index === 0 ? "first_table_data" : "", " ").concat(index === data.titles.length - 1 ? "last_table_data" : ""), "data-label": mdoc }, mdoc)); }))),
+                head && React.createElement("div", { className: "table-head" }, head),
+                React.createElement("div", { className: "table-body" },
+                    body && body,
+                    data &&
+                        (function () {
+                            var results = (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, prioritizeSearchFields);
+                            var shouldSlice = !searchQuery || results.length > 10;
+                            return (shouldSlice ? results.slice(startIndex, endIndex) : results).map(function (mdoc, index) { return (React.createElement("div", { className: "table-row animated slide-up ".concat(trCss), key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined },
+                                data.fields.map(function (fdoc, findex) {
+                                    var _a, _b;
+                                    return (React.createElement("div", { key: fdoc, className: "table-cell ".concat(data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || "" : ""), "data-label": ((_b = data.titles) === null || _b === void 0 ? void 0 : _b[findex]) || fdoc, style: { overflow: "visible" } }, getNestedValue(mdoc, fdoc)));
+                                }),
+                                customColumns
+                                    ? customColumns.map(function (column, columnIndex) { return (React.createElement("div", { key: columnIndex, className: "table-cell", "data-label": column.title || "Action", style: {
+                                            position: "relative",
+                                            overflow: "visible",
+                                        } },
+                                        React.createElement("div", { style: {
+                                                position: "relative",
+                                                overflow: "visible",
+                                                zIndex: 50,
+                                            } }, column.render && column.render(mdoc)),
+                                        column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title)))); })
+                                    : "")); });
+                        })(),
+                    isLoading &&
+                        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (_, index) { return (React.createElement("div", { key: index, className: "table-row skeleton" }, data === null || data === void 0 ? void 0 : data.fields.map(function (_, cellIndex) { return (React.createElement("div", { key: cellIndex, className: "table-cell" })); }))); }),
+                    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" }))))))),
+        data && pageSize && filteredData.length > pageSize && (React.createElement("div", { className: "padding bt" },
+            React.createElement(RowFlex_1.default, { gap: 1, justify: "center" },
+                React.createElement("div", { className: "pagination-container" },
+                    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(Text_1.default, { text: "\u2039" })),
+                    React.createElement("div", { className: "pagination" }, 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' : ''), onClick: function () { return handleChangePage(pageNumber); } },
+                            React.createElement(Text_1.default, { text: "".concat(pageNumber), bold: isActive })));
+                    })),
+                    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(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" }))))))));
 }

package/ui/text/Text.d.ts

@@ -42,7 +42,7 @@ type TypographyProps = {
     variant?: string;
     margin?: string;
     padding?: string;
-    size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | string;
 };
 declare const Text: React.FC<TypographyProps>;
 export default Text;