funuicss 3.8.1 → 3.8.3

package/ui/accordion/Accordion.js

@@ -1,5 +1,16 @@
 "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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -42,44 +53,457 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionItem = void 0;
 var react_1 = __importStar(require("react"));
+var getCssVariable_1 = require("../../utils/getCssVariable");
+var componentUtils_1 = require("../../utils/componentUtils");
+var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
 var pi_1 = require("react-icons/pi");
-var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
+// Custom hook for dynamic icons
+var useDynamicIcon = function (iconString) {
+    var _a = (0, react_1.useState)(null), iconNode = _a[0], setIconNode = _a[1];
+    var _b = (0, react_1.useState)(false), hasValidIcon = _b[0], setHasValidIcon = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (!iconString || typeof iconString !== 'string' || iconString.trim() === '') {
+            setIconNode(null);
+            setHasValidIcon(false);
+            return;
+        }
+        (0, getDynamicIcon_1.getDynamicIcon)(iconString).then(function (node) {
+            if (node) {
+                setIconNode(node);
+                setHasValidIcon(true);
+            }
+            else {
+                setIconNode(null);
+                setHasValidIcon(false);
+            }
+        });
+    }, [iconString]);
+    return { iconNode: iconNode, hasValidIcon: hasValidIcon };
+};
+// Icon component with dynamic icon support
+var AccordionIcon = function (_a) {
+    var icon = _a.icon, iconColor = _a.iconColor, _b = _a.iconSize, iconSize = _b === void 0 ? 15 : _b, _c = _a.iconClassName, iconClassName = _c === void 0 ? '' : _c, _d = _a.isExpandIcon, isExpandIcon = _d === void 0 ? false : _d, expandIcon = _a.expandIcon, expandIconColor = _a.expandIconColor, _e = _a.expandIconSize, expandIconSize = _e === void 0 ? 15 : _e, _f = _a.expandIconClassName, expandIconClassName = _f === void 0 ? '' : _f, _g = _a.isOpen, isOpen = _g === void 0 ? false : _g, _h = _a.rotate, rotate = _h === void 0 ? true : _h;
+    var iconToUse = isExpandIcon ? expandIcon : icon;
+    var colorToUse = isExpandIcon ? expandIconColor : iconColor;
+    var sizeToUse = isExpandIcon ? expandIconSize : iconSize;
+    var classNameToUse = isExpandIcon ? expandIconClassName : iconClassName;
+    // Handle string icons (dynamic)
+    var isStringIcon = iconToUse && typeof iconToUse === 'string';
+    var _j = useDynamicIcon(isStringIcon ? iconToUse : undefined), dynamicIconNode = _j.iconNode, hasValidDynamicIcon = _j.hasValidIcon;
+    // Get color class from color name
+    var getColorClass = function (color) {
+        if (!color)
+            return '';
+        if (color.startsWith('text-') || color.startsWith('bg-') || color.startsWith('border-')) {
+            return color;
+        }
+        var colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light'];
+        if (colorNames.includes(color)) {
+            return "text-".concat(color);
+        }
+        return '';
+    };
+    var colorClass = getColorClass(colorToUse);
+    var renderIconWithProps = function (iconElement, className, size) {
+        if (!react_1.default.isValidElement(iconElement))
+            return iconElement;
+        var props = {
+            className: "".concat(className, " ").concat(colorClass).trim(),
+        };
+        if (size !== undefined) {
+            props.size = size;
+        }
+        return react_1.default.cloneElement(iconElement, props);
+    };
+    // If it's a React element icon
+    if (iconToUse && typeof iconToUse !== 'string' && react_1.default.isValidElement(iconToUse)) {
+        return renderIconWithProps(iconToUse, "".concat(isExpandIcon ? 'accordion-expand-icon' : 'accordion-icon', " ").concat(classNameToUse, " ").concat(isOpen && rotate ? 'accordion-rotated' : '').trim(), sizeToUse);
+    }
+    // If it's a string icon (dynamic)
+    if (isStringIcon && hasValidDynamicIcon && dynamicIconNode) {
+        return renderIconWithProps(dynamicIconNode, "".concat(isExpandIcon ? 'accordion-expand-icon' : 'accordion-icon', " ").concat(classNameToUse, " ").concat(isOpen && rotate ? 'accordion-rotated' : '').trim(), sizeToUse);
+    }
+    // Default expand icon (PiCaretDown)
+    if (isExpandIcon && !iconToUse) {
+        return (react_1.default.createElement(pi_1.PiCaretDown, { className: "accordion-expand-icon ".concat(expandIconClassName || '', " ").concat(colorClass, " ").concat(isOpen && rotate ? 'accordion-rotated' : '').trim(), style: {
+                fontSize: expandIconSize,
+                transition: 'transform 0.3s ease',
+            } }));
+    }
+    return null;
+};
+// Accordion Item Component
 var AccordionItem = function (_a) {
-    var icon = _a.icon, title = _a.title, content = _a.content, isOpen = _a.isOpen, onToggle = _a.onToggle, _b = _a.itemClass, itemClass = _b === void 0 ? '' : _b, _c = _a.titleClass, titleClass = _c === void 0 ? '' : _c, _d = _a.iconClass, iconClass = _d === void 0 ? '' : _d, _e = _a.contentClass, contentClass = _e === void 0 ? '' : _e, _f = _a.activeClass, activeClass = _f === void 0 ? '' : _f;
-    return (react_1.default.createElement("div", { className: "accordion-item ".concat(itemClass, " ").concat(isOpen ? activeClass : '') },
-        react_1.default.createElement("div", { className: "accordion-header ".concat(titleClass), onClick: onToggle, role: "button", "aria-expanded": isOpen },
-            react_1.default.createElement(RowFlex_1.default, { alignItems: "center", gap: 0.6 },
-                icon && react_1.default.createElement("div", { style: { lineHeight: 0 } }, icon),
-                react_1.default.createElement("div", { className: "col fit" }, title)),
-            react_1.default.createElement("div", { style: { lineHeight: 0 }, className: "".concat(iconClass, " ").concat(isOpen ? 'accordion-rotated' : '') },
-                react_1.default.createElement(pi_1.PiCaretDown, null))),
-        react_1.default.createElement("div", { style: { overflow: isOpen ? 'visible' : 'hidden' }, className: "accordion-content ".concat(contentClass, " ").concat(isOpen ? 'open' : '') },
-            react_1.default.createElement("div", { className: "accordion-inner" }, content))));
+    var item = _a.item, index = _a.index, isOpen = _a.isOpen, onToggle = _a.onToggle, globalProps = _a.globalProps, _b = _a.animationDuration, animationDuration = _b === void 0 ? 300 : _b, _c = _a.animationEasing, animationEasing = _c === void 0 ? 'ease' : _c;
+    // Merge item props with global props (item props take precedence)
+    var mergedProps = __assign(__assign({}, globalProps), item);
+    var itemClass = mergedProps.itemClass, titleClass = mergedProps.titleClass, iconClass = mergedProps.iconClass, contentClass = mergedProps.contentClass, activeClass = mergedProps.activeClass, icon = mergedProps.icon, iconColor = mergedProps.iconColor, iconSize = mergedProps.iconSize, iconClassName = mergedProps.iconClassName, _d = mergedProps.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, expandIcon = mergedProps.expandIcon, expandIconColor = mergedProps.expandIconColor, expandIconSize = mergedProps.expandIconSize, expandIconClassName = mergedProps.expandIconClassName, _e = mergedProps.expandIconRotate, expandIconRotate = _e === void 0 ? true : _e, titleSize = mergedProps.titleSize, titleWeight = mergedProps.titleWeight, titleColor = mergedProps.titleColor, contentSize = mergedProps.contentSize, contentWeight = mergedProps.contentWeight, contentColor = mergedProps.contentColor, disabled = mergedProps.disabled, customRender = mergedProps.customRender;
+    // Get background class from color name
+    var getBgClass = function (color) {
+        if (!color)
+            return '';
+        if (color.startsWith('bg-')) {
+            return color;
+        }
+        var colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light'];
+        if (colorNames.includes(color)) {
+            return "bg-".concat(color);
+        }
+        return '';
+    };
+    // Get border class from color name
+    var getBorderClass = function (color) {
+        if (!color)
+            return '';
+        if (color.startsWith('border-')) {
+            return color;
+        }
+        var colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light'];
+        if (colorNames.includes(color)) {
+            return "border-".concat(color);
+        }
+        // Special handling for borderColor
+        if (color === 'borderColor') {
+            return 'border-default';
+        }
+        return '';
+    };
+    // Get text size class
+    var getTextSizeClass = function (size) {
+        if (!size)
+            return 'text-sm';
+        if (size.startsWith('text-')) {
+            return size;
+        }
+        var validSizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'];
+        if (validSizes.includes(size)) {
+            return "text-".concat(size);
+        }
+        return 'text-sm';
+    };
+    // Get text color class
+    var getTextColorClass = function (color) {
+        if (!color)
+            return 'text-default';
+        if (color.startsWith('text-')) {
+            return color;
+        }
+        var colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light', 'default', 'muted'];
+        if (colorNames.includes(color)) {
+            return "text-".concat(color);
+        }
+        return 'text-default';
+    };
+    var getSpacingValue = function (value) {
+        if (!value)
+            return '';
+        if (/^\d+$/.test(value)) {
+            return "".concat(parseInt(value) * 0.25, "rem");
+        }
+        return value;
+    };
+    if (customRender) {
+        return customRender(isOpen);
+    }
+    var titleContent = typeof item.title === 'string' ? (react_1.default.createElement("div", { className: "\n        ".concat(getTextSizeClass(titleSize), " \n        ").concat(getTextColorClass(titleColor), "\n        ").concat(titleClass || '', "\n      ").trim(), style: {
+            fontWeight: titleWeight || 400,
+        } }, item.title)) : item.title;
+    // Get container classes
+    var getContainerClasses = function () {
+        var classes = ['accordion-item'];
+        // Background
+        if (globalProps.bg) {
+            var bgClass = getBgClass(globalProps.bg);
+            if (bgClass) {
+                classes.push(bgClass);
+            }
+        }
+        // Border
+        if (globalProps.border) {
+            classes.push('border');
+            var borderClass = getBorderClass(globalProps.borderColor);
+            if (borderClass) {
+                classes.push(borderClass);
+            }
+        }
+        // Border radius
+        if (globalProps.borderRadius) {
+            var radius = getSpacingValue(globalProps.borderRadius);
+            if (radius === '0.25rem')
+                classes.push('rounded-sm');
+            else if (radius === '0.5rem')
+                classes.push('rounded-md');
+            else if (radius === '0.75rem')
+                classes.push('rounded-lg');
+            else if (radius === '1rem')
+                classes.push('rounded-xl');
+        }
+        // Shadow
+        if (globalProps.shadow && globalProps.shadow !== 'none') {
+            classes.push("shadow-".concat(globalProps.shadow));
+        }
+        // State classes
+        if (isOpen) {
+            classes.push(activeClass || 'active');
+        }
+        if (disabled) {
+            classes.push('disabled');
+        }
+        // Custom classes
+        if (itemClass) {
+            classes.push(itemClass);
+        }
+        return classes.filter(Boolean).join(' ');
+    };
+    return (react_1.default.createElement("div", { className: getContainerClasses(), style: {
+            marginBottom: getSpacingValue(globalProps.gap) || '0.5rem',
+            overflow: 'hidden', // Add overflow hidden to prevent content overflow
+        } },
+        react_1.default.createElement("div", { className: "accordion-header ".concat(titleClass || ''), onClick: !disabled ? function () { return onToggle(index); } : undefined, role: "button", tabIndex: disabled ? -1 : 0, "aria-expanded": isOpen, onKeyDown: function (e) {
+                if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault();
+                    onToggle(index);
+                }
+            }, style: {
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                opacity: disabled ? 0.6 : 1,
+                padding: getSpacingValue(globalProps.padding) || '0',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', flex: 1 } },
+                iconPosition === 'left' && (react_1.default.createElement(AccordionIcon, { icon: icon, iconColor: iconColor, iconSize: iconSize, iconClassName: iconClass || iconClassName, isOpen: isOpen })),
+                react_1.default.createElement("div", { className: "col", style: { flex: 1 } }, titleContent),
+                iconPosition === 'right' && (react_1.default.createElement(AccordionIcon, { icon: icon, iconColor: iconColor, iconSize: iconSize, iconClassName: iconClass || iconClassName, isOpen: isOpen }))),
+            react_1.default.createElement("div", { style: { lineHeight: 0 } },
+                react_1.default.createElement(AccordionIcon, { isExpandIcon: true, expandIcon: expandIcon, expandIconColor: expandIconColor, expandIconSize: expandIconSize, expandIconClassName: expandIconClassName, isOpen: isOpen, rotate: expandIconRotate }))),
+        react_1.default.createElement("div", { className: "accordion-content ".concat(contentClass || '', " ").concat(isOpen ? 'open' : ''), style: {
+                maxHeight: isOpen ? '10000px' : '0',
+                overflow: 'hidden',
+                transition: "max-height ".concat(animationDuration, "ms ").concat(animationEasing),
+                padding: isOpen ? getSpacingValue(globalProps.padding) || '0.5rem 0' : '0',
+                backgroundColor: globalProps.contentBg ? getBgClass(globalProps.contentBg) : '',
+                borderTop: isOpen && globalProps.border ? "1px solid ".concat((0, getCssVariable_1.getCssVariableValue)(globalProps.borderColor) || 'var(--borderColor)') : 'none',
+            } },
+            react_1.default.createElement("div", { className: "\n            accordion-inner\n            ".concat(getTextSizeClass(contentSize), "\n            ").concat(getTextColorClass(contentColor), "\n          ").trim(), style: {
+                    opacity: isOpen ? 1 : 0,
+                    transition: "opacity ".concat(animationDuration, "ms ").concat(animationEasing),
+                    fontWeight: contentWeight || 400,
+                    lineHeight: 1.6,
+                } }, item.content))));
 };
