funuicss 3.8.7 → 3.8.9

package/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Alert } from "./ui/alert/Alert";
 export { default as ThemeProvider } from "./ui/theme/theme";
 export { default as Button } from "./ui/button/Button";
+export { default as Badge } from "./ui/button/Button";
 export { default as Card } from "./ui/card/Card";
 export { default as BreadCrumb } from "./ui/breadcrumb/BreadCrumb";
 export { default as Container } from "./ui/container/Container";
@@ -34,6 +35,7 @@ export { default as Tip } from "./ui/tooltip/Tip";
 export { default as RowFlex } from "./ui/specials/RowFlex";
 export { default as Section } from "./ui/specials/Section";
 export { default as Hr } from "./ui/specials/Hr";
+export { default as Divider } from "./ui/specials/Hr";
 export { default as Circle } from "./ui/specials/Circle";
 export { default as CircleGroup } from "./ui/specials/CircleGroup";
 export { default as FullCenteredPage } from "./ui/specials/FullCenteredPage";
@@ -60,6 +62,7 @@ export { default as Footer } from "./ui/footer/Footer";
 export { default as Feature } from "./ui/feature/Feature";
 export { default as Store } from "./ui/products/Store";
 export { default as Empty } from "./ui/empty/Empty";
+export { default as Form } from "./ui/form/Form";
 export { default as Cookie } from "./js/Cookie";
 export { useVariable, useAsset, useAssetType, useAssetValue, useAssets, useVariables, } from "./ui/theme/theme";
 export { FunGet } from "./js/Fun";

package/index.js

@@ -3,14 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.View = exports.ScrollInView = exports.Accordion = exports.Flex = exports.RichText = exports.Carousel = exports.Video = exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.SearchableInput = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
-exports.GoogleAnalytics = exports.FunGet = exports.useVariables = exports.useAssets = exports.useAssetValue = exports.useAssetType = exports.useAsset = exports.useVariable = exports.Cookie = exports.Empty = exports.Store = exports.Feature = exports.Footer = exports.FileUpload = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = void 0;
+exports.Accordion = exports.Flex = exports.RichText = exports.Carousel = exports.Video = exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Divider = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.SearchableInput = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Badge = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
+exports.GoogleAnalytics = exports.FunGet = exports.useVariables = exports.useAssets = exports.useAssetValue = exports.useAssetType = exports.useAsset = exports.useVariable = exports.Cookie = exports.Form = exports.Empty = exports.Store = exports.Feature = exports.Footer = exports.FileUpload = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = exports.View = exports.ScrollInView = void 0;
 var Alert_1 = require("./ui/alert/Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 var theme_1 = require("./ui/theme/theme");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return __importDefault(theme_1).default; } });
 var Button_1 = require("./ui/button/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+var Button_2 = require("./ui/button/Button");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(Button_2).default; } });
 var Card_1 = require("./ui/card/Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(Card_1).default; } });
 var BreadCrumb_1 = require("./ui/breadcrumb/BreadCrumb");
@@ -77,6 +79,8 @@ var Section_1 = require("./ui/specials/Section");
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(Section_1).default; } });
 var Hr_1 = require("./ui/specials/Hr");
 Object.defineProperty(exports, "Hr", { enumerable: true, get: function () { return __importDefault(Hr_1).default; } });
+var Hr_2 = require("./ui/specials/Hr");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return __importDefault(Hr_2).default; } });
 var Circle_1 = require("./ui/specials/Circle");
 Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return __importDefault(Circle_1).default; } });
 var CircleGroup_1 = require("./ui/specials/CircleGroup");
@@ -129,6 +133,8 @@ var Store_1 = require("./ui/products/Store");
 Object.defineProperty(exports, "Store", { enumerable: true, get: function () { return __importDefault(Store_1).default; } });
 var Empty_1 = require("./ui/empty/Empty");
 Object.defineProperty(exports, "Empty", { enumerable: true, get: function () { return __importDefault(Empty_1).default; } });
