funuicss 2.0.25 → 2.5.0

package/ui/input/Input.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -10,6 +11,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,11 +49,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
 var Button_1 = __importDefault(require("../button/Button"));
 var Input = function (_a) {
-    var select = _a.select, bordered = _a.bordered, borderless = _a.borderless, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, icon = _a.icon, button = _a.button, id = _a.id, status = _a.status, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, rounded = _a.rounded, fullWidth = _a.fullWidth, type = _a.type, label = _a.label, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, options = _a.options, rows = _a.rows, bg = _a.bg, rest = __rest(_a, ["select", "bordered", "borderless", "multiline", "file", "noBorder", "icon", "button", "id", "status", "funcss", "flat", "leftRounded", "rightRounded", "rounded", "fullWidth", "type", "label", "name", "value", "defaultValue", "onChange", "options", "rows", "bg"]);
+    var select = _a.select, bordered = _a.bordered, borderless = _a.borderless, multiline = _a.multiline, file = _a.file, extra = _a.extra, noBorder = _a.noBorder, icon = _a.icon, btn = _a.btn, button = _a.button, id = _a.id, status = _a.status, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, rounded = _a.rounded, fullWidth = _a.fullWidth, type = _a.type, label = _a.label, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, options = _a.options, rows = _a.rows, bg = _a.bg, rest = __rest(_a, ["select", "bordered", "borderless", "multiline", "file", "extra", "noBorder", "icon", "btn", "button", "id", "status", "funcss", "flat", "leftRounded", "rightRounded", "rounded", "fullWidth", "type", "label", "name", "value", "defaultValue", "onChange", "options", "rows", "bg"]);
+    var _b = (0, react_1.useState)(''), fileName = _b[0], setFileName = _b[1];
+    var handleChange = function (e) {
+        var _a;
+        var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            setFileName(file.name);
+        }
+        if (onChange)
+            onChange(e);
+    };
     if (select) {
         if (bordered) {
             return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderedInput\n          "), onChange: onChange, defaultValue: defaultValue, name: name, style: {
@@ -39,14 +73,14 @@ var Input = function (_a) {
                 : ''));
         }
         else if (borderless) {
-            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderless\n          "), onChange: onChange, defaultValue: defaultValue, placeholder: label, name: name, value: value, style: {
+            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderless\n          "), onChange: onChange, defaultValue: defaultValue, name: name, value: value, style: {
                     width: "".concat(fullWidth ? '100%' : '')
                 } }), options
                 ? options.map(function (doc) { return (react_1.default.createElement("option", { value: doc.value, key: doc.value }, doc.text)); })
                 : ''));
         }
         else {
-            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n          "), onChange: onChange, defaultValue: defaultValue, placeholder: label, name: name, value: value, style: {
+            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n          "), onChange: onChange, defaultValue: defaultValue, name: name, value: value, style: {
                     width: "".concat(fullWidth ? '100%' : '')
                 } }), options
                 ? options.map(function (doc) { return (react_1.default.createElement("option", { value: doc.value, key: doc.value }, doc.text)); })