-exports.AccordionItem = AccordionItem;
-var Accordion = function (_a) {
-    var _b;
-    var items = _a.items, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? false : _c, _d = _a.defaultOpenIndexes, defaultOpenIndexes = _d === void 0 ? [] : _d, itemClass = _a.itemClass, titleClass = _a.titleClass, iconClass = _a.iconClass, contentClass = _a.contentClass, activeClass = _a.activeClass, _e = _a.funcss, funcss = _e === void 0 ? '' : _e;
-    var _f = (0, react_1.useState)(allowMultiple ? defaultOpenIndexes : [(_b = defaultOpenIndexes[0]) !== null && _b !== void 0 ? _b : -1]), openIndexes = _f[0], setOpenIndexes = _f[1];
+// Main Accordion Component
+var Accordion = function (localProps) {
+    // Merge props with configuration
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Accordion', localProps.variant).mergeWithLocal;
+    var mergedProps = mergeWithLocal(localProps).props;
+    var final = mergedProps;
+    var _a = (0, react_1.useState)([]), openIndexes = _a[0], setOpenIndexes = _a[1];
+    var _b = (0, react_1.useState)([]), itemsArray = _b[0], setItemsArray = _b[1];
+    // Parse items from JSON string if needed
+    (0, react_1.useEffect)(function () {
+        if (typeof final.items === 'string') {
+            try {
+                var parsed = JSON.parse(final.items);
+                setItemsArray(Array.isArray(parsed) ? parsed : [parsed]);
+            }
+            catch (error) {
+                console.error('Error parsing items JSON:', error);
+                setItemsArray([]);
+            }
+        }
+        else if (Array.isArray(final.items)) {
+            setItemsArray(final.items);
+        }
+        else {
+            setItemsArray([]);
+        }
+    }, [final.items]);
+    // Initialize open indexes
+    (0, react_1.useEffect)(function () {
+        if (final.allowMultiple) {
+            setOpenIndexes(final.defaultOpenIndexes || []);
+        }
+        else {
+            setOpenIndexes(final.defaultOpenIndexes && final.defaultOpenIndexes.length > 0
+                ? [final.defaultOpenIndexes[0]]
+                : []);
+        }
+    }, [final.defaultOpenIndexes, final.allowMultiple]);
     var toggleIndex = function (index) {
-        if (allowMultiple) {
+        var newOpenIndexes = [];
+        if (final.allowMultiple) {
             if (openIndexes.includes(index)) {
-                setOpenIndexes(openIndexes.filter(function (i) { return i !== index; }));
+                newOpenIndexes = openIndexes.filter(function (i) { return i !== index; });
             }
             else {
-                setOpenIndexes(__spreadArray(__spreadArray([], openIndexes, true), [index], false));
+                newOpenIndexes = __spreadArray(__spreadArray([], openIndexes, true), [index], false);
             }
         }
         else {
-            setOpenIndexes(openIndexes.includes(index) ? [] : [index]);
+            newOpenIndexes = openIndexes.includes(index) ? [] : [index];
+        }
+        setOpenIndexes(newOpenIndexes);
+        // Call callback if provided
+        if (final.onItemToggle) {
+            final.onItemToggle(index, !openIndexes.includes(index));
+        }
+    };
+    var getContainerClasses = function () {
+        var classes = ['accordion'];
+        if (final.className) {
+            classes.push(final.className);
         }
+        if (final.funcss) {
+            classes.push(final.funcss);
+        }
+        return classes.filter(Boolean).join(' ');
+    };
+    var getContainerStyles = function () {
+        var styles = {};
+        if (final.margin) {
+            var marginValue = getSpacingValue(final.margin);
+            if (marginValue) {
+                styles.margin = marginValue;
+            }
+        }
+        if (final.style) {
+            Object.assign(styles, final.style);
+        }
+        return styles;
+    };
+    var getSpacingValue = function (value) {
+        if (!value)
+            return '';
+        if (/^\d+$/.test(value)) {
+            return "".concat(parseInt(value) * 0.25, "rem");
+        }
+        return value;
     };
-    return (react_1.default.createElement("div", { className: "accordion ".concat(funcss) }, items.map(function (item, index) { return (react_1.default.createElement(exports.AccordionItem, { key: index, index: index, icon: item.icon, title: item.title, content: item.content, isOpen: openIndexes.includes(index), onToggle: function () { return toggleIndex(index); }, itemClass: itemClass, titleClass: titleClass, iconClass: iconClass, contentClass: contentClass, activeClass: activeClass })); })));
+    if (itemsArray.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: getContainerClasses(), style: getContainerStyles() }, itemsArray.map(function (item, index) { return (react_1.default.createElement(AccordionItem, { key: index, item: item, index: index, isOpen: openIndexes.includes(index), onToggle: toggleIndex, globalProps: final, animationDuration: final.animationDuration, animationEasing: final.animationEasing })); })));
 };
 exports.default = Accordion;