+var Form_1 = require("./ui/form/Form");
+Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return __importDefault(Form_1).default; } });
 // js 
 var Cookie_1 = require("./js/Cookie");
 Object.defineProperty(exports, "Cookie", { enumerable: true, get: function () { return __importDefault(Cookie_1).default; } });

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.8.7",
+  "version": "3.8.9",
   "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/button/Button.d.ts

@@ -3,12 +3,12 @@ interface ButtonProps {
     color?: string;
     bg?: string;
     funcss?: string;
-    startIcon?: ReactNode;
-    endIcon?: ReactNode;
+    startIcon?: ReactNode | string;
+    endIcon?: ReactNode | string;
     stringPrefix?: string;
     stringSuffix?: string;
-    prefix?: ReactNode;
-    suffix?: ReactNode;
+    prefix?: ReactNode | string;
+    suffix?: ReactNode | string;
     iconSize?: number | string;
     iconLineHeight?: string | number;
     text?: string;
@@ -37,11 +37,12 @@ interface ButtonProps {
     isLoading?: boolean;
     variant?: string;
     url?: string;
+    type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     status?: 'success' | 'warning' | 'info' | 'error';
     children?: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-export default function Button({ variant, color, bg, funcss, startIcon, endIcon, stringPrefix, stringSuffix, prefix, suffix, iconSize, iconLineHeight, text, rounded, raised, height, width, float, hoverUp, fullWidth, outlined, small, hoverless, smaller, big, bigger, jumbo, flat, hoverNone, fillAnimation, fillDirection, fillTextColor, outlineSize, isLoading, status, bold, children, style, url, onClick, disabled, ...rest }: ButtonProps): React.JSX.Element;
+export default function Button({ variant, color, bg, funcss, startIcon, endIcon, stringPrefix, stringSuffix, prefix, suffix, iconSize, iconLineHeight, text, rounded, raised, height, width, float, hoverUp, fullWidth, outlined, small, hoverless, smaller, big, bigger, jumbo, flat, hoverNone, fillAnimation, fillDirection, fillTextColor, type, outlineSize, isLoading, status, bold, children, style, url, onClick, disabled, ...rest }: ButtonProps): React.JSX.Element;
 export {};

package/ui/button/Button.js

@@ -63,10 +63,10 @@ var componentUtils_1 = require("../../utils/componentUtils");
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
 function Button(_a) {
     var _b, _c;
-    var _d = _a.variant, variant = _d === void 0 ? '' : _d, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, prefix = _a.prefix, suffix = _a.suffix, iconSize = _a.iconSize, _e = _a.iconLineHeight, iconLineHeight = _e === void 0 ? 0 : _e, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, bold = _a.bold, children = _a.children, style = _a.style, url = _a.url, onClick = _a.onClick, disabled = _a.disabled, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "stringPrefix", "stringSuffix", "prefix", "suffix", "iconSize", "iconLineHeight", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "outlineSize", "isLoading", "status", "bold", "children", "style", "url", "onClick", "disabled"]);
+    var _d = _a.variant, variant = _d === void 0 ? '' : _d, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, prefix = _a.prefix, suffix = _a.suffix, iconSize = _a.iconSize, _e = _a.iconLineHeight, iconLineHeight = _e === void 0 ? 0 : _e, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, _f = _a.type, type = _f === void 0 ? 'button' : _f, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, bold = _a.bold, children = _a.children, style = _a.style, url = _a.url, onClick = _a.onClick, disabled = _a.disabled, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "stringPrefix", "stringSuffix", "prefix", "suffix", "iconSize", "iconLineHeight", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "type", "outlineSize", "isLoading", "status", "bold", "children", "style", "url", "onClick", "disabled"]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Button', variant).mergeWithLocal;
     // Create local props object - these will override config props
-    var localProps = __assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, disabled: disabled, outlineSize: outlineSize, isLoading: isLoading, status: status, bold: bold, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, rest);
+    var localProps = __assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, disabled: disabled, outlineSize: outlineSize, isLoading: isLoading, status: status, type: type, bold: bold, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, rest);
     // Merge with config - LOCAL PROPS OVERRIDE CONFIG
     var mergedProps = mergeWithLocal(localProps).props;
     // Extract final values - local props take precedence
