funuicss 2.5.0 → 2.5.2

package/ui/appbar/AppBar.tsx

@@ -1,4 +1,8 @@
+'use client'
 import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { PiList, PiX } from 'react-icons/pi';
+
 
 interface NavbarProps {
   fixedTop?: boolean;
@@ -7,14 +11,12 @@ interface NavbarProps {
   fixedBottom?: boolean;
   justify?: string;
   children?: React.ReactNode;
-  left?:React.ReactNode
-  center?:React.ReactNode
-  right?:React.ReactNode 
-  visibleLinks?:boolean,
-  sidebarTrigger?:React.ReactNode ,
-  transparent?:Boolean
-  sideBar?:number
-  width?:string
+  left?: React.ReactNode;
+  center?: React.ReactNode;
+  right?: React.ReactNode;
+  sidebarTrigger?: React.ReactNode;
+  transparent?: boolean;
+  sideBar?: number;
 }
 
 export default function AppBar({
@@ -23,39 +25,69 @@ export default function AppBar({
   padding,
   fixedBottom,
   justify,
-  children,
-  left ,
+  left,
   center,
-  right ,
+  right,
   sideBar,
-  width ,
-  visibleLinks ,
-  sidebarTrigger ,
-  transparent
+  sidebarTrigger,
+  transparent,
 }: NavbarProps) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isMobileScreen, setIsMobileScreen] = useState(false);
+
+  const toggleMenu = () => setIsMobileMenuOpen((prev) => !prev);
+  const closeMenu = () => setIsMobileMenuOpen(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const isMobile = window.innerWidth < 768;
+      setIsMobileScreen(isMobile);
+      if (!isMobile) {
+        setIsMobileMenuOpen(false); // auto-close on large screens
+      }
+    };
+
+    handleResize(); // initial check
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   return (
-    <div>
-      <nav
-        className={`
-          navigation-bar ${funcss ? funcss : ''}
-          ${fixedTop ? 'fixed_top_navbar' : ''}
-          ${sideBar ? 'there_is_sidebar' : ''}
-          ${transparent ? 'transparent' : ''}
-          ${fixedBottom ? 'fixedBottom' : ''}
-        `}
-        style={{ padding: `${padding ? padding : ''}`, justifyContent: `${justify ? justify : ''}`}}
-      >
-        <div>
-            {left}
-        </div>
-        <div  className={` linkWrapper ${visibleLinks ? "visibleLinks" : ""}`}>
-            {center}
-        </div>
-        <div  className={`linkWrapper ${visibleLinks ? "visibleLinks" : ""}`}>
-        {right} 
-        </div>
-        {sidebarTrigger ? <span className='sidebar-trigger'>{sidebarTrigger}</span> : ''}
-      </nav>
-    </div>
+    <nav
+      className={`
+        navigation-bar
+        ${isMobileMenuOpen ? 'navbar-mobile-open' : ''}
+        ${funcss || ''}
+        ${fixedTop ? 'fixed_top_navbar' : ''}
+        ${sideBar ? 'there_is_sidebar' : ''}
+        ${transparent ? 'transparent' : ''}
+        ${fixedBottom ? 'fixedBottom' : ''}
+      `}
+      style={{
+        padding: `${padding || ''}`,
+        justifyContent: `${justify || ''}`,
+      }}
+    >
+      <div className="logoWrapper">
+        {left}
+
+        {/* Show close icon only when mobile and menu is open */}
+        {isMobileScreen && isMobileMenuOpen && (
+          <div className="hover-text-error pointer _closeNav" onClick={closeMenu}>
+            <PiX size={25} />
+          </div>
+        )}
+      </div>
+
+      <div className="linkWrapper">{center}</div>
+      <div className="linkWrapper">{right}</div>
+
+      {/* Show trigger only when mobile and menu is not open */}
+      {isMobileScreen && !isMobileMenuOpen && (
+        <span className="sidebar-trigger pointer hover-text-primary" onClick={toggleMenu}>
+          {sidebarTrigger || <PiList size={30} />}
+        </span>
+      )}
+    </nav>
   );
 }

package/ui/modal/Modal.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 interface ModalProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     funcss?: string;
     animation?: string;
     duration?: number;
     open: boolean;
+    setOpen: (val: boolean) => void;
     maxWidth?: string;
     maxHeight?: string;
     height?: string;
@@ -13,6 +14,7 @@ interface ModalProps {
     body?: React.ReactNode;
     bodycss?: string;
     title?: React.ReactNode;
+    okIcon?: React.ReactNode;
     titlecss?: string;
     footer?: React.ReactNode;
     footercss?: string;
@@ -21,6 +23,10 @@ interface ModalProps {
     id?: string;
     position?: string;
     flat?: boolean;
+    onOk?: () => void;
+    onOkText?: string;
 }
-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 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
+onOkText, // 👈 added
+...rest }: ModalProps): React.JSX.Element;
 export {};