+// 'use client';
+// import React, { useState } from 'react';
+// import { PiCaretDown } from 'react-icons/pi';
+// import RowFlex from '../specials/RowFlex';
+// export type AccordionItemProps = {
+//   title: string;
+//   content: React.ReactNode;
+//   isOpen?: boolean;
+//   onToggle?: () => void;
+//   index?: number;
+//   icon?: React.ReactNode;
+//   // Customization
+//   itemClass?: string;
+//   titleClass?: string;
+//   iconClass?: string;
+//   contentClass?: string;
+//   activeClass?: string;
+// };
+// export const AccordionItem: React.FC<AccordionItemProps> = ({
+//   icon,
+//   title,
+//   content,
+//   isOpen,
+//   onToggle,
+//   itemClass = '',
+//   titleClass = '',
+//   iconClass = '',
+//   contentClass = '',
+//   activeClass = '',
+// }) => {
+//   return (
+//     <div className={`accordion-item ${itemClass} ${isOpen ? activeClass : ''}`}>
+//       <div
+//         className={`accordion-header ${titleClass}`}
+//         onClick={onToggle}
+//         role="button"
+//         aria-expanded={isOpen}
+//       >
+//         <RowFlex alignItems="center" gap={0.6}>
+//           {icon && <div style={{ lineHeight: 0 }}>{icon}</div>}
+//           <div className="col fit">{title}</div>
+//         </RowFlex>
+//         <div
+//           style={{ lineHeight: 0 }}
+//           className={`${iconClass} ${isOpen ? 'accordion-rotated' : ''}`}
+//         >
+//           <PiCaretDown />
+//         </div>
+//       </div>
+//       <div  style={{overflow:isOpen?'visible':'hidden'}} className={`accordion-content ${contentClass} ${isOpen ? 'open' : ''}`}>
+//         <div className="accordion-inner">{content}</div>
+//       </div>
+//     </div>
+//   );
+// };
+// export type AccordionProps = {
+//   items: {
+//     title: string;
+//     content: React.ReactNode;
+//     icon?: React.ReactNode;
+//   }[];
+//   allowMultiple?: boolean;
+//   defaultOpenIndexes?: number[];
+//   // Custom styles
+//   itemClass?: string;
+//   titleClass?: string;
+//   iconClass?: string;
+//   contentClass?: string;
+//   activeClass?: string;
+//   funcss?: string;
+// };
+// const Accordion: React.FC<AccordionProps> = ({  
+//   items,
+//   allowMultiple = false,
+//   defaultOpenIndexes = [],
+//   itemClass,
+//   titleClass,
+//   iconClass,
+//   contentClass,
+//   activeClass,
+//   funcss = '',
+// }) => {
+//   const [openIndexes, setOpenIndexes] = useState<number[]>(
+//     allowMultiple ? defaultOpenIndexes : [defaultOpenIndexes[0] ?? -1]
+//   );
+//   const toggleIndex = (index: number) => {
+//     if (allowMultiple) {
+//       if (openIndexes.includes(index)) {
+//         setOpenIndexes(openIndexes.filter((i) => i !== index));
+//       } else {
+//         setOpenIndexes([...openIndexes, index]);
+//       }
+//     } else {
+//       setOpenIndexes(openIndexes.includes(index) ? [] : [index]);
+//     }
+//   };
+//   return (
+//     <div className={`accordion ${funcss}`}>
+//       {items.map((item, index) => (
+//         <AccordionItem
+//           key={index}
+//           index={index}
+//           icon={item.icon}
+//           title={item.title}
+//           content={item.content}
+//           isOpen={openIndexes.includes(index)}
+//           onToggle={() => toggleIndex(index)}
+//           itemClass={itemClass}
+//           titleClass={titleClass}
+//           iconClass={iconClass}
+//           contentClass={contentClass}
+//           activeClass={activeClass}
+//         />
+//       ))}
+//     </div>
+//   );
+// };
+// export default Accordion;