@@ -90,6 +90,7 @@ function Button(_a) {
         big: big !== null && big !== void 0 ? big : mergedProps.big,
         bigger: bigger !== null && bigger !== void 0 ? bigger : mergedProps.bigger,
         jumbo: jumbo !== null && jumbo !== void 0 ? jumbo : mergedProps.jumbo,
+        type: type !== null && type !== void 0 ? type : mergedProps.type,
         fillAnimation: fillAnimation !== null && fillAnimation !== void 0 ? fillAnimation : mergedProps.fillAnimation,
         fillDirection: fillDirection !== null && fillDirection !== void 0 ? fillDirection : mergedProps.fillDirection,
         fillTextColor: fillTextColor !== null && fillTextColor !== void 0 ? fillTextColor : mergedProps.fillTextColor,
@@ -98,75 +99,170 @@ function Button(_a) {
         stringPrefix: stringPrefix !== null && stringPrefix !== void 0 ? stringPrefix : mergedProps.stringPrefix,
         stringSuffix: stringSuffix !== null && stringSuffix !== void 0 ? stringSuffix : mergedProps.stringSuffix,
     };
-    var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
-    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
-    var _h = (0, react_1.useState)(false), hasValidStringPrefix = _h[0], setHasValidStringPrefix = _h[1];
-    var _j = (0, react_1.useState)(false), hasValidStringSuffix = _j[0], setHasValidStringSuffix = _j[1];
-    function isReactElement(node) {
-        return react_1.default.isValidElement(node);
-    }
-    // Handle stringPrefix - only load if we have a valid string
+    // State for dynamic icons
+    var _g = (0, react_1.useState)(null), dynamicStartIcon = _g[0], setDynamicStartIcon = _g[1];
+    var _h = (0, react_1.useState)(null), dynamicEndIcon = _h[0], setDynamicEndIcon = _h[1];
+    var _j = (0, react_1.useState)(null), dynamicPrefix = _j[0], setDynamicPrefix = _j[1];
+    var _k = (0, react_1.useState)(null), dynamicSuffix = _k[0], setDynamicSuffix = _k[1];
+    var _l = (0, react_1.useState)(null), dynamicStringPrefix = _l[0], setDynamicStringPrefix = _l[1];
+    var _m = (0, react_1.useState)(null), dynamicStringSuffix = _m[0], setDynamicStringSuffix = _m[1];
+    // Function to check if a value is a string (dynamic icon)
+    var isStringIcon = function (icon) {
+        return typeof icon === 'string' && icon.trim() !== '';
+    };
+    // Function to check if a value is a ReactNode (static icon)
+    var isReactNodeIcon = function (icon) {
+        return icon !== undefined && !isStringIcon(icon) && react_1.default.isValidElement(icon);
+    };
+    // Load dynamic icons from string props
     (0, react_1.useEffect)(function () {
-        var effectiveStringPrefix = final.stringPrefix;
-        if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
-            setPrefixNode(null);
-            setHasValidStringPrefix(false);
-            return;
-        }
-        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) {
-            if (node) {
-                setPrefixNode(node);
-                setHasValidStringPrefix(true);
-            }
-            else {
-                setPrefixNode(null);
-                setHasValidStringPrefix(false);
-            }
-        });
-    }, [final.stringPrefix]);
-    // Handle stringSuffix - only load if we have a valid string
+        // Handle startIcon if it's a string
+        if (isStringIcon(startIcon)) {
+            (0, getDynamicIcon_1.getDynamicIcon)(startIcon).then(function (node) {
+                if (node) {
+                    setDynamicStartIcon(node);
+                }
+                else {
+                    setDynamicStartIcon(null);
+                }
+            });
+        }
+        else {
+            setDynamicStartIcon(null);
+        }
+        // Handle endIcon if it's a string
+        if (isStringIcon(endIcon)) {
+            (0, getDynamicIcon_1.getDynamicIcon)(endIcon).then(function (node) {
+                if (node) {
+                    setDynamicEndIcon(node);
+                }
+                else {
+                    setDynamicEndIcon(null);
+                }
+            });
+        }
+        else {
+            setDynamicEndIcon(null);
+        }
+        // Handle prefix if it's a string
+        if (isStringIcon(prefix)) {
+            (0, getDynamicIcon_1.getDynamicIcon)(prefix).then(function (node) {
+                if (node) {
+                    setDynamicPrefix(node);
+                }
+                else {
+                    setDynamicPrefix(null);
+                }
+            });
+        }
+        else {
+            setDynamicPrefix(null);
+        }
+        // Handle suffix if it's a string
+        if (isStringIcon(suffix)) {
+            (0, getDynamicIcon_1.getDynamicIcon)(suffix).then(function (node) {
+                if (node) {
+                    setDynamicSuffix(node);
+                }
+                else {
+                    setDynamicSuffix(null);
+                }
+            });
+        }
+        else {
+            setDynamicSuffix(null);
+        }
+    }, [startIcon, endIcon, prefix, suffix]);
+    // Load dynamic icons from stringPrefix and stringSuffix (backward compatibility)
     (0, react_1.useEffect)(function () {
-        var effectiveStringSuffix = final.stringSuffix;
-        if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
-            setSuffixNode(null);
-            setHasValidStringSuffix(false);
-            return;
-        }
-        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) {
-            if (node) {
-                setSuffixNode(node);
-                setHasValidStringSuffix(true);
-            }
-            else {
-                setSuffixNode(null);
-                setHasValidStringSuffix(false);
+        if (final.stringPrefix && final.stringPrefix.trim() !== '') {
+            (0, getDynamicIcon_1.getDynamicIcon)(final.stringPrefix).then(function (node) {
+                if (node) {
+                    setDynamicStringPrefix(node);
+                }
+                else {
+                    setDynamicStringPrefix(null);
+                }
+            });
+        }
+        else {
+            setDynamicStringPrefix(null);
+        }
+        if (final.stringSuffix && final.stringSuffix.trim() !== '') {
+            (0, getDynamicIcon_1.getDynamicIcon)(final.stringSuffix).then(function (node) {
+                if (node) {
+                    setDynamicStringSuffix(node);
+                }
+                else {
+                    setDynamicStringSuffix(null);
+                }
+            });
+        }
+        else {
+            setDynamicStringSuffix(null);
+        }
+    }, [final.stringPrefix, final.stringSuffix]);
+    // Determine which start icon to show with proper priority
+    var actualStartIcon = (0, react_1.useMemo)(function () {
+        if (final.status) {
+            // Status icons have highest priority for start position
+            switch (final.status) {
+                case 'success':
+                    return react_1.default.createElement(pi_1.PiCheck, { size: iconSize });
+                case 'info':
+                    return react_1.default.createElement(pi_1.PiInfo, { size: iconSize });
+                case 'warning':
+                    return react_1.default.createElement(pi_1.PiWarning, { size: iconSize });
+                case 'error':
+                    return react_1.default.createElement(pi_1.PiX, { size: iconSize });
+                default:
+                    return null;
             }
-        });
-    }, [final.stringSuffix]);
-    // Determine which prefix to show with proper priority
-    var showPrefix = react_1.default.useMemo(function () {
-        // Priority order: status > startIcon (local) > prefix (local) > stringPrefix (dynamic)
-        if (final.status)
-            return true;
-        if (startIcon)
-            return true;
-        if (prefix)
-            return true;
-        if (hasValidStringPrefix && prefixNode)
-            return true;
-        return false;
-    }, [final.status, startIcon, prefix, hasValidStringPrefix, prefixNode]);
-    // Determine which suffix to show with proper priority
-    var showSuffix = react_1.default.useMemo(function () {
-        // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
-        if (endIcon)
-            return true;
-        if (suffix)
-            return true;
-        if (hasValidStringSuffix && suffixNode)
-            return true;
-        return false;
-    }, [endIcon, suffix, hasValidStringSuffix, suffixNode]);
+        }
+        if (isStringIcon(startIcon)) {
+            return dynamicStartIcon;
+        }
+        if (isReactNodeIcon(startIcon)) {
+            return startIcon;
+        }
+        if (isStringIcon(prefix)) {
+            return dynamicPrefix;
+        }
+        if (isReactNodeIcon(prefix)) {
+            return prefix;
+        }
+        if (dynamicStringPrefix) {
+            return dynamicStringPrefix;
+        }
+        return null;
+    }, [
+        final.status,
+        startIcon,
+        prefix,
+        dynamicStartIcon,
+        dynamicPrefix,
+        dynamicStringPrefix,
+        iconSize,
+    ]);
+    // Determine which end icon to show with proper priority
+    var actualEndIcon = (0, react_1.useMemo)(function () {
+        if (isStringIcon(endIcon)) {
+            return dynamicEndIcon;
+        }
+        if (isReactNodeIcon(endIcon)) {
+            return endIcon;
+        }
+        if (isStringIcon(suffix)) {
+            return dynamicSuffix;
+        }
+        if (isReactNodeIcon(suffix)) {
+            return suffix;
+        }
+        if (dynamicStringSuffix) {
+            return dynamicStringSuffix;
+        }
+        return null;
+    }, [endIcon, suffix, dynamicEndIcon, dynamicSuffix, dynamicStringSuffix]);
     var textColorClass = final.bg
         ? final.color
             ? final.color