package/ui/modal/Modal.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -52,27 +53,38 @@ var React = __importStar(require("react"));
 var Header_1 = __importDefault(require("./Header"));
 var Content_1 = __importDefault(require("./Content"));
 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, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, height = _a.height, width = _a.width, backdrop = _a.backdrop, 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, rest = __rest(_a, ["children", "funcss", "animation", "duration", "open", "maxWidth", "maxHeight", "height", "width", "backdrop", "title", "titlecss", "body", "bodycss", "footer", "footercss", "close", "closecss", "position", "id", "flat"]);
-    if (open) {
-        return (React.createElement("div", { className: "  modal ".concat(backdrop ? 'backdrop' : '', "  ").concat(position ? position : ''), id: id ? id : '' },
-            React.createElement("div", __assign({ className: "modal-content ".concat(funcss, " ").concat(flat ? "flat" : ""), style: {
-                    animation: " ".concat(duration ? duration : 0.2, "s ").concat(animation ? animation : "ScaleUp"),
-                    maxWidth: maxWidth ? maxWidth : null,
-                    maxHeight: maxHeight ? maxHeight : null,
-                    width: width ? width : null,
-                    height: height ? height : null,
-                } }, rest),
-                title &&
-                    React.createElement(Header_1.default, { funcss: titlecss ? titlecss : '', title: title ? title : "", close: close ? close : "" }),
-                body &&
-                    React.createElement(Content_1.default, { funcss: bodycss ? bodycss : '' }, body),
-                footer &&
-                    React.createElement(Action_1.default, { funcss: footercss ? footercss : '' }, footer),
-                children)));
-    }
-    else {
-        return React.createElement("div", null);
-    }
+    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
+    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"]);
+    var modalId = id || '_mymodal';
+    var handleClickOutside = function (e) {
+        if (e.target && e.target.id === modalId) {
+            setOpen(false);
+        }
+    };
+    var handleOkClick = function () {
+        if (onOk)
+            onOk();
+        else
+            setOpen(false); // default behavior if no onOk is provided
+    };
+    if (!open)
+        return null;
+    return (React.createElement("div", { className: "modal ".concat(backdrop ? 'backdrop' : '', " ").concat(position || ''), id: modalId, onClick: handleClickOutside },
+        React.createElement("div", __assign({ className: "modal-content ".concat(funcss || '', " ").concat(flat ? 'flat' : ''), style: {
+                animation: "".concat(duration || 0.2, "s ").concat(animation || 'ScaleUp'),
+                maxWidth: maxWidth || undefined,
+                maxHeight: maxHeight || undefined,
+                width: width || undefined,
+                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 })) })),
+            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'))),
+            children)));
 }
 exports.default = Modal;

package/ui/modal/Modal.tsx

@@ -1,31 +1,37 @@
+'use client';
 import * as React from 'react';
 import ModalHeader from './Header';
 import ModalContent from './Content';
 import ModalAction from './Action';
-import CloseModal from './Close';
+import { PiX , PiPaperPlaneRight} from 'react-icons/pi';
+import Button from '../button/Button';
 
 interface ModalProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   funcss?: string;
   animation?: string;
   duration?: number;
   open: boolean;
+  setOpen: (val: boolean) => void;
   maxWidth?: string;
   maxHeight?: string;
   height?: string;
   width?: string;
   backdrop?: boolean;