package/ui/appbar/AppBar.d.ts

@@ -15,6 +15,7 @@ interface NavbarProps {
     fixedBottom?: boolean;
     justify?: string;
     transparent?: boolean;
+    testing?: boolean;
     children?: React.ReactNode;
     left?: React.ReactNode;
     center?: React.ReactNode;

package/ui/appbar/AppBar.js

@@ -85,7 +85,7 @@ var DropdownArrow = function (_a) {
 };
 // Link Item Component with Dropdown Support
 var LinkItem = function (_a) {
-    var link = _a.link, renderLink = _a.renderLink, _b = _a.linkPadding, linkPadding = _b === void 0 ? '0.5rem 1rem' : _b, _c = _a.activeLinkColor, activeLinkColor = _c === void 0 ? 'primary' : _c, _d = _a.dropdownArrow, dropdownArrow = _d === void 0 ? true : _d, _e = _a.isMobile, isMobile = _e === void 0 ? false : _e;
+    var link = _a.link, renderLink = _a.renderLink, _b = _a.linkPadding, linkPadding = _b === void 0 ? '' : _b, _c = _a.activeLinkColor, activeLinkColor = _c === void 0 ? 'primary' : _c, _d = _a.dropdownArrow, dropdownArrow = _d === void 0 ? true : _d, _e = _a.isMobile, isMobile = _e === void 0 ? false : _e;
     var _f = (0, react_1.useState)(false), isOpen = _f[0], setIsOpen = _f[1];
     var _g = (0, react_1.useState)(null), iconNode = _g[0], setIconNode = _g[1];
     var timeoutRef = (0, react_1.useRef)();
@@ -271,7 +271,7 @@ function AppBar(localProps) {
             React.createElement(NavLinks, { links: allLinks, renderLink: final.renderLink, linkGap: "0.5rem", linkPadding: "1rem", activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow, isMobile: true })));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("nav", { id: 'appBar', className: "navigation-bar\n          ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n          ").concat(final.funcss || '', "\n          ").concat(final.fixedTop ? 'fixed_top_navbar' : '', "\n          ").concat(final.sideBar ? 'there_is_sidebar' : '', "\n          ").concat(final.transparent ? 'transparent' : '', "\n          ").concat(final.fixedBottom ? 'fixedBottom' : '', "\n        "), style: {
+        React.createElement("nav", { id: 'appBar', className: "navigation-bar\n          ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n          ").concat(final.funcss || '', "\n          ").concat(final.testing ? "" : final.fixedTop ? 'fixed_top_navbar' : '', "\n          ").concat(final.sideBar ? 'there_is_sidebar' : '', "\n          ").concat(final.transparent ? 'transparent' : '', "\n          ").concat(final.fixedBottom ? 'fixedBottom' : '', "\n        "), style: {
                 padding: "".concat(final.padding || ''),
                 justifyContent: "".concat(final.justify || ''),
             } },

package/ui/empty/Empty.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 interface EmptyProps {
-    header?: React.ReactNode;
-    title?: string;
+    header?: React.ReactNode | String;
+    title?: string | React.ReactNode;
     titleSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     content?: React.ReactNode;
-    description?: string;
+    description?: string | React.ReactNode;
     descriptionSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     action?: React.ReactNode;
     ctaText?: string;

package/ui/flex/Flex.d.ts

@@ -10,7 +10,7 @@ interface FlexProps {
     justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
     alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
     alignContent?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
-    gap?: number;
+    gap?: number | string;
     gapX?: number;
     gapY?: number;
     gapUnit?: 'rem' | 'px' | 'em';

package/ui/notification/Notification.d.ts

@@ -1,19 +1,76 @@
 import React from 'react';
 type NotificationProps = {
-    position: string;
-    funcss?: string;
-    animation?: string;
+    variant?: string;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    state?: boolean;
+    setOpen?: (state: boolean) => void;
+    animation?: 'fadeIn' | 'slideIn' | 'scale' | 'bounce' | 'none';
     duration?: number;
     autoHide?: boolean;
     autoHideDuration?: number;
-    children?: React.ReactNode;
-    state: boolean;
-    setOpen: (state: boolean) => void;
-    width?: string;
-    header?: React.ReactNode;
+    avatarUrl?: string;
+    avatarAlt?: string;
+    avatarSize?: number;
+    avatarClassName?: string;
+    avatarRounded?: string;
+    title?: React.ReactNode;
+    titleSize?: string;
+    titleWeight?: number;
+    titleColor?: string;
+    titleClassName?: string;
+    titleVariant?: string;
+    subtitle?: React.ReactNode;
+    subtitleSize?: string;
+    subtitleWeight?: number;
+    subtitleColor?: string;
+    subtitleClassName?: string;
+    subtitleVariant?: string;
+    timestamp?: string;
+    timestampSize?: string;
+    timestampColor?: string;
+    timestampClassName?: string;
+    icon?: string | React.ReactNode;
+    iconColor?: string;
+    iconSize?: number;
+    iconClassName?: string;
+    iconPosition?: 'left' | 'right';
     content?: React.ReactNode;
-    footer?: React.ReactNode;
+    contentSize?: string;
+    contentWeight?: number;
+    contentColor?: string;
+    contentClassName?: string;
+    contentVariant?: string;
+    ctaText?: string;
+    ctaUrl?: string;
+    ctaVariant?: 'primary' | 'secondary' | 'accent' | 'text' | 'outline';
+    ctaOnClick?: () => void;
+    ctaClassName?: string;
+    ctaCss?: string;
+    ctaAlign?: 'left' | 'center' | 'right';
+    width?: string;
+    maxWidth?: string;
+    gap?: string;
+    padding?: string;
+    margin?: string;
+    bg?: string;
+    border?: boolean;
+    borderColor?: string;
+    borderWidth?: string;
+    borderRadius?: string;
+    shadow?: boolean;
+    zIndex?: number;
+    headerGap?: string;
+    headerAlign?: 'start' | 'center' | 'end';
+    headerJustify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    className?: string;
+    funcss?: string;
+    style?: React.CSSProperties;
+    testing?: boolean;
+    children?: React.ReactNode;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onAction?: (action: string) => void;
 };
-export default function Notification({ position, funcss, animation, duration, autoHide, autoHideDuration, children, state, setOpen, // 👈 receives the setter from parent
-width, header, content, footer, }: NotificationProps): React.JSX.Element | null;
-export {};
+declare const Notification: React.FC<NotificationProps>;
+export default Notification;
+export type { NotificationProps };