@@ -207,27 +303,37 @@ function Button(_a) {
     };
     // Helper function to render icon with proper size
     var renderIcon = function (icon, className) {
+        var _a;
         if (className === void 0) { className = ''; }
         if (!icon)
             return null;
-        return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, isReactElement(icon) ? react_1.default.cloneElement(icon, { size: iconSize }) : icon));
+        // If it's a React element that we know accepts size prop
+        if (react_1.default.isValidElement(icon)) {
+            // Create a wrapper span and clone the icon with size prop if needed
+            var iconProps = {};
+            // Only add size prop if iconSize is provided and not already set
+            if (iconSize && !((_a = icon.props) === null || _a === void 0 ? void 0 : _a.size)) {
+                iconProps.size = iconSize;
+            }
+            // Only clone with props if we have props to add
+            if (Object.keys(iconProps).length > 0) {
+                return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, react_1.default.cloneElement(icon, iconProps)));
+            }
+            else {
+                // Otherwise just render the icon in a span
+                return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, icon));
+            }
+        }
+        // If it's not a valid React element, just render it as is
+        return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, icon));
     };
+    // Determine if we should show icons on left or right
+    var hasStartIcon = Boolean(actualStartIcon);
+    var hasEndIcon = Boolean(actualEndIcon);
     return (react_1.default.createElement("span", null,
-        react_1.default.createElement("button", __assign({ disabled: disabled || final.isLoading || false, className: "".concat(classNames, " ").concat((showPrefix || showSuffix || final.isLoading) ? 'iconic' : ''), style: __assign({ height: (_b = height !== null && height !== void 0 ? height : mergedProps.height) !== null && _b !== void 0 ? _b : '', width: final.fullWidth ? '100%' : (_c = width !== null && width !== void 0 ? width : mergedProps.width) !== null && _c !== void 0 ? _c : '', borderRadius: final.flat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return (window.location.href = url); } : undefined) }, mergedProps),
-            final.isLoading ? (renderIcon(react_1.default.createElement(pi_1.PiSpinner, { className: "rotate" }), 'btn_left_icon')) : (react_1.default.createElement(react_1.default.Fragment, null,
-                final.status && (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle },
-                    final.status === 'success' && react_1.default.createElement(pi_1.PiCheck, { size: iconSize }),
-                    final.status === 'info' && react_1.default.createElement(pi_1.PiInfo, { size: iconSize }),
-                    final.status === 'warning' && react_1.default.createElement(pi_1.PiWarning, { size: iconSize }),
-                    final.status === 'error' && react_1.default.createElement(pi_1.PiX, { size: iconSize }))),
-                !final.status && showPrefix && (react_1.default.createElement(react_1.default.Fragment, null,
-                    startIcon && renderIcon(startIcon, 'btn_left_icon'),
-                    !startIcon && prefix && renderIcon(prefix, 'btn_left_icon'),
-                    !startIcon && !prefix && hasValidStringPrefix && renderIcon(prefixNode, 'btn_left_icon'))))),
+        react_1.default.createElement("button", __assign({ type: final.type || 'button', disabled: disabled || final.isLoading || false, className: "".concat(classNames, " ").concat((hasStartIcon || hasEndIcon || final.isLoading) ? 'iconic' : ''), style: __assign({ height: (_b = height !== null && height !== void 0 ? height : mergedProps.height) !== null && _b !== void 0 ? _b : '', width: final.fullWidth ? '100%' : (_c = width !== null && width !== void 0 ? width : mergedProps.width) !== null && _c !== void 0 ? _c : '', borderRadius: final.flat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return (window.location.href = url); } : undefined) }, mergedProps),
+            final.isLoading ? (renderIcon(react_1.default.createElement(pi_1.PiSpinner, { className: "rotate" }), 'btn_left_icon')) : (react_1.default.createElement(react_1.default.Fragment, null, hasStartIcon && renderIcon(actualStartIcon, 'btn_left_icon'))),
             final.fillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(effectiveBg) }),
             children ? children : final.text ? final.text : "",
