funuicss 2.5.12 → 2.5.14

package/ui/input/Input.tsx

@@ -266,15 +266,16 @@ const Input: React.FC<InputProps> = ({
         {button ? (
           button
         ) : (
-          <Button
-            funcss={` ${funcss} `}
-            startIcon={icon ? icon : <PiCloudArrowUp />}
-            bg="primary"
-            fullWidth
-            raised
-          >
-            {fileName || label || 'Upload File'}
-          </Button>
+     <Button
+  funcss={` ${funcss} `}
+  startIcon={icon ? icon : <PiCloudArrowUp />}
+  bg="primary"
+  fullWidth
+  raised
+>
+    {fileName || label || 'Upload File'}
+</Button>
+
         )}
         <input
             name={name}
@@ -306,7 +307,13 @@ const Input: React.FC<InputProps> = ({
           <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="_upload_text"    style={{
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: 'inline-block',
+            width: '100%',
+          }}>{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} />

package/ui/modal/Header.js

@@ -61,6 +61,7 @@ function ModalHeader(_a) {
     var funcss = _a.funcss, children = _a.children, close = _a.close, title = _a.title, rest = __rest(_a, ["funcss", "children", "close", "title"]);
     return (React.createElement("div", __assign({ className: "".concat(funcss, " modal-title") }, rest),
         React.createElement("div", { className: "fit" }, title ? title : children),
-        " ",
-        React.createElement("div", null, close ? close : '')));
+        close ? React.createElement("div", null,
+            " ",
+            close || '') : React.createElement(React.Fragment, null)));
 }

package/ui/modal/Header.tsx

@@ -10,7 +10,10 @@ interface ModalHeaderProps {
 export default function ModalHeader({ funcss, children, close , title, ...rest }: ModalHeaderProps) {
   return (
     <div className={`${funcss} modal-title`} {...rest}>
-        <div className="fit">{title ? title : children}</div> <div>{close ? close : ''}</div>
+        <div className="fit">{title ? title : children}</div> 
+        {
+          close ? <div> {close || ''}</div> : <></>
+        }
     </div>
   );
 }

package/ui/modal/Modal.d.ts

@@ -5,6 +5,7 @@ interface ModalProps {
     animation?: string;
     duration?: number;
     open: boolean;
+    hideClose: boolean;
     setOpen: (val: boolean) => void;
     maxWidth?: string;
     maxHeight?: string;
@@ -26,7 +27,7 @@ interface ModalProps {
     onOk?: () => void;
     onOkText?: string;
 }
-export default function Modal({ children, funcss, animation, duration, open, setOpen, maxWidth, maxHeight, okIcon, height, width, backdrop, title, titlecss, body, bodycss, footer, footercss, close, closecss, position, id, flat, onOk, // 👈 added
+export default function Modal({ children, funcss, animation, duration, open, setOpen, maxWidth, maxHeight, okIcon, height, hideClose, width, backdrop, title, titlecss, body, bodycss, footer, footercss, close, closecss, position, id, flat, onOk, // 👈 added
 onOkText, // 👈 added
 ...rest }: ModalProps): React.JSX.Element | null;
 export {};

package/ui/modal/Modal.js

@@ -67,9 +67,9 @@ var Action_1 = __importDefault(require("./Action"));
 var pi_1 = require("react-icons/pi");
 var Button_1 = __importDefault(require("../button/Button"));
 function Modal(_a) {
-    var children = _a.children, funcss = _a.funcss, animation = _a.animation, duration = _a.duration, open = _a.open, setOpen = _a.setOpen, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, okIcon = _a.okIcon, height = _a.height, width = _a.width, _b = _a.backdrop, backdrop = _b === void 0 ? false : _b, title = _a.title, titlecss = _a.titlecss, body = _a.body, bodycss = _a.bodycss, footer = _a.footer, footercss = _a.footercss, close = _a.close, closecss = _a.closecss, position = _a.position, id = _a.id, flat = _a.flat, onOk = _a.onOk, // 👈 added
+    var children = _a.children, funcss = _a.funcss, animation = _a.animation, duration = _a.duration, open = _a.open, setOpen = _a.setOpen, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, okIcon = _a.okIcon, height = _a.height, _b = _a.hideClose, hideClose = _b === void 0 ? false : _b, width = _a.width, _c = _a.backdrop, backdrop = _c === void 0 ? false : _c, title = _a.title, titlecss = _a.titlecss, body = _a.body, bodycss = _a.bodycss, footer = _a.footer, footercss = _a.footercss, close = _a.close, closecss = _a.closecss, position = _a.position, id = _a.id, flat = _a.flat, onOk = _a.onOk, // 👈 added
     onOkText = _a.onOkText, // 👈 added
-    rest = __rest(_a, ["children", "funcss", "animation", "duration", "open", "setOpen", "maxWidth", "maxHeight", "okIcon", "height", "width", "backdrop", "title", "titlecss", "body", "bodycss", "footer", "footercss", "close", "closecss", "position", "id", "flat", "onOk", "onOkText"]);
+    rest = __rest(_a, ["children", "funcss", "animation", "duration", "open", "setOpen", "maxWidth", "maxHeight", "okIcon", "height", "hideClose", "width", "backdrop", "title", "titlecss", "body", "bodycss", "footer", "footercss", "close", "closecss", "position", "id", "flat", "onOk", "onOkText"]);
     var modalId = id || '_mymodal';
     var handleClickOutside = function (e) {
         if (e.target && e.target.id === modalId) {
@@ -89,10 +89,12 @@ function Modal(_a) {
                 animation: "".concat(duration || 0.2, "s ").concat(animation || 'ScaleUp'),
                 maxWidth: maxWidth || undefined,
                 maxHeight: maxHeight || undefined,
-                width: width || undefined,
+                width: width || '100%',
                 height: height || undefined,
             } }, rest),
-            title && (React.createElement(Header_1.default, { funcss: titlecss || '', title: title, close: React.createElement("div", { onClick: function () { return setOpen(false); }, className: "".concat(closecss || '', " pointer hover-text-error") }, close || React.createElement(pi_1.PiX, { size: 25 })) })),
+            title && (React.createElement(Header_1.default, { funcss: titlecss || '', title: title, close: !hideClose ?
+                    React.createElement("div", { onClick: function () { return setOpen(false); }, className: "".concat(closecss || '', " pointer hover-text-error") }, close || React.createElement(pi_1.PiX, { size: 25 }))
+                    : "" })),
             body && (React.createElement(Content_1.default, { funcss: bodycss || '' }, body)),
             footer ? (React.createElement(Action_1.default, { funcss: footercss || '' }, footer)) : (React.createElement(Action_1.default, { funcss: 'text-right' },
                 React.createElement(Button_1.default, { bg: 'success800', endIcon: okIcon || React.createElement(pi_1.PiPaperPlaneRight, null), raised: true, onClick: handleOkClick }, onOkText || 'OK'))),

package/ui/modal/Modal.tsx

@@ -12,6 +12,7 @@ interface ModalProps {
   animation?: string;
   duration?: number;
   open: boolean;
+  hideClose: boolean;
   setOpen: (val: boolean) => void;
   maxWidth?: string;
   maxHeight?: string;
@@ -45,6 +46,7 @@ export default function Modal({
   maxHeight,
   okIcon,
   height,
+  hideClose = false,
   width,
   backdrop = false,
   title,
@@ -89,7 +91,7 @@ export default function Modal({
           animation: `${duration || 0.2}s ${animation || 'ScaleUp'}`,
           maxWidth: maxWidth || undefined,
           maxHeight: maxHeight || undefined,
-          width: width || undefined,
+          width: width || '100%',
           height: height || undefined,
         }}
         {...rest}
@@ -98,13 +100,15 @@ export default function Modal({
           <ModalHeader
             funcss={titlecss || ''}
             title={title}
-            close={
+            close={!hideClose ? 
+              
               <div
                 onClick={() => setOpen(false)}
                 className={`${closecss || ''} pointer hover-text-error`}
               >
-                {close || <PiX size={25} />}
+                    {close || <PiX size={25} />}
               </div>
+            : ""
             }
           />
         )}

package/ui/page/NotFound.js

@@ -53,13 +53,13 @@ function NotFound(_a) {
                         React.createElement("div", { className: "h2 text-warning round-edge" }, "404"),
                     React.createElement("div", { style: { margin: "1.4rem 0px" } }, header ? header
                         :
-                            React.createElement("div", { className: "text-big text-bold text-dark300", style: { display: "block", transition: "all 0.2s linear 0s" } }, "Page Not Found")),
+                            React.createElement("div", { className: "text-big text-bold text-dark300", style: { display: "block", transition: "all 0.2s linear 0s" } }, "Page not found \uD83E\uDD14")),
                     content ? content :
                         React.createElement("div", { className: "article" },
-                            React.createElement(Text_1.default, { article: true, text: "Sorry, we couldn't find the page you're looking for.", color: "dark300", block: true })),
+                            React.createElement(Text_1.default, { article: true, text: "Don't worry, it happens to the best of us \uD83D\uDE05. We'll help you find what you're looking for.", color: "dark300", block: true })),
                     React.createElement("div", { style: { margin: "2rem 0px" } }, action ? action :
                         React.createElement("div", { className: "row-flex gap", style: { justifyContent: "center", gap: "0.4rem" } },
                             React.createElement(Button_1.default, { raised: true, rounded: true, startIcon: React.createElement(pi_1.PiArrowLeft, null), bg: 'primary', onClick: function () {
                                     window.history.back();
-                                } }, "Go Back"))))))));
+                                } }, "Take me back \uD83C\uDFE0"))))))));
 }

