funuicss 2.0.25 → 2.5.1

package/ui/snackbar/SnackBar.tsx

@@ -1,40 +1,56 @@
+'use client';
 import * as React from 'react';
 
 interface SnackbarProps {
   message: string;
-  close: React.ReactNode;
+  close?: React.ReactNode;
   open: boolean;
+  setOpen: (val: boolean) => void;
   position: string;
   funcss?: string;
   animation?: string;
-  duration?: number;
-  flat?:boolean
+  duration?: number; // animation duration (in seconds)
+  autoHide?: boolean; // 👈 NEW
+  autoHideDuration?: number; // 👈 NEW in milliseconds
+  flat?: boolean;
 }
 
-const SnackBar: React.FC<SnackbarProps> = ({ message, close, open, position, funcss, animation, duration , flat}) => {
-  if (open) {
-    return (
-      <div>
-        <div className={`snackbar ${position} ${funcss} ${flat ? "flat" : ""}`} style={{ animation: ` ${duration}s ${animation}` }}>
-          <div className="snackbar-content">
-            <div className="snackbar-body">
-              {message}
-            </div>
-            {
-              close && 
-              <div>
-              <span className="close-snackbar">
-                <span>{close}</span>
-              </span>
-            </div>
-            }
+const SnackBar: React.FC<SnackbarProps> = ({
+  message,
+  close,
+  open,
+  setOpen,
+  position,
+  funcss,
+  animation,
+  duration = 0.3,
+  autoHide = false,
+  autoHideDuration = 3000,
+  flat,
+}) => {
+  React.useEffect(() => {
+    if (open && autoHide) {
+      const timer = setTimeout(() => {
+        setOpen(false);
+      }, autoHideDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [open, autoHide, autoHideDuration, setOpen]);
+
+  if (!open) return null;
+
+  return (
+    <div className={`snackbar ${position} ${funcss || ''} ${flat ? 'flat' : ''}`} style={{ animation: `${duration}s ${animation || 'SlideUp'}` }}>
+      <div className="snackbar-content">
+        <div className="snackbar-body">{message}</div>
+        {close && (
+          <div className="close-snackbar pointer" onClick={() =>setOpen ? setOpen(false) : null}>
+            {close}
           </div>
-        </div>
+        )}
       </div>
-    );
-  } else {
-    return <div></div>;
-  }
+    </div>
+  );
 };
 
 export default SnackBar;

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 _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, 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,18 +7,20 @@ 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,
+  size = 2,
   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>
             }

package/ui/text/Text.d.ts

@@ -1,16 +1,13 @@
 import React from 'react';
 type TypographyProps = {
     id?: string;
-    size?: "smaller" | "small" | "big" | "bigger" | "jumbo" | "minified";
+    text?: React.ReactNode;
+    funcss?: string;
     bg?: string;
     color?: string;
-    children?: React.ReactNode;
     hoverBg?: string;
     hoverText?: string;
     monospace?: boolean;
-    text?: string;
-    heading?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    funcss?: string;
     emp?: boolean;
     bold?: boolean;
     block?: boolean;
@@ -20,6 +17,7 @@ type TypographyProps = {
     lighter?: boolean;
     italic?: boolean;
     underline?: boolean;
+    weight?: number;
     quote?: boolean;
     align?: "left" | "center" | "right" | "justify";
     lineHeight?: string;
@@ -39,6 +37,8 @@ type TypographyProps = {
     transform?: string;
     customStyles?: React.CSSProperties;
     onClick?: () => void;
+    children?: React.ReactNode;
+    size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 };
 declare const Text: React.FC<TypographyProps>;
 export default Text;

package/ui/text/Text.js

@@ -28,33 +28,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var pi_1 = require("react-icons/pi");
 var Text = function (_a) {
-    var id = _a.id, size = _a.size, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, heading = _a.heading, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, rest = __rest(_a, ["id", "size", "bg", "color", "children", "hoverBg", "hoverText", "text", "heading", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "textShadow", "textAlign", "customStyles", "monospace", "quote"]);
-    var mergedStyles = __assign({ display: block ? 'block' : undefined, fontWeight: bold ? 'bold' : undefined, lineHeight: lineHeight ? lineHeight : undefined, letterSpacing: letterSpacing ? letterSpacing : undefined, textTransform: textTransform ? textTransform : undefined, textDecoration: textDecoration ? textDecoration : undefined, fontFamily: fontFamily ? fontFamily : undefined, textShadow: textShadow ? textShadow : undefined, textAlign: textAlign ? textAlign : undefined, whiteSpace: whiteSpace ? whiteSpace : undefined, wordBreak: wordBreak ? wordBreak : undefined, transform: customStyles === null || customStyles === void 0 ? void 0 : customStyles.transform }, customStyles);
+    var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, _b = _a.size, size = _b === void 0 ? 'base' : _b, // default
+    rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "textShadow", "textAlign", "customStyles", "monospace", "quote", "size"]);
+    var Tag = block ? 'div' : 'span';
+    var sizeClass = "".concat(size === 'h1' ? "h1" :
+        size === 'h2' ? "h2" :
+            size === 'h3' ? "h3" :
+                size === 'h4' ? "h4" :
+                    size === 'h5' ? "h5" :
+                        size === 'h6' ? "h6" :
+                            "text-".concat(size));
+    var mergedStyles = __assign({ display: block ? 'block' : undefined, fontWeight: bold ? 'bold' : weight ? weight : undefined, lineHeight: lineHeight, letterSpacing: letterSpacing, textTransform: textTransform, textDecoration: textDecoration, fontFamily: fontFamily, textShadow: textShadow, textAlign: textAlign, whiteSpace: whiteSpace, wordBreak: wordBreak, transform: customStyles === null || customStyles === void 0 ? void 0 : customStyles.transform }, customStyles);
     var classNames = [
-        size ? "text-".concat(size) : '',
+        funcss || '',
+        sizeClass,
         color ? "text-".concat(color) : '',
         align ? "text-".concat(align) : '',
         monospace ? 'monospace' : '',
-        bg ? bg : '',
+        bg || '',
         hoverText ? "hover-text-".concat(hoverText) : '',
         hoverBg ? "hover-".concat(hoverBg) : '',
         light ? 'lightText' : lighter ? 'lighterText' : '',
-        heading ? heading : '',
         italic ? 'italicText' : '',
         underline ? 'underlineText' : '',
         body ? 'body' : '',
         article ? 'article' : '',
-        funcss ? funcss : '',
         emp ? 'emp' : '',
         bold ? 'bold' : '',
         uppercase ? 'uppercase' : '',
         lowercase ? 'lowercase' : '',
         capitalize ? 'capitalize' : '',
-    ].filter(Boolean).join(' ');
-    var HeadingTag = heading ? heading : block ? "div" : 'span';
-    return (react_1.default.createElement(HeadingTag, __assign({ id: id, className: classNames, style: mergedStyles }, rest),
-        quote && react_1.default.createElement("div", { className: "" },
-            react_1.default.createElement(pi_1.PiQuotesLight, null)),
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles }, rest),
+        quote && (react_1.default.createElement("div", null,
+            react_1.default.createElement(pi_1.PiQuotesLight, null))),
         children,
         text));
 };

package/ui/text/Text.tsx

@@ -3,16 +3,13 @@ import { PiQuotesLight } from 'react-icons/pi';
 
 type TypographyProps = {
   id?: string;
-  size?: "smaller" | "small" | "big" | "bigger" | "jumbo" | "minified";
+  text?: React.ReactNode;
+  funcss?: string;
   bg?: string;
   color?: string;
-  children?: React.ReactNode;
   hoverBg?: string;
   hoverText?: string;
   monospace?: boolean;
-  text?: string;
-  heading?: "h1" | "h2" |"h3" |"h4" |"h5" |"h6" ;
-  funcss?: string;
   emp?: boolean;
   bold?: boolean;
   block?: boolean;
@@ -22,7 +19,8 @@ type TypographyProps = {
   lighter?: boolean;
   italic?: boolean;
   underline?: boolean;
-  quote?:boolean;
+  weight?: number;
+  quote?: boolean;
   align?: "left" | "center" | "right" | "justify";
   lineHeight?: string;
   letterSpacing?: string;
@@ -41,18 +39,38 @@ type TypographyProps = {
   transform?: string;
   customStyles?: React.CSSProperties;
   onClick?: () => void;
+  children?: React.ReactNode;
+
+  size?: 
+    | "xs" 
+    | "sm" 
+    | "base" 
+    | "lg" 
+    | "xl" 
+    | "2xl" 
+    | "3xl" 
+    | "4xl" 
+    | "5xl" 
+    | "6xl"
+    | "7xl"
+    | "8xl"
+    | "9xl"
+    | "h1" 
+    | "h2" 
+    | "h3" 
+    | "h4" 
+    | "h5" 
+    | "h6";
 };
 
 const Text: React.FC<TypographyProps> = ({
   id,
-  size,
   bg,
   color,
   children,
   hoverBg,
   hoverText,
   text,
-  heading,
   funcss,
   emp,
   bold,
@@ -62,6 +80,7 @@ const Text: React.FC<TypographyProps> = ({
   light,
   lighter,
   italic,
+  weight,
   underline,
   align,
   lineHeight,
@@ -79,59 +98,69 @@ const Text: React.FC<TypographyProps> = ({
   customStyles,
   monospace,
   quote,
+  size = 'base', // default
+
   ...rest
 }) => {
+  const Tag = block ? 'div' : 'span';
+
+  const sizeClass = `${size === 'h1' ? `h1` : 
+    size === 'h2' ? `h2` : 
+    size === 'h3' ? `h3` : 
+    size === 'h4' ? `h4` : 
+    size === 'h5' ? `h5` : 
+    size === 'h6' ? `h6` : 
+    `text-${size}`}`;
+
   const mergedStyles: React.CSSProperties = {
     display: block ? 'block' : undefined,
-    fontWeight: bold ? 'bold' : undefined,
-    lineHeight: lineHeight ? lineHeight : undefined,
-    letterSpacing: letterSpacing ? letterSpacing : undefined,
-    textTransform: textTransform ? textTransform : undefined,
-    textDecoration: textDecoration ? textDecoration : undefined,
-    fontFamily: fontFamily ? fontFamily : undefined,
-    textShadow: textShadow ? textShadow : undefined,
-    textAlign: textAlign ? textAlign : undefined,
-    whiteSpace: whiteSpace ? whiteSpace : undefined,
-    wordBreak: wordBreak ? wordBreak : undefined,
+    fontWeight: bold ? 'bold' : weight ? weight : undefined,
+    lineHeight,
+    letterSpacing,
+    textTransform,
+    textDecoration,
+    fontFamily,
+    textShadow,
+    textAlign,
+    whiteSpace,
+    wordBreak,
     transform: customStyles?.transform,
     ...customStyles,
   };
 
   const classNames = [
-    size ? `text-${size}` : '',
+    funcss || '',
+    sizeClass,
     color ? `text-${color}` : '',
     align ? `text-${align}` : '',
     monospace ? 'monospace' : '',
-    bg ? bg : '',
+    bg || '',
     hoverText ? `hover-text-${hoverText}` : '',
     hoverBg ? `hover-${hoverBg}` : '',
     light ? 'lightText' : lighter ? 'lighterText' : '',
-    heading ? heading : '',
     italic ? 'italicText' : '',
     underline ? 'underlineText' : '',
     body ? 'body' : '',
     article ? 'article' : '',
-    funcss ? funcss : '',
     emp ? 'emp' : '',
     bold ? 'bold' : '',
     uppercase ? 'uppercase' : '',
     lowercase ? 'lowercase' : '',
     capitalize ? 'capitalize' : '',
-  ].filter(Boolean).join(' ');
-
-  const HeadingTag = heading ? heading : block ? "div" : 'span';
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
-    <HeadingTag
-      id={id}
-      className={classNames}
-      style={mergedStyles}
-      {...rest}
-    >
-      {quote && <div className=""><PiQuotesLight /></div>}
+    <Tag id={id} className={classNames} style={mergedStyles} {...rest}>
+      {quote && (
+        <div>
+          <PiQuotesLight />
+        </div>
+      )}
       {children}
       {text}
-    </HeadingTag>
+    </Tag>
   );
 };
 

package/ui/tooltip/Tip.d.ts

@@ -4,8 +4,9 @@ interface TipProps {
     funcss?: string;
     children?: React.ReactNode;
     content?: React.ReactNode;
+    message?: React.ReactNode;
     animation?: string;
     duration?: number;
 }
-export default function Tip({ tip, funcss, children, content, animation, duration, ...rest }: TipProps): any;
+export default function Tip({ tip, funcss, children, content, message, animation, duration, ...rest }: TipProps): React.JSX.Element;
 export {};

package/ui/tooltip/Tip.js

@@ -47,10 +47,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 function Tip(_a) {
-    var tip = _a.tip, funcss = _a.funcss, children = _a.children, content = _a.content, animation = _a.animation, duration = _a.duration, rest = __rest(_a, ["tip", "funcss", "children", "content", "animation", "duration"]);
-    return (React.createElement("span", __assign({ className: "tip-".concat(tip, " tip ").concat(funcss ? funcss : ''), style: { animation: " ".concat(duration ? duration : 0, "s ").concat(animation ? animation : '') } }, rest),
-        children,
-        " ",
-        content));
+    var tip = _a.tip, funcss = _a.funcss, children = _a.children, content = _a.content, message = _a.message, animation = _a.animation, duration = _a.duration, rest = __rest(_a, ["tip", "funcss", "children", "content", "message", "animation", "duration"]);
+    // Calculate width only if content is a string
+    var text = message || content || children;
+    // Check if content is a plain string to calculate width
+    var isString = typeof text === 'string';
+    var minWidth = isString
+        ? "".concat(text.replace(/\s+/g, '').length * 8, "px")
+        : 'auto';
+    return (React.createElement("span", __assign({ className: "tip-".concat(tip, " tip ").concat(funcss ? funcss : ''), style: { animation: " ".concat(duration ? duration : 0, "s ").concat(animation ? animation : ''), minWidth: minWidth } }, rest), text));
 }
 exports.default = Tip;