-  body?:React.ReactNode
-  bodycss?:string
-  title?:React.ReactNode
-  titlecss?:string,
-  footer?:React.ReactNode
-  footercss?:string
-  close?:React.ReactNode
-  closecss?:string ,
-  id?:string
-  position?:string 
-  flat?:boolean
+  body?: React.ReactNode;
+  bodycss?: string;
+  title?: React.ReactNode;
+  okIcon?: React.ReactNode;
+  titlecss?: string;
+  footer?: React.ReactNode;
+  footercss?: string;
+  close?: React.ReactNode;
+  closecss?: string;
+  id?: string;
+  position?: string;
+  flat?: boolean;
+  onOk?: () => void; // 👈 new
+  onOkText?: string; // 👈 new
 }
 
 export default function Modal({
@@ -34,11 +40,13 @@ export default function Modal({
   animation,
   duration,
   open,
+  setOpen,
   maxWidth,
   maxHeight,
+  okIcon,
   height,
   width,
-  backdrop,
+  backdrop = false,
   title,
   titlecss,
   body,
@@ -49,45 +57,84 @@ export default function Modal({
   closecss,
   position,
   id,
-  flat ,
+  flat,
+  onOk,       // 👈 added
+  onOkText,   // 👈 added
   ...rest
 }: ModalProps) {
-  if (open) {
-    return (
-      <div className={`  modal ${backdrop ? 'backdrop' : ''}  ${position ? position : ''}`}  id={id ? id : ''}>
-        <div
-          className={`modal-content ${funcss} ${flat ? "flat" : ""}`}
-          style={{
-            animation: ` ${duration ? duration : 0.2}s ${animation ? animation : "ScaleUp"}` ,
-            maxWidth: maxWidth ? maxWidth : null,
-            maxHeight: maxHeight ? maxHeight : null,
-            width: width ? width : null,
-            height: height ? height : null, 
-          }}
-    
-          {...rest}
-        >
-          {
-            title &&
-            <ModalHeader  funcss={titlecss ? titlecss : ''} title={title ? title : ""} close={close ? close : ""} />
-          }
-          {
-            body &&
-            <ModalContent  funcss={bodycss ? bodycss : ''} >
-              {body}
-            </ModalContent>
-          }
-          {
-            footer &&
-            <ModalAction   funcss={footercss ? footercss : ''}>
-              {footer}
-            </ModalAction>
-          }
-          {children}
-        </div>
+  const modalId = id || '_mymodal';
+
+  const handleClickOutside = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target && (e.target as HTMLElement).id === modalId) {
+      setOpen(false);
+    }
+  };
+
+  const handleOkClick = () => {
+    if (onOk) onOk();
+    else setOpen(false); // default behavior if no onOk is provided
+  };
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={`modal ${backdrop ? 'backdrop' : ''} ${position || ''}`}
+      id={modalId}
+      onClick={handleClickOutside}
+    >
+      <div
+        className={`modal-content ${funcss || ''} ${flat ? 'flat' : ''}`}
+        style={{
+          animation: `${duration || 0.2}s ${animation || 'ScaleUp'}`,
+          maxWidth: maxWidth || undefined,
+          maxHeight: maxHeight || undefined,
+          width: width || undefined,
+          height: height || undefined,
+        }}
+        {...rest}
+      >
+        {title && (
+          <ModalHeader
+            funcss={titlecss || ''}
+            title={title}
+            close={
+              <div
+                onClick={() => setOpen(false)}
+                className={`${closecss || ''} pointer hover-text-error`}
+              >
+                {close || <PiX size={25} />}
+              </div>
+            }
+          />
+        )}
+
+        {body && (
+          <ModalContent funcss={bodycss || ''}>
+            {body}
+          </ModalContent>
+        )}
+
+        {/* Show default Ok button if no custom footer */}
+        {footer ? (
+          <ModalAction funcss={footercss || ''}>
+            {footer}
+          </ModalAction>
+        ) : (
+          <ModalAction funcss='text-right'>
+            <Button
+            bg='success800'
+            endIcon={okIcon || <PiPaperPlaneRight />} 
+            raised
+              onClick={handleOkClick}
+            >
+              {onOkText || 'OK'}
+            </Button>
+          </ModalAction>
+        )}
+
+        {children}
       </div>
-    );
-  } else {
-    return <div></div>;
-  }
+    </div>
+  );
 }

package/ui/page/NotFound.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -41,15 +42,14 @@ 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-bigger 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")),
                     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("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.PiHouse, null), bg: 'primary', onClick: function () {
-                                    var previousUrl = '/';
-                                    window.location.assign(previousUrl);
-                                } }, "Back To Home"))))))));
+                            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"))))))));
 }
 exports.default = NotFound;

package/ui/page/NotFound.tsx

@@ -1,6 +1,7 @@
+'use client'
 import * as React from 'react';
 import Button from '../button/Button';