package/ui/page/NotFound.tsx

@@ -36,14 +36,14 @@ export default function NotFound(
                 header ? header 
                 : 
                 <div className="text-big text-bold text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
-                Page Not Found
+                Page not found 🤔
               </div>
               }
             </div>
           {
             content ? content :
             <div className="article">
-            <Text article text={`Sorry, we couldn't find the page you're looking for.`} color="dark300" block/>
+            <Text article text={`Don't worry, it happens to the best of us 😅. We'll help you find what you're looking for.`} color="dark300" block/>
           </div>
           }
             <div style={{ margin: "2rem 0px" }}>
@@ -53,7 +53,7 @@ export default function NotFound(
                 <Button raised rounded startIcon={<PiArrowLeft />} bg='primary' onClick={() => {
                     window.history.back()
                   }}>
-                 Go Back
+                 Take me back 🏠
                 </Button>
               </div>
               }
@@ -64,3 +64,4 @@ export default function NotFound(
     </div>
   );
 }
+

package/ui/page/UnAuthorized.js

@@ -51,12 +51,12 @@ function UnAuthorized(_a) {
                         React.createElement("div", { className: "h2 text-warning round-edge" }, "401"),
                     React.createElement("div", { style: { margin: "1.4rem 0px" } }, header ? header
                         :
-                            React.createElement("div", { className: "text-bigger text-bold text-dark300", style: { display: "block", transition: "all 0.2s linear 0s" } }, "Unauthorized Access")),
+                            React.createElement("div", { className: "text-big text-bold text-dark300", style: { display: "block", transition: "all 0.2s linear 0s" } }, "\uD83D\uDEAB Unauthorized Access")),
                     content ? content :
                         React.createElement("div", { className: "article" }, "Sorry! You do not have access to this resource."),
                     React.createElement("div", { style: { margin: "2rem 0px" } }, action ? action :
                         React.createElement("div", { className: "row-flex gap", style: { justifyContent: "center", gap: "0.4rem" } },
                             React.createElement(Button_1.default, { raised: true, rounded: true, startIcon: React.createElement(pi_1.PiArrowLeft, null), bg: 'primary', onClick: function () {
                                     window.history.back();
-                                } }, "Go Back"))))))));
+                                } }, "Take Me Back"))))))));
 }

