funuicss 2.5.13 → 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.js

@@ -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") }, !hideClose && (React.createElement(React.Fragment, null, 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

@@ -91,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}
@@ -100,19 +100,15 @@ export default function Modal({
           <ModalHeader
             funcss={titlecss || ''}
             title={title}
-            close={
+            close={!hideClose ? 
+              
               <div
                 onClick={() => setOpen(false)}
                 className={`${closecss || ''} pointer hover-text-error`}
               >
-                {
-                  !hideClose && (
-                    <>
                     {close || <PiX size={25} />}
-                    </>
-                  )
-                }
               </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 || '',