-import {PiHouse} from 'react-icons/pi'
+import {PiArrowLeft} from 'react-icons/pi'
 import Text from '../text/Text';
 
 interface NotFoundProps {
@@ -34,7 +35,7 @@ export default function NotFound(
               {
                 header ? header 
                 : 
-                <div className="text-bigger text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
+                <div className="text-big text-bold text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
                 Page Not Found
               </div>
               }
@@ -49,12 +50,10 @@ export default function NotFound(
               {
                 action ? action :
                 <div className="row-flex gap" style={{ justifyContent: "center", gap: "0.4rem" }}>
-                <Button raised rounded startIcon={<PiHouse />} bg='primary' onClick={() => {
-                     const previousUrl =  '/';
-                     window.location.assign(previousUrl)
-                  
+                <Button raised rounded startIcon={<PiArrowLeft />} bg='primary' onClick={() => {
+                    window.history.back()
                   }}>
-                 Back To Home
+                 Go Back
                 </Button>
               </div>
               }

package/ui/page/UnAuthorized.js

@@ -40,11 +40,13 @@ 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-dark300", style: { display: "block", transition: "all 0.2s linear 0s" } }, "Unauthorized Access")),
+                            React.createElement("div", { className: "text-bigger text-bold text-dark300", style: { display: "block", transition: "all 0.2s linear 0s" } }, "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, startIcon: React.createElement(pi_1.PiHouse, null), bg: 'primary800', onClick: function () { return window.location.assign("/"); } }, "Back To Home"))))))));
+                            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"))))))));
 }
 exports.default = UnAuthorized;

package/ui/page/UnAuthorized.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Button from '../button/Button';
-import {PiHouse} from 'react-icons/pi'
+import {PiArrowLeft} from 'react-icons/pi'
 
 interface UnAuthorizedProps {
     header?:React.ReactNode 
@@ -33,7 +33,7 @@ export default function UnAuthorized(
               {
                 header ? header 
                 : 
-                <div className="text-bigger text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
+                <div className="text-bigger text-bold text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
                 Unauthorized Access
               </div>
               }
@@ -48,9 +48,11 @@ export default function UnAuthorized(
               {
                 action ? action :
                 <div className="row-flex gap" style={{ justifyContent: "center", gap: "0.4rem" }}>
-                <Button raised startIcon={<PiHouse />} bg='primary800' onClick={() => window.location.assign("/")}>
-                 Back To Home
-                </Button>
+            <Button raised rounded startIcon={<PiArrowLeft />} bg='primary' onClick={() => {
+                              window.history.back()
+                            }}>
+                           Go Back
+                          </Button>
               </div>
               }
             </div>

package/ui/snackbar/SnackBar.d.ts

@@ -1,12 +1,15 @@
 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;
+    autoHide?: boolean;
+    autoHideDuration?: number;
     flat?: boolean;
 }
 declare const SnackBar: React.FC<SnackbarProps>;

package/ui/snackbar/SnackBar.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -25,19 +26,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var SnackBar = function (_a) {
-    var message = _a.message, close = _a.close, open = _a.open, position = _a.position, funcss = _a.funcss, animation = _a.animation, duration = _a.duration, flat = _a.flat;
-    if (open) {
-        return (React.createElement("div", null,
-            React.createElement("div", { className: "snackbar ".concat(position, " ").concat(funcss, " ").concat(flat ? "flat" : ""), style: { animation: " ".concat(duration, "s ").concat(animation) } },
-                React.createElement("div", { className: "snackbar-content" },
-                    React.createElement("div", { className: "snackbar-body" }, message),
-                    close &&
-                        React.createElement("div", null,
-                            React.createElement("span", { className: "close-snackbar" },
-                                React.createElement("span", null, close)))))));
-    }
-    else {
-        return React.createElement("div", null);
-    }
+    var message = _a.message, close = _a.close, open = _a.open, setOpen = _a.setOpen, position = _a.position, funcss = _a.funcss, animation = _a.animation, _b = _a.duration, duration = _b === void 0 ? 0.3 : _b, _c = _a.autoHide, autoHide = _c === void 0 ? false : _c, _d = _a.autoHideDuration, autoHideDuration = _d === void 0 ? 3000 : _d, flat = _a.flat;
+    React.useEffect(function () {
+        if (open && autoHide) {
+            var timer_1 = setTimeout(function () {
+                setOpen(false);
+            }, autoHideDuration);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [open, autoHide, autoHideDuration, setOpen]);
+    if (!open)
+        return null;
+    return (React.createElement("div", { className: "snackbar ".concat(position, " ").concat(funcss || '', " ").concat(flat ? 'flat' : ''), style: { animation: "".concat(duration, "s ").concat(animation || 'SlideUp') } },
+        React.createElement("div", { className: "snackbar-content" },
+            React.createElement("div", { className: "snackbar-body" }, message),
+            close && (React.createElement("div", { className: "close-snackbar pointer", onClick: function () { return setOpen ? setOpen(false) : null; } }, close)))));
 };
 exports.default = SnackBar;