@@ -71,11 +105,18 @@ var Input = function (_a) {
         }
     }
     else if (file) {
-        return (react_1.default.createElement("div", { className: "fileInput" },
-            button ? (button) : (react_1.default.createElement(Button_1.default, { funcss: " ".concat(funcss, " "), startIcon: icon ? icon : react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: "primary", fullWidth: true, raised: true }, label ? label : 'Upload File')),
-            react_1.default.createElement("input", __assign({ name: name, id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderedInput\n            filedInput\n          "), onChange: onChange, type: 'file', style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                }, value: value }, rest))));
+        if (btn)
+            return (react_1.default.createElement("div", { className: "fileInput" },
+                button ? (button) : (react_1.default.createElement(Button_1.default, { funcss: " ".concat(funcss, " "), startIcon: icon ? icon : react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: "primary", fullWidth: true, raised: true }, fileName || label || 'Upload File')),
+                react_1.default.createElement("input", __assign({ name: name, id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderedInput\n            filedInput\n          "), onChange: handleChange, type: 'file', style: {
+                        width: "".concat(fullWidth ? '100%' : '')
+                    }, value: value }, rest))));
+        return (react_1.default.createElement("div", { className: "_upload_container" },
+            react_1.default.createElement("label", { htmlFor: id || "fileInput", className: "_upload_label" },
+                react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(react_1.default.Fragment, null, "\u21EA")),
+                react_1.default.createElement("div", { className: "_upload_text" }, fileName || label || "Upload File"),
+                react_1.default.createElement("div", { className: "text-small opacity-3" }, extra || '')),
+            react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id || "fileInput", className: "_upload_input" }, rest))));
     }
     else {
         if (bordered) {

package/ui/input/Input.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+'use client'
+import React, { useState } from 'react';
 import { PiCheck, PiCloudArrowUp } from 'react-icons/pi';
 import Button from '../button/Button';
 
@@ -10,6 +11,7 @@ interface InputProps {
   file?: boolean;
   noBorder?: boolean;
   icon?: React.ReactNode;
+  extra?: React.ReactNode;
   button?: React.ReactNode;
   id?: string;
   status?: 'success' | 'warning' | 'danger' | '';
@@ -19,6 +21,7 @@ interface InputProps {
   rightRounded?: boolean;
   rounded?: boolean;
   fullWidth?: boolean;
+  btn?: boolean;
   type?: string;
   label?: string;
   name?: string;
@@ -32,14 +35,17 @@ interface InputProps {
   bg?: string;
 }
 
+
 const Input: React.FC<InputProps> = ({
   select,
   bordered,
   borderless,
   multiline,
   file,
+  extra,
   noBorder,
   icon,
+  btn,
   button,
   id,
   status,
@@ -60,6 +66,17 @@ const Input: React.FC<InputProps> = ({
   bg,
   ...rest
 }) => {
+    const [fileName, setFileName] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setFileName(file.name);
+    }
+    if (onChange) onChange(e);
+  };
+
+
   if (select) {
     if (bordered) {
       return (
@@ -112,7 +129,6 @@ const Input: React.FC<InputProps> = ({
           `}
           onChange={onChange}
           defaultValue={defaultValue}
-          placeholder={label}
           name={name}
           value={value}
           style={{
@@ -145,7 +161,6 @@ const Input: React.FC<InputProps> = ({
           `}
           onChange={onChange}
           defaultValue={defaultValue}
-          placeholder={label}
           name={name}
           value={value}
           style={{
@@ -245,7 +260,8 @@ const Input: React.FC<InputProps> = ({
       );
     }
   } else if (file) {
-    return (
+    if(btn)
+      return (
       <div className="fileInput">
         {button ? (
           button
@@ -257,7 +273,7 @@ const Input: React.FC<InputProps> = ({
             fullWidth
             raised
           >
-            {label ? label : 'Upload File'}
+            {fileName || label || 'Upload File'}
           </Button>
         )}
         <input
@@ -275,16 +291,27 @@ const Input: React.FC<InputProps> = ({
             borderedInput
             filedInput
           `}
-          onChange={onChange}
+          onChange={handleChange}
           type={'file'}
           style={{
             width: `${fullWidth ? '100%' : ''}`
           }}
+          
           value={value}
         {...rest}
         />
       </div>
-    );
+    )
+    return (
+          <div className="_upload_container">
+          <label htmlFor={id || "fileInput"} className="_upload_label">
+            <div className="_upload_icon">{ icon || <>&#8682;</>}</div> 
+            <div className="_upload_text">{fileName || label || `Upload File`}</div>
+            <div className="text-small opacity-3">{extra || ''}</div>
+          </label>
+          <input onChange={handleChange} type="file" id={id || "fileInput"} className="_upload_input" {...rest} />
+        </div>
+    )
   } else {
     if (bordered) {
       return (

package/ui/list/Item.d.ts

@@ -3,5 +3,5 @@ interface ListItemProps {
     children?: React.ReactNode;
     funcss?: string;
 }
-export default function ListItem({ children, funcss, ...rest }: ListItemProps): any;
+export default function ListItem({ children, funcss, ...rest }: ListItemProps): React.JSX.Element;
 export {};

package/ui/list/List.d.ts

@@ -10,5 +10,5 @@ interface ListProps {
     roundItems?: boolean;
     gap?: number;
 }
-export default function List({ children, funcss, dark, light, stripped, bordered, hoverable, roundItems, gap, ...rest }: ListProps): any;
+export default function List({ children, funcss, dark, light, stripped, bordered, hoverable, roundItems, gap, ...rest }: ListProps): React.JSX.Element;
 export {};

package/ui/loader/Loader.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 interface FunLoaderProps {
     funcss?: string;
     size?: number;
@@ -6,5 +7,5 @@ interface FunLoaderProps {
     color?: string;
     variant?: 'simple' | 'duotone' | "circle";
 }
-export default function FunLoader({ funcss, size, fixed, backdrop, color, variant, ...rest }: FunLoaderProps): any;
+export default function FunLoader({ funcss, size, fixed, backdrop, color, variant, ...rest }: FunLoaderProps): React.JSX.Element;
 export {};

package/ui/modal/Action.d.ts

@@ -3,5 +3,5 @@ interface ModalActionProps extends React.HTMLProps<HTMLDivElement> {
     funcss?: string;
     children?: React.ReactNode;
 }
-export default function ModalAction({ funcss, children, ...rest }: ModalActionProps): any;
+export default function ModalAction({ funcss, children, ...rest }: ModalActionProps): React.JSX.Element;
 export {};

package/ui/modal/Close.d.ts

@@ -1,6 +1,7 @@
 import { HTMLProps } from 'react';
+import * as React from 'react';
 interface CloseModalProps extends HTMLProps<HTMLDivElement> {
     funcss?: string;
 }
-export default function CloseModal({ funcss, ...rest }: CloseModalProps): any;
+export default function CloseModal({ funcss, ...rest }: CloseModalProps): React.JSX.Element;
 export {};

package/ui/modal/Content.d.ts

@@ -3,5 +3,5 @@ interface ModalContentProps {
     funcss?: string;
     children?: React.ReactNode;
 }
-export default function ModalContent({ funcss, children, }: ModalContentProps): any;
+export default function ModalContent({ funcss, children, }: ModalContentProps): React.JSX.Element;
 export {};

package/ui/modal/Header.d.ts

@@ -3,7 +3,7 @@ interface ModalHeaderProps {
     funcss?: string;
     children?: React.ReactNode;
     close?: React.ReactNode | '';
-    title?: string;
+    title?: React.ReactNode;
 }
-export default function ModalHeader({ funcss, children, close, title, ...rest }: ModalHeaderProps): any;
+export default function ModalHeader({ funcss, children, close, title, ...rest }: ModalHeaderProps): React.JSX.Element;
 export {};

package/ui/modal/Header.tsx

@@ -4,7 +4,7 @@ interface ModalHeaderProps {
   funcss?: string;
   children?: React.ReactNode;
   close?: React.ReactNode | '';
-  title?:string
+  title?:React.ReactNode
 }
 
 export default function ModalHeader({ funcss, children, close , title, ...rest }: ModalHeaderProps) {

package/ui/modal/Modal.d.ts

@@ -22,5 +22,5 @@ interface ModalProps {
     position?: string;
     flat?: boolean;
 }
-export default function Modal({ children, funcss, animation, duration, open, maxWidth, maxHeight, height, width, backdrop, title, titlecss, body, bodycss, footer, footercss, close, closecss, position, id, flat, ...rest }: ModalProps): any;
+export default function Modal({ children, funcss, animation, duration, open, maxWidth, maxHeight, height, width, backdrop, title, titlecss, body, bodycss, footer, footercss, close, closecss, position, id, flat, ...rest }: ModalProps): React.JSX.Element;
 export {};

package/ui/notification/Content.d.ts

@@ -3,5 +3,5 @@ type NotificationContentProps = {
     funcss?: string;
     children?: React.ReactNode;
 };
-export default function NotificationContent({ funcss, children }: NotificationContentProps): any;
+export default function NotificationContent({ funcss, children }: NotificationContentProps): React.JSX.Element;
 export {};

package/ui/notification/Footer.d.ts

@@ -3,5 +3,5 @@ type NotificationFooterProps = {
     funcss?: string;
     children?: React.ReactNode;
 };
-export default function NotificationFooter({ funcss, children }: NotificationFooterProps): any;
+export default function NotificationFooter({ funcss, children }: NotificationFooterProps): React.JSX.Element;
 export {};

package/ui/notification/Header.d.ts

@@ -3,5 +3,5 @@ type NotificationHeaderProps = {
     funcss?: string;
     children?: React.ReactNode;
 };
-export default function NotificationHeader({ funcss, children }: NotificationHeaderProps): any;
+export default function NotificationHeader({ funcss, children }: NotificationHeaderProps): React.JSX.Element;
 export {};

package/ui/notification/Notification.d.ts

@@ -11,5 +11,5 @@ type NotificationProps = {
     content?: React.ReactNode;
     footer?: React.ReactNode;
 };
-export default function Notification({ position, funcss, animation, duration, children, state, width, header, content, footer }: NotificationProps): any;
+export default function Notification({ position, funcss, animation, duration, children, state, width, header, content, footer }: NotificationProps): React.JSX.Element;
 export {};

package/ui/page/NotFound.d.ts

@@ -5,5 +5,5 @@ interface NotFoundProps {
     content?: React.ReactNode;
     action?: React.ReactNode;
 }
-export default function NotFound({ header, code, content, action }: NotFoundProps): any;
+export default function NotFound({ header, code, content, action }: NotFoundProps): React.JSX.Element;
 export {};

package/ui/page/UnAuthorized.d.ts

@@ -5,5 +5,5 @@ interface UnAuthorizedProps {
     content?: React.ReactNode;
     action?: React.ReactNode;
 }
-export default function UnAuthorized({ header, code, content, action }: UnAuthorizedProps): any;
+export default function UnAuthorized({ header, code, content, action }: UnAuthorizedProps): React.JSX.Element;
 export {};

package/ui/progress/Bar.d.ts

@@ -10,5 +10,5 @@ interface ProgressBarProps {
     raised?: boolean;
     rounded?: boolean;
 }
-export default function ProgressBar({ funcss, progress, height, children, content, raised, rounded, bg, lined, }: ProgressBarProps): any;
+export default function ProgressBar({ funcss, progress, height, children, content, raised, rounded, bg, lined, }: ProgressBarProps): React.JSX.Element;
 export {};

package/ui/sidebar/SideBar.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import * as React from 'react';
 interface FunLoaderProps {
     funcss?: string;
     position?: "left" | "right";
@@ -10,5 +11,5 @@ interface FunLoaderProps {
     footer?: ReactNode;
     fixed?: boolean;
 }
-export default function SideBar({ funcss, position, glassy, header, open, content, close, footer, fixed, ...rest }: FunLoaderProps): any;
+export default function SideBar({ funcss, position, glassy, header, open, content, close, footer, fixed, ...rest }: FunLoaderProps): React.JSX.Element;
 export {};

package/ui/sidebar/SideContent.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 interface NotFoundProps {
     content?: React.ReactNode;
 }
-export default function SideContent({ content, }: NotFoundProps): any;
+export default function SideContent({ content, }: NotFoundProps): React.JSX.Element;
 export {};

package/ui/specials/Circle.d.ts

@@ -4,11 +4,12 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
     size?: number;
     funcss?: string;
     bg?: string;
+    color?: string;
     children?: ReactNode;
     hoverable?: boolean;
     raised?: boolean;
-    key?: React.key;
+    key?: React.Key;
     onClick?: () => void;
 }
-export default function Circle({ size, funcss, bg, children, hoverable, raised, key, onClick, ...rest }: Circle_Props): any;
+export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, ...rest }: Circle_Props): React.JSX.Element;
 export {};

package/ui/specials/Circle.js

@@ -48,8 +48,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 function Circle(_a) {
-    var size = _a.size, funcss = _a.funcss, bg = _a.bg, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, rest = __rest(_a, ["size", "funcss", "bg", "children", "hoverable", "raised", "key", "onClick"]);
-    return (React.createElement("div", __assign({ className: "pointer avatar ".concat(funcss || '', "  ").concat(raised ? "raised" : '', " ").concat(bg || '', " ").concat(hoverable ? 'hoverable' : ''), style: {
+    var size = _a.size, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick"]);
+    return (React.createElement("div", __assign({ className: "pointer avatar ".concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || '', " ").concat(hoverable ? 'hoverable' : ''), style: {
             width: "".concat(size + "rem" || '2.3rem'),
             height: "".concat(size + "rem" || '2.3rem'),
         }, key: key, onClick: onClick }, rest),

package/ui/specials/Circle.tsx

@@ -7,10 +7,11 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
     size?: number;
     funcss?: string;
     bg?: string;
+    color?: string;
     children?: ReactNode;
     hoverable?: boolean;
     raised?:boolean 
-    key?:React.key
+    key?:React.Key
     onClick?: ()=> void
   }
   
@@ -19,6 +20,7 @@ export default function Circle({
   size,
   funcss,
   bg,
+  color,
   children,
   hoverable,
   raised ,
@@ -28,7 +30,7 @@ export default function Circle({
 }: Circle_Props) {
   return (
       <div
-        className={`pointer avatar ${funcss || ''}  ${raised ? "raised" : ''} ${bg || ''} ${
+        className={`pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || ''} ${
           hoverable ? 'hoverable' : ''
         }`}
         style={{

package/ui/specials/FullCenteredPage.d.ts

@@ -4,5 +4,5 @@ type HrProps = {
     funcss?: string;
     style?: object;
 };
-declare const FullCenteredPage: ({ children, funcss, style, ...rest }: HrProps) => any;
+declare const FullCenteredPage: ({ children, funcss, style, ...rest }: HrProps) => React.JSX.Element;
 export default FullCenteredPage;

package/ui/specials/Hr.d.ts

@@ -3,5 +3,5 @@ type HrProps = {
     children: React.ReactNode;
     funcss?: string;
 };
-declare const Hr: ({ children, funcss }: HrProps) => any;
+declare const Hr: ({ children, funcss }: HrProps) => React.JSX.Element;
 export default Hr;

package/ui/specials/RowFlex.d.ts

@@ -10,5 +10,5 @@ interface RowFlexProps {
     id?: string;
     children?: React.ReactNode;
 }
-export default function RowFlex({ funcss, content, justify, gap, alignItems, responsiveSmall, responsiveMedium, id, children, ...rest }: RowFlexProps): any;
+export default function RowFlex({ funcss, content, justify, gap, alignItems, responsiveSmall, responsiveMedium, id, children, ...rest }: RowFlexProps): React.JSX.Element;
 export {};

package/ui/specials/Section.d.ts

@@ -4,5 +4,5 @@ type SectionProps = {
     funcss?: string;
     gap?: number;
 };
-declare const Section: ({ children, funcss, gap, ...rest }: SectionProps) => any;
+declare const Section: ({ children, funcss, gap, ...rest }: SectionProps) => React.JSX.Element;
 export default Section;

package/ui/table/Body.d.ts

@@ -3,5 +3,5 @@ type TableBodyProps = {
     children?: React.ReactNode;
     funcss?: string;
 };
-export default function TableBody({ children, funcss }: TableBodyProps): any;
+export default function TableBody({ children, funcss }: TableBodyProps): React.JSX.Element;
 export {};

package/ui/table/Data.d.ts

@@ -4,5 +4,5 @@ interface TableDataProps {
     funcss?: string;
     key?: string;
 }
-export default function TableData({ children, funcss, key }: TableDataProps): any;
+export default function TableData({ children, funcss, key }: TableDataProps): React.JSX.Element;
 export {};

package/ui/table/Head.d.ts

@@ -3,5 +3,5 @@ type TableHeadProps = {
     children?: React.ReactNode;
     funcss?: string;
 };
-export default function TableHead({ children, funcss }: TableHeadProps): any;
+export default function TableHead({ children, funcss }: TableHeadProps): React.JSX.Element;
 export {};

package/ui/table/Row.d.ts

@@ -5,5 +5,5 @@ type TableRowProps = {
     rowKey?: React.Key;
     key?: React.Key;
 };
-export default function TableRow({ children, funcss, rowKey, key }: TableRowProps): any;
+export default function TableRow({ children, funcss, rowKey, key }: TableRowProps): React.JSX.Element;
 export {};

package/ui/table/Table.d.ts

@@ -29,5 +29,5 @@ type TableProps = {
 };
 export default function Table({ children, funcss, bordered, noStripped, hoverable, title, showTotal, light, dark, head, body, data, isLoading, right, height, pageSize, // Default page size,
 customColumns, filterableFields, // New prop
-...rest }: TableProps): any;
+...rest }: TableProps): React.JSX.Element;
 export {};

package/ui/table/Table.js

@@ -132,21 +132,25 @@ function Table(_a) {
         data &&
             React.createElement("div", { className: "padding bb" },
                 React.createElement(RowFlex_1.default, { justify: 'space-between' },
-                    data &&
-                        React.createElement("div", { className: "text-bold" },
-                            React.createElement(Text_1.default, { text: 'Records:', size: "small", bold: true, color: 'primary' }),
-                            React.createElement(Text_1.default, { text: filteredData.length, heading: 'h4' })),
+                    React.createElement("div", null,
+                        title &&
+                            React.createElement("div", null,
+                                React.createElement(Text_1.default, { text: title || "", size: 'h4' })),
+                        showTotal && data &&
+                            React.createElement("div", null,
+                                React.createElement(Text_1.default, { text: 'Records:', size: 'sm', color: 'primary' }),
+                                React.createElement(Text_1.default, { text: filteredData.length, size: 'h6' }))),
                     data && filterableFields ?
                         React.createElement("div", { className: "col width-200-max" },
                             React.createElement(RowFlex_1.default, { gap: 0.7 },
-                                React.createElement("select", { className: "dark800 input text-dark200 borderless roundEdgeSmall smallInput", value: selectedField || '', onChange: function (e) {
+                                React.createElement("select", { className: " input borderedInput roundEdgeSmall smallInput", value: selectedField || '', onChange: function (e) {
                                         handleFieldChange(e.target.value);
                                     } },
                                     React.createElement("option", { value: "" }, "\uD83D\uDD0D Filter"),
                                     React.createElement("option", { value: "" }, "All*"), filterableFields === null || filterableFields === void 0 ? void 0 :
                                     filterableFields.map(function (field) { return (React.createElement("option", { key: field, value: field }, field)); })),
                                 selectedField && React.createElement("div", null, "="),
-                                selectedField && (React.createElement("select", { className: "dark800 input text-dark200 width-200-max borderless roundEdgeSmall smallInput", value: selectedValue || '', onChange: function (e) {
+                                selectedField && (React.createElement("select", { className: " input borderedInput width-200-max  roundEdgeSmall smallInput", value: selectedValue || '', onChange: function (e) {
                                         handleValueChange(e.target.value);
                                         handleChangePage(1);
                                     } },
@@ -183,6 +187,6 @@ function Table(_a) {
                     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' : 'dark800 pageCircle text-primary' },
-                                React.createElement(Text_1.default, { text: "".concat(startPage + i), bold: true, size: 'small' }))); }))))))));
+                                React.createElement(Text_1.default, { text: "".concat(startPage + i), bold: true, size: 'sm' }))); }))))))));
 }
 exports.default = Table;

package/ui/table/Table.tsx

@@ -139,19 +139,30 @@ export default function Table({
         data &&
         <div className="padding bb">
         <RowFlex justify='space-between'>
-        {
-              data &&
-              <div className="text-bold">
-                       <Text text='Records:' size="small" bold color='primary'/>
-                       <Text text={filteredData.length} heading='h4'/>
+        <div>
+          {
+              title &&
+              <div >
+                       <Text text={title || ""} size='h4'/>
+              </div>
+
+              
+            }
+                {
+              showTotal && data &&
+              <div >
+                       <Text text='Records:' size='sm'  color='primary'/>
+                        <Text text={filteredData.length} size='h6'/>
               </div>
             }
+        </div>
+        
           {
             data && filterableFields ?
             <div className="col width-200-max">
            <RowFlex gap={0.7}>
            <select 
-           className="dark800 input text-dark200 borderless roundEdgeSmall smallInput" 
+           className=" input borderedInput roundEdgeSmall smallInput" 
            value={selectedField || ''} 
            onChange={(e) => {
             handleFieldChange(e.target.value)
@@ -169,7 +180,7 @@ export default function Table({
       }
       {selectedField && (
         <select  
-        className="dark800 input text-dark200 width-200-max borderless roundEdgeSmall smallInput" 
+        className=" input borderedInput width-200-max  roundEdgeSmall smallInput" 
          value={selectedValue || ''} 
          onChange={(e) => {
           handleValueChange(e.target.value)
@@ -290,10 +301,11 @@ export default function Table({
                       onClick={() => handleChangePage(startPage + i)}
                       funcss={currentPage === startPage + i ? 'primary pageCircle' : 'dark800 pageCircle text-primary'}
                     >
-                      <Text text={`${startPage + i}`} bold size='small'/>
+                      <Text text={`${startPage + i}`} bold size='sm'/>
                     </Circle>
                   ))}
                 </div>
+            
               </RowFlex>
             </div>
             }