package/ui/page/UnAuthorized.tsx

@@ -33,15 +33,15 @@ export default function UnAuthorized(
               {
                 header ? header 
                 : 
-                <div className="text-bigger text-bold text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
-                Unauthorized Access
+                <div className="text-big text-bold text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
+                🚫 Unauthorized Access
               </div>
               }
             </div>
           {
             content ? content :
             <div className="article">
-            Sorry! You do not have access to this resource.
+           Sorry! You do not have access to this resource.
           </div>
           }
             <div style={{ margin: "2rem 0px" }}>
@@ -51,7 +51,7 @@ export default function UnAuthorized(
             <Button raised rounded startIcon={<PiArrowLeft />} bg='primary' onClick={() => {
                               window.history.back()
                             }}>
-                           Go Back
+                           Take Me Back
                           </Button>
               </div>
               }

package/ui/specials/Circle.js

@@ -60,7 +60,7 @@ 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, 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: {
+    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 || 'lighter', " ").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

@@ -30,7 +30,7 @@ export default function Circle({
 }: Circle_Props) {
   return (
       <div
-        className={`pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || ''} ${
+        className={`pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || 'lighter'} ${
           hoverable ? 'hoverable' : ''
         }`}
         style={{

package/ui/specials/CircleGroup.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface AvatarGroupProps {
+    avatars: React.ReactElement[];
+    size?: number;
+    overlap?: number;
+    maxVisible?: number;
+}
+export default function CircleGroup({ avatars, size, overlap, maxVisible, }: AvatarGroupProps): React.JSX.Element;
+export {};

package/ui/specials/CircleGroup.js

@@ -0,0 +1,26 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CircleGroup;
+var react_1 = __importDefault(require("react"));
+function CircleGroup(_a) {
+    var avatars = _a.avatars, _b = _a.size, size = _b === void 0 ? 2 : _b, _c = _a.overlap, overlap = _c === void 0 ? 0.8 : _c, _d = _a.maxVisible, maxVisible = _d === void 0 ? avatars.length : _d;
+    var displayed = avatars.slice(0, maxVisible);
+    var extra = avatars.length - maxVisible;
+    return (react_1.default.createElement("div", { className: "flex", style: { direction: 'ltr' } },
+        displayed.map(function (avatar, i) { return (react_1.default.createElement("div", { key: i, style: {
+                marginLeft: i === 0 ? '0' : "-".concat(overlap, "rem"),
+                zIndex: avatars.length - i,
+            } }, react_1.default.cloneElement(avatar, { size: size }))); }),
+        extra > 0 && (react_1.default.createElement("div", { className: "avatar lighter text-small flex ", style: {
+                width: "".concat(size, "rem"),
+                height: "".concat(size, "rem"),
+                marginLeft: "-".concat(overlap, "rem"),
+                zIndex: 0,
+            } },
+            "+",
+            extra))));
+}

package/ui/specials/CircleGroup.tsx

@@ -0,0 +1,49 @@
+'use client';
+import React from 'react';
+
+interface AvatarGroupProps {
+  avatars: React.ReactElement[]; // Or you can accept props data instead
+  size?: number;
+  overlap?: number; // how much they overlap in rem
+  maxVisible?: number; // optional limit
+}
+
+export default function CircleGroup({
+  avatars,
+  size = 2,
+  overlap = 0.8,
+  maxVisible = avatars.length,
+}: AvatarGroupProps) {
+  const displayed = avatars.slice(0, maxVisible);
+  const extra = avatars.length - maxVisible;
+
+  return (
+    <div className="flex" style={{ direction: 'ltr' }}>
+      {displayed.map((avatar, i) => (
+        <div
+          key={i}
+          style={{
+            marginLeft: i === 0 ? '0' : `-${overlap}rem`,
+            zIndex: avatars.length - i,
+          }}
+        >
+          {React.cloneElement(avatar, { size })}
+        </div>
+      ))}
+      {extra > 0 && (
+        <div
+          className="avatar lighter text-small flex "
+          style={{
+            width: `${size}rem`,
+            height: `${size}rem`,
+            marginLeft: `-${overlap}rem`,
+            zIndex: 0,
+
+          }}
+        >
+          +{extra}
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/text/Text.d.ts

@@ -34,6 +34,7 @@ type TypographyProps = {
     textAlign?: "left" | "center" | "right" | "justify";
     opacity?: number;
     zIndex?: number;
+    truncate?: number;
     transform?: string;
     customStyles?: React.CSSProperties;
     onClick?: () => void;

package/ui/text/Text.js

@@ -28,8 +28,8 @@ 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, 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 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, truncate = _a.truncate, 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", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "size"]);
     var Tag = block ? 'div' : 'span';
     var sizeClass = "".concat(size === 'h1' ? "h1" :
         size === 'h2' ? "h2" :
@@ -38,7 +38,15 @@ var Text = function (_a) {
                     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 mergedStyles = __assign(__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), (truncate
+        ? {
+            display: '-webkit-box',
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: truncate,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {}));
     var classNames = [
         funcss || '',
         sizeClass,

package/ui/text/Text.tsx

@@ -36,6 +36,7 @@ type TypographyProps = {
   textAlign?: "left" | "center" | "right" | "justify";
   opacity?: number;
   zIndex?: number;
+  truncate?: number;
   transform?: string;
   customStyles?: React.CSSProperties;
   onClick?: () => void;
@@ -93,6 +94,7 @@ const Text: React.FC<TypographyProps> = ({
   whiteSpace,
   wordBreak,
   fontFamily,
+  truncate,
   textShadow,
   textAlign,
   customStyles,
@@ -112,21 +114,31 @@ const Text: React.FC<TypographyProps> = ({
     size === 'h6' ? `h6` : 
     `text-${size}`}`;
 
-  const mergedStyles: React.CSSProperties = {
-    display: block ? 'block' : undefined,
-    fontWeight: bold ? 'bold' : weight ? weight : undefined,
-    lineHeight,
-    letterSpacing,
-    textTransform,
-    textDecoration,
-    fontFamily,
-    textShadow,
-    textAlign,
-    whiteSpace,
-    wordBreak,
-    transform: customStyles?.transform,
-    ...customStyles,
-  };
+const mergedStyles: React.CSSProperties = {
+  display: block ? 'block' : undefined,
+  fontWeight: bold ? 'bold' : weight ? weight : undefined,
+  lineHeight,
+  letterSpacing,
+  textTransform,
+  textDecoration,
+  fontFamily,
+  textShadow,
+  textAlign,
+  whiteSpace,
+  wordBreak,
+  transform: customStyles?.transform,
+  ...customStyles,
+  ...(truncate
+    ? {
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        WebkitLineClamp: truncate,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      }
+    : {}),
+};
+
 
   const classNames = [
     funcss || '',