-            showSuffix && (react_1.default.createElement(react_1.default.Fragment, null,
-                endIcon && renderIcon(endIcon, 'btn_right_icon'),
-                !endIcon && suffix && renderIcon(suffix, 'btn_right_icon'),
-                !endIcon && !suffix && hasValidStringSuffix && renderIcon(suffixNode, 'btn_right_icon'))))));
+            hasEndIcon && !final.isLoading && renderIcon(actualEndIcon, 'btn_right_icon'))));
 }

package/ui/div/Div.d.ts

@@ -12,10 +12,12 @@ type DivProps = {
     padding?: string;
     margin?: string;
     id?: string;
+    className?: string;
+    style?: React.CSSProperties;
     fit?: boolean;
     ref?: React.Ref<HTMLDivElement>;
     customStyle?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 };
-declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, margin, id, fit, ref, customStyle, ...rest }: DivProps) => React.JSX.Element;
+declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, className, style, margin, id, fit, ref, customStyle, ...rest }: DivProps) => React.JSX.Element;
 export default Div;

package/ui/div/Div.js

@@ -58,8 +58,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var Div = function (_a) {
-    var children = _a.children, funcss = _a.funcss, content = _a.content, minHeight = _a.minHeight, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, minWidth = _a.minWidth, height = _a.height, width = _a.width, padding = _a.padding, margin = _a.margin, id = _a.id, fit = _a.fit, ref = _a.ref, customStyle = _a.customStyle, rest = __rest(_a, ["children", "funcss", "content", "minHeight", "maxHeight", "maxWidth", "minWidth", "height", "width", "padding", "margin", "id", "fit", "ref", "customStyle"]);
+    var children = _a.children, funcss = _a.funcss, content = _a.content, minHeight = _a.minHeight, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, minWidth = _a.minWidth, height = _a.height, width = _a.width, padding = _a.padding, className = _a.className, style = _a.style, margin = _a.margin, id = _a.id, fit = _a.fit, ref = _a.ref, customStyle = _a.customStyle, rest = __rest(_a, ["children", "funcss", "content", "minHeight", "maxHeight", "maxWidth", "minWidth", "height", "width", "padding", "className", "style", "margin", "id", "fit", "ref", "customStyle"]);
     return (React.createElement("div", null,
-        React.createElement("div", __assign({ ref: ref, className: "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss), style: __assign({ height: height || '', maxHeight: maxHeight || '', minHeight: minHeight || '', maxWidth: maxWidth || '', minWidth: minWidth || '', width: width || '', padding: padding || '', margin: margin || '' }, customStyle), id: id }, rest), content || children)));
+        React.createElement("div", __assign({ ref: ref, className: "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss, " ").concat(className || ''), style: __assign(__assign({ height: height || '', maxHeight: maxHeight || '', minHeight: minHeight || '', maxWidth: maxWidth || '', minWidth: minWidth || '', width: width || '', padding: padding || '', margin: margin || '' }, style), customStyle), id: id }, rest), content || children)));
 };
 exports.default = Div;

package/ui/feature/Feature.d.ts

@@ -9,13 +9,11 @@ type FeatureItem = {
     titleWeight?: number;
     titleColor?: string;
     titleClassName?: string;
-    titleVariant?: string;
     description?: React.ReactNode;
     descriptionSize?: string;
     descriptionWeight?: number;
     descriptionColor?: string;
     descriptionClassName?: string;
-    descriptionVariant?: string;
     imageUrl?: string;
     imageAlt?: string;
     imageClassName?: string;
@@ -23,18 +21,9 @@ type FeatureItem = {
     content?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-    cardBg?: string;
-    cardPadding?: string;
-    cardRounded?: string;
-    cardShadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
-    cardBorder?: boolean;
-    cardBorderColor?: string;
-    cardHoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
     ctaText?: string;
     ctaUrl?: string;
-    ctaVariant?: 'primary' | 'secondary' | 'accent' | 'text' | 'outline';
     ctaOnClick?: () => void;
-    ctaCss?: string;
     ctaClassName?: string;
     customRender?: () => React.ReactNode;
 };
@@ -47,33 +36,23 @@ type FeatureProps = {
     titleColor?: string;
     titleClassName?: string;
     titleAlign?: 'left' | 'center' | 'right';
-    titleVariant?: string;
     subtitle?: React.ReactNode;
     subtitleSize?: string;
     subtitleWeight?: number;
     subtitleColor?: string;
     subtitleClassName?: string;
-    subtitleVariant?: string;
     description?: React.ReactNode;
     descriptionSize?: string;
     descriptionWeight?: number;
     descriptionColor?: string;
     descriptionClassName?: string;
-    descriptionVariant?: string;
     features?: FeatureItem[] | string;
-    columns?: number;
-    gap?: string;
-    itemGap?: string;
+    gap?: number;
+    itemMaxWidth?: string;
     align?: 'start' | 'center' | 'end' | 'stretch';
     justify?: 'start' | 'center' | 'end' | 'between' | 'around';
     wrap?: boolean;
-    bg?: string;
-    padding?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    containerClassName?: string;
-    containerStyle?: React.CSSProperties;
-    cardBg?: string;
+    card?: boolean;
     cardPadding?: string;
     cardRounded?: string;
     cardShadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
@@ -81,27 +60,28 @@ type FeatureProps = {
     cardBorderColor?: string;
     cardHoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
     cardClassName?: string;
+    padding?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    containerClassName?: string;
+    containerStyle?: React.CSSProperties;
     iconColor?: string;
     iconSize?: number;
     iconClassName?: string;
     itemTitleSize?: string;
     itemTitleWeight?: number;
     itemTitleColor?: string;
-    itemTitleVariant?: string;
     itemDescriptionSize?: string;
     itemDescriptionWeight?: number;
     itemDescriptionColor?: string;
-    itemDescriptionVariant?: string;
     checkmarkIcon?: string;
     checkmarkColor?: string;
     checkmarkSize?: number;
     checkmarkClassName?: string;
     ctaText?: string;
     ctaUrl?: string;
-    ctaVariant?: 'primary' | 'secondary' | 'accent' | 'text' | 'outline';
     ctaOnClick?: () => void;
     ctaClassName?: string;
-    ctaCss?: string;
     ctaAlign?: 'left' | 'center' | 'right';
     ctaStringPrefix?: string;
     ctaStringSuffix?: string;
@@ -110,21 +90,12 @@ type FeatureProps = {
     ctaIconSize?: number;
     ctaIsLoading?: boolean;
     ctaStatus?: 'success' | 'warning' | 'info' | 'error';
-    pattern?: 'grid' | 'dots' | 'diagonal' | 'none';
-    patternOpacity?: number;
-    patternColor?: string;
-    patternSize?: string;
-    fade?: boolean;
-    fadeColor?: string;
-    fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
-    fadeRadial?: boolean;
-    hoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
+    ctaBg?: string;
     children?: React.ReactNode;
     id?: string;
     funcss?: string;
     sectionClass?: string;
     maxWidth?: string;
-    responsiveColumns?: string;
 };
 declare const Feature: React.FC<FeatureProps>;
 export default Feature;