funuicss 3.9.0 → 3.9.2

package/css/fun.css

@@ -2145,6 +2145,7 @@ z-index: 9999 !important;
   top: 0;
 }
 
+
 /* Dropdown Item */
 .dropdown-item {
   padding: 0.4rem 0.8rem;
@@ -4527,101 +4528,62 @@ filter: brightness(90%);
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip .tip {
-  display: block;
-  background-color: var(--dark);
-  backdrop-filter: var(--raiseBackdrop);
-  color: var(--white);
-  text-align: center;
-  border-radius: var(--radius);
-  padding: 0.2rem 0.5rem !important;
-  font-weight: 500 !important;
-  position: absolute;
-  z-index: 10;
- transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+/* Portal tooltip specific styles */
+.tip[style*="position: fixed"] {
+  position: fixed !important;
+  z-index: 9999 !important;
+  background-color: var(--dark) !important;
+  color: var(--white) !important;
+  padding: 0.4rem 0.75rem !important;
+  border-radius: var(--radius) !important;
+  box-shadow: var(--raised) !important;
   font-size: var(--smallFont) !important;
-  line-height: normal !important;
-  box-shadow: var(--raised);
-  width: max-content;
-  white-space: nowrap; /* prevents line breaks */
-  opacity: 0;
-  pointer-events: none;
-}
-
-
-/* Show on hover */
-.tooltip:hover .tip {
- opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-}
-
-/* Arrow base */
-.tooltip .tip::after {
-  content: "";
-  position: absolute;
-  border-style: solid;
-}
-
-/* Top Tooltip */
-.tooltip .tip-top {
-  bottom: 125%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.tooltip .tip-top::after {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 6px 6px 0 6px;
-  border-color: var(--dark) transparent transparent transparent;
-}
-
-/* Bottom Tooltip */
-.tooltip .tip-bottom {
-  top: 125%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.tooltip .tip-bottom::after {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 0 6px 6px 6px;
-  border-color: transparent transparent var(--dark) transparent;
-}
-
-/* Right Tooltip */
-.tooltip .tip-right {
-  top: 50%;
-  left: 105%;
-  transform: translateY(-50%);
-}
-.tooltip .tip-right::after {
-  top: 50%;
-  left: -6px;
-  transform: translateY(-50%);
-  border-width: 6px 6px 6px 0;
-  border-color: transparent var(--dark) transparent transparent;
-}
-
-/* Left Tooltip */
-.tooltip .tip-left {
-  top: 50%;
-  right: 105%;
-  transform: translateY(-50%);
-}
-.tooltip .tip-left::after {
-  top: 50%;
-  right: -6px;
-  transform: translateY(-50%);
-  border-width: 6px 0 6px 6px;
-  border-color: transparent transparent transparent var(--dark);
+  max-width: 200px !important;
+  white-space: nowrap !important;
+  pointer-events: none !important;
+}
+
+/* Arrow for portal tooltips */
+.tip[style*="position: fixed"]::after {
+  content: "" !important;
+  position: absolute !important;
+  border-style: solid !important;
+}
+
+/* Top arrow */
+.tip-top[style*="position: fixed"]::after {
+  bottom: -6px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  border-width: 6px 6px 0 6px !important;
+  border-color: var(--dark) transparent transparent transparent !important;
+}
+
+/* Bottom arrow */
+.tip-bottom[style*="position: fixed"]::after {
+  top: -6px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  border-width: 0 6px 6px 6px !important;
+  border-color: transparent transparent var(--dark) transparent !important;
+}
+
+/* Left arrow */
+.tip-left[style*="position: fixed"]::after {
+  right: -6px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  border-width: 6px 0 6px 6px !important;
+  border-color: transparent transparent transparent var(--dark) !important;
+}
+
+/* Right arrow */
+.tip-right[style*="position: fixed"]::after {
+  left: -6px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  border-width: 6px 6px 6px 0 !important;
+  border-color: transparent var(--dark) transparent transparent !important;
 }
 
 .snackbar {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.0",
+  "version": "3.9.2",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/form/Form.js

@@ -770,7 +770,7 @@ var Form = function (props) {
         console.warn('Form: No fields configured. Please provide fields prop or configure via theme.');
         return null;
     }
-    return (react_1.default.createElement("div", { className: "form-wrapper ".concat(centered ? 'center' : '', " ").concat(className), style: { width: "100%", maxWidth: width || "450px" } },
+    return (react_1.default.createElement("div", { className: "form-wrapper p-5 ".concat(centered ? 'center' : '', " ").concat(className), style: { width: "100%", maxWidth: width || "450px" } },
         title && (react_1.default.createElement("div", { className: "form-header", style: { marginBottom: '2rem' } },
             react_1.default.createElement(Text_1.default, { text: title, size: titleSize || "3xl", color: titleColor || "", block: true }),
             description && (react_1.default.createElement(Text_1.default, { article: true, size: descriptionSize || "sm", color: descriptionColor || "" },

package/ui/sidebar/SideBar.js

@@ -46,6 +46,7 @@ var Button_1 = __importDefault(require("../button/Button"));
 var Accordion_1 = __importDefault(require("../accordion/Accordion"));
 var bs_1 = require("react-icons/bs");
 var Flex_1 = __importDefault(require("../flex/Flex"));
+var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
 function SideBar(_a) {
     var _b, _c;
     var _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.position, position = _e === void 0 ? 'left' : _e, _f = _a.open, open = _f === void 0 ? false : _f, header = _a.header, content = _a.content, footer = _a.footer, _g = _a.top, top = _g === void 0 ? 0 : _g, _h = _a.sidebarWidth, sidebarWidth = _h === void 0 ? 250 : _h, _j = _a.iconCSS, iconCSS = _j === void 0 ? '' : _j, _k = _a.sidebarCss, sidebarCss = _k === void 0 ? '' : _k, activeCss = _a.activeCss, _l = _a.bodyCss, bodyCss = _l === void 0 ? '' : _l, _m = _a.popIcon, popIcon = _m === void 0 ? false : _m, _o = _a.dividers, dividers = _o === void 0 ? false : _o, accordionItemCss = _a.accordionItemCss, _p = _a.links, links = _p === void 0 ? [] : _p, children = _a.children, onClose = _a.onClose, togglePrefix = _a.togglePrefix, _q = _a.isAccordion, isAccordion = _q === void 0 ? false : _q, _r = _a.isCollapsed, isCollapsed = _r === void 0 ? true : _r, // Default to true as requested
@@ -166,23 +167,24 @@ function SideBar(_a) {
                         var isActive = link.onClick
                             ? selectedOption === "".concat(section, "-").concat(index)
                             : pathname === link.uri;
-                        return (react_1.default.createElement("div", { onClick: function () {
-                                if (isMobile) {
-                                    handleClose();
-                                }
-                                if (link === null || link === void 0 ? void 0 : link.onClick) {
-                                    link.onClick();
-                                    setselectedOption("".concat(section, "-").concat(index));
-                                }
-                                else {
-                                    window.location.href = link.uri;
-                                }
-                            }, key: link.uri, className: 'hover-scale-rotate hover-text-primary' },
-                            react_1.default.createElement("span", { className: " pointer ".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
-                                    ? "p-1 ".concat(isActive ? 'text-primary' : 'bg  border', " central")
-                                    : variant === 'minimal' && !isActive
-                                        ? 'p-1 central bg'
-                                        : ''), style: { lineHeight: 0, borderRadius: '0.4rem', fontSize: collapseIconSize } }, link.icon)));
+                        return (react_1.default.createElement(ToolTip_1.default, { key: link.uri, message: link.text, tip: 'right' },
+                            react_1.default.createElement("div", { onClick: function () {
+                                    if (isMobile) {
+                                        handleClose();
+                                    }
+                                    if (link === null || link === void 0 ? void 0 : link.onClick) {
+                                        link.onClick();
+                                        setselectedOption("".concat(section, "-").concat(index));
+                                    }
+                                    else {
+                                        window.location.href = link.uri;
+                                    }
+                                }, className: 'hover-scale-rotate hover-text-primary' },
+                                react_1.default.createElement("span", { className: " pointer ".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
+                                        ? "p-1 ".concat(isActive ? 'text-primary' : 'bg  border', " central")
+                                        : variant === 'minimal' && !isActive
+                                            ? 'p-1 central bg'
+                                            : ''), style: { lineHeight: 0, borderRadius: '0.4rem', fontSize: collapseIconSize } }, link.icon))));
                     }),
                     sectionIndex < Object.keys(groupedLinks).length - 1 && (react_1.default.createElement("div", { className: "mt-1 mb-1 bt fit" }))));
             })))))),

package/ui/tooltip/ToolTip.d.ts

@@ -2,6 +2,12 @@ import * as React from 'react';
 interface ToolTipProps {
     funcss?: string;
     children?: React.ReactNode;
+    content?: React.ReactNode;
+    message?: React.ReactNode;
+    animation?: string;
+    duration?: number;
+    tip?: 'top' | 'bottom' | 'left' | 'right';
+    usePortal?: boolean;
 }
-export default function ToolTip({ funcss, children, ...rest }: ToolTipProps): React.JSX.Element;
+export default function ToolTip({ funcss, children, content, message, animation, duration, tip, usePortal, ...rest }: ToolTipProps): React.JSX.Element;
 export {};

package/ui/tooltip/ToolTip.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -57,7 +58,78 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ToolTip;
 var React = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
 function ToolTip(_a) {
-    var funcss = _a.funcss, children = _a.children, rest = __rest(_a, ["funcss", "children"]);
-    return (React.createElement("span", __assign({ className: "tooltip ".concat(funcss !== null && funcss !== void 0 ? funcss : '') }, rest), children));
+    var funcss = _a.funcss, children = _a.children, content = _a.content, message = _a.message, animation = _a.animation, duration = _a.duration, _b = _a.tip, tip = _b === void 0 ? 'top' : _b, _c = _a.usePortal, usePortal = _c === void 0 ? true : _c, rest = __rest(_a, ["funcss", "children", "content", "message", "animation", "duration", "tip", "usePortal"]);
+    var _d = React.useState(false), isVisible = _d[0], setIsVisible = _d[1];
+    var _e = React.useState({ x: 0, y: 0 }), coords = _e[0], setCoords = _e[1];
+    var triggerRef = React.useRef(null);
+    var text = message || content || children;
+    var handleMouseEnter = function () {
+        if (triggerRef.current) {
+            var rect = triggerRef.current.getBoundingClientRect();
+            var x = rect.left + (rect.width / 2);
+            var y = rect.top;
+            if (tip === 'bottom') {
+                y = rect.bottom;
+            }
+            else if (tip === 'left') {
+                x = rect.left;
+                y = rect.top + (rect.height / 2);
+            }
+            else if (tip === 'right') {
+                x = rect.right;
+                y = rect.top + (rect.height / 2);
+            }
+            // Safely get scroll position
+            var scrollX_1 = typeof window !== 'undefined' ? window.scrollX : 0;
+            var scrollY_1 = typeof window !== 'undefined' ? window.scrollY : 0;
+            setCoords({ x: x + scrollX_1, y: y + scrollY_1 });
+            setIsVisible(true);
+        }
+    };
+    var handleMouseLeave = function () {
+        setIsVisible(false);
+    };
+    // Don't render portal-related JSX during SSR
+    var isBrowser = typeof window !== 'undefined';
+    var tooltipStyle = isBrowser ? {
+        position: 'fixed',
+        top: coords.y,
+        left: coords.x,
+        zIndex: 9999,
+        opacity: isVisible ? 1 : 0,
+        transition: 'opacity 0.2s ease',
+        pointerEvents: 'none',
+        transform: tip === 'top' ? 'translate(-50%, -100%)' :
+            tip === 'bottom' ? 'translate(-50%, 0)' :
+                tip === 'left' ? 'translate(-100%, -50%)' :
+                    'translate(0, -50%)',
+    } : {};
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", __assign({ ref: triggerRef, className: "tooltip ".concat(funcss), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, rest),
+            !usePortal && text && (React.createElement("div", { className: "tip tip-".concat(tip) }, text)),
+            children && children !== text ? children : null),
+        isBrowser && usePortal && text && isVisible && (0, react_dom_1.createPortal)(React.createElement("div", { className: "tip tip-".concat(tip), style: tooltipStyle }, text), document.body)));
 }
+// import * as React from 'react';
+// import Tip from './Tip';
+// interface ToolTipProps {
+//   funcss?: string;
+//   children?: React.ReactNode;
+//   content?: React.ReactNode;
+//   message?: React.ReactNode;
+//   animation?: string;
+//   duration?: number;
+// }
+// export default function ToolTip({ funcss, children, content, message, animation, duration, ...rest }: ToolTipProps) {
+//   const text = message || content || children;
+//   return (
+//     <span
+//       className={`tooltip ${funcss}`}
+//       {...rest}
+//     >
+//       {text && <Tip tip="top" content={text} animation={animation} duration={duration} />}
+//     </span>
+//   );
+// }