funuicss 3.8.7 → 3.8.9

package/ui/feature/Feature.js

@@ -121,12 +121,25 @@ var FeatureIcon = function (_a) {
     }
     return null;
 };
+// Helper function to convert shorthand flex values to proper CSS values
+var convertFlexValue = function (value) {
+    if (!value)
+        return undefined;
+    var flexMap = {
+        'start': 'flex-start',
+        'end': 'flex-end',
+        'center': 'center',
+        'between': 'space-between',
+        'around': 'space-around',
+        'stretch': 'stretch',
+    };
+    return flexMap[value] || value;
+};
 var Feature = function (localProps) {
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Feature', localProps.variant).mergeWithLocal;
     var mergedProps = mergeWithLocal(localProps).props;
     var final = mergedProps;
     var _a = (0, react_1.useState)([]), featuresArray = _a[0], setFeaturesArray = _a[1];
-    var _b = (0, react_1.useState)({}), responsiveColumns = _b[0], setResponsiveColumns = _b[1];
     // Parse features
     (0, react_1.useEffect)(function () {
         if (typeof final.features === 'string') {
@@ -146,21 +159,6 @@ var Feature = function (localProps) {
             setFeaturesArray([]);
         }
     }, [final.features]);
-    // Parse responsive columns
-    (0, react_1.useEffect)(function () {
-        if (final.responsiveColumns) {
-            try {
-                var parsed = JSON.parse(final.responsiveColumns);
-                if (parsed && typeof parsed === 'object') {
-                    setResponsiveColumns(parsed);
-                }
-            }
-            catch (error) {
-                console.error('Error parsing responsive columns:', error);
-                setResponsiveColumns({});
-            }
-        }
-    }, [final.responsiveColumns]);
     var getSpacingValue = function (value, defaultValue) {
         if (defaultValue === void 0) { defaultValue = '0'; }
         if (!value)
@@ -170,33 +168,20 @@ var Feature = function (localProps) {
         }
         return value;
     };
-    var getButtonVariantClass = function (variant) {
-        if (!variant)
-            return '';
-        var variantClasses = {
-            'primary': 'btn-primary',
-            'secondary': 'btn-secondary',
-            'accent': 'btn-accent',
-            'text': 'btn-text',
-            'outline': 'btn-outline',
-        };
-        return variantClasses[variant] || "btn-".concat(variant);
-    };
     var renderItemCTA = function (item) {
         if (!item.ctaText)
             return null;
-        var ctaVariant = item.ctaVariant || 'text';
-        var ctaClassName = item.ctaClassName || '';
-        var ctaCss = item.ctaCss || '';
-        var buttonClass = getButtonVariantClass(ctaVariant);
-        return (react_1.default.createElement("a", { href: item.ctaUrl, onClick: item.ctaOnClick, className: "btn ".concat(buttonClass, " ").concat(ctaClassName, " ").concat(ctaCss, " feature-section__item-cta text-sm"), style: {
+        return (react_1.default.createElement("a", { href: item.ctaUrl, onClick: item.ctaOnClick, className: "feature-section__item-cta ".concat(item.ctaClassName || ''), style: {
                 marginTop: '1rem',
                 display: 'inline-block',
                 textDecoration: 'none',
+                color: 'var(--primary)',
+                fontWeight: 500,
+                fontSize: '0.875rem',
             } }, item.ctaText));
     };
     var renderFeatureItem = function (item, index) {
-        var _a, _b;
+        var _a;
         if (item.customRender) {
             return item.customRender();
         }
@@ -207,138 +192,64 @@ var Feature = function (localProps) {
         var checkmarkColor = final.checkmarkColor || 'success';
         var checkmarkSize = final.checkmarkSize || 20;
         var checkmarkClassName = final.checkmarkClassName || '';
-        var cardBg = item.cardBg || final.cardBg;
-        var cardPadding = item.cardPadding || final.cardPadding || '1.5rem';
-        var cardRounded = item.cardRounded || final.cardRounded || '0.5rem';
-        var cardShadow = item.cardShadow || final.cardShadow || 'md';
-        var cardBorder = (_b = (_a = item.cardBorder) !== null && _a !== void 0 ? _a : final.cardBorder) !== null && _b !== void 0 ? _b : true;
-        var cardBorderColor = item.cardBorderColor || final.cardBorderColor || 'var(--borderRgb)';
-        var cardHoverEffect = item.cardHoverEffect || final.cardHoverEffect || 'none';
+        var cardPadding = final.cardPadding || '1.5rem';
+        var cardRounded = final.cardRounded || '0.5rem';
+        var cardShadow = final.cardShadow || 'md';
+        var cardBorder = (_a = final.cardBorder) !== null && _a !== void 0 ? _a : true;
+        var cardBorderColor = final.cardBorderColor || 'var(--borderRgb)';
+        var cardHoverEffect = final.cardHoverEffect || 'none';
         var titleSize = item.titleSize || final.itemTitleSize || '1.125rem';
         var titleWeight = item.titleWeight || final.itemTitleWeight || 600;
         var titleColor = item.titleColor || final.itemTitleColor || 'var(--text-color)';
         var titleClassName = item.titleClassName || '';
-        var titleVariant = item.titleVariant || final.itemTitleVariant; // Updated
         var descriptionSize = item.descriptionSize || final.itemDescriptionSize || '0.875rem';
         var descriptionWeight = item.descriptionWeight || final.itemDescriptionWeight || 400;
         var descriptionColor = item.descriptionColor || final.itemDescriptionColor || 'var(--text-muted)';
         var descriptionClassName = item.descriptionClassName || '';
-        var descriptionVariant = item.descriptionVariant || final.itemDescriptionVariant; // Updated
-        var isGridLayout = final.layout === 'grid';
         var featureContent = (react_1.default.createElement("div", { className: "feature-section__item ".concat(item.className || ''), style: item.style },
-            (item.icon || item.imageUrl || final.layout === 'checklist') && (react_1.default.createElement("div", { className: "feature-section__icon-container", style: { marginBottom: '1rem' } }, item.imageUrl ? (react_1.default.createElement("img", { src: item.imageUrl, alt: item.imageAlt || '', className: "feature-section__image ".concat(item.imageClassName || final.imageClassName || ''), style: __assign(__assign({ width: "".concat(iconSize, "px"), height: "".concat(iconSize, "px"), objectFit: 'cover', borderRadius: '50%' }, item.imageStyle), final.imageStyle) })) : (react_1.default.createElement("div", { className: "feature-section__icon-wrapper" },
+            (item.icon || item.imageUrl || final.layout === 'checklist') && (react_1.default.createElement("div", { className: "feature-section__icon-container", style: { marginBottom: '1rem' } }, item.imageUrl ? (react_1.default.createElement("img", { src: item.imageUrl, alt: item.imageAlt || '', className: "feature-section__image ".concat(item.imageClassName || ''), style: __assign({ width: "".concat(iconSize, "px"), height: "".concat(iconSize, "px"), objectFit: 'cover', borderRadius: '50%' }, item.imageStyle) })) : (react_1.default.createElement("div", { className: "feature-section__icon-wrapper" },
                 react_1.default.createElement(FeatureIcon, { icon: item.icon, iconColor: iconColor, iconSize: iconSize, iconClassName: iconClassName, layout: final.layout, checklistIcon: checkmarkIcon, checklistColor: checkmarkColor, checklistSize: checkmarkSize, checklistClassName: checkmarkClassName }))))),
-            item.title && (react_1.default.createElement(Text_1.default, { variant: titleVariant, block: true, size: titleSize, weight: titleWeight, color: titleColor, funcss: "feature-section__title ".concat(titleClassName), style: { marginBottom: '0.75rem' } }, item.title)),
-            item.description && (react_1.default.createElement(Text_1.default, { variant: descriptionVariant, block: true, size: descriptionSize, weight: descriptionWeight, color: descriptionColor, funcss: "feature-section__description ".concat(descriptionClassName) }, item.description)),
+            item.title && (react_1.default.createElement(Text_1.default, { block: true, size: titleSize, weight: titleWeight, color: titleColor, funcss: "feature-section__title ".concat(titleClassName), style: { marginBottom: '0.75rem' } }, item.title)),
+            item.description && (react_1.default.createElement(Text_1.default, { block: true, size: descriptionSize, weight: descriptionWeight, color: descriptionColor, funcss: "feature-section__description ".concat(descriptionClassName) }, item.description)),
             item.content && (react_1.default.createElement("div", { className: "feature-section__additional-content", style: { marginTop: '1rem' } }, item.content)),
             renderItemCTA(item)));
-        // For grid layout with cards
-        if (isGridLayout && cardBg) {
+        // Apply card styling if card prop is true
+        if (final.card) {
             var cardClasses = [
                 'feature-section__card',
-                cardHoverEffect !== 'none' ? "feature-section__card--hover-".concat(cardHoverEffect) : '',
+                'card',
+                cardHoverEffect !== 'none' ? "card--hover-".concat(cardHoverEffect) : '',
                 item.className || '',
+                final.cardClassName || '',
             ].filter(Boolean).join(' ');
-            var cardStyles = __assign({ padding: getSpacingValue(cardPadding, '1.5rem'), borderRadius: cardRounded, backgroundColor: cardBg ? (0, getCssVariable_1.getCssVariableValue)(cardBg) || cardBg : undefined, boxShadow: cardShadow !== 'none' ? (0, getCssVariable_1.getCssVariableValue)("shadow-".concat(cardShadow)) || undefined : undefined, border: cardBorder ? "1px solid ".concat((0, getCssVariable_1.getCssVariableValue)(cardBorderColor) || cardBorderColor) : 'none', height: '100%' }, item.style);
+            var cardStyles = __assign({ padding: getSpacingValue(cardPadding, '1.5rem'), borderRadius: cardRounded, boxShadow: cardShadow !== 'none' ? (0, getCssVariable_1.getCssVariableValue)("shadow-".concat(cardShadow)) || undefined : undefined, border: cardBorder ? "1px solid ".concat((0, getCssVariable_1.getCssVariableValue)(cardBorderColor) || cardBorderColor) : 'none', height: '100%', maxWidth: final.itemMaxWidth || '100%' }, item.style);
             return (react_1.default.createElement("div", { key: index, className: cardClasses, style: cardStyles }, featureContent));
         }
-        return featureContent;
-    };
-    var getResponsiveGridColumns = function () {
-        var defaultColumns = final.columns || 3;
-        if (Object.keys(responsiveColumns).length === 0) {
-            return "repeat(".concat(defaultColumns, ", 1fr)");
-        }
-        return {
-            base: "repeat(".concat(responsiveColumns.sm || defaultColumns, ", 1fr)"),
-            sm: "repeat(".concat(responsiveColumns.sm || defaultColumns, ", 1fr)"),
-            md: "repeat(".concat(responsiveColumns.md || responsiveColumns.sm || defaultColumns, ", 1fr)"),
-            lg: "repeat(".concat(responsiveColumns.lg || responsiveColumns.md || responsiveColumns.sm || defaultColumns, ", 1fr)"),
-            xl: "repeat(".concat(responsiveColumns.xl || responsiveColumns.lg || responsiveColumns.md || responsiveColumns.sm || defaultColumns, ", 1fr)"),
-        };
-    };
-    var getGridStyles = function () {
-        var gap = getSpacingValue(final.gap, '2rem');
-        var itemGap = getSpacingValue(final.itemGap, '1rem');
-        var baseStyle = {
-            display: 'grid',
-            gap: gap,
-            alignItems: final.align || 'stretch',
-            justifyContent: final.justify || 'start',
-        };
-        var columns = getResponsiveGridColumns();
-        if (typeof columns === 'string') {
-            return __assign(__assign({}, baseStyle), { gridTemplateColumns: columns });
-        }
-        return baseStyle;
-    };
-    var getPatternStyle = function () {
-        if (!final.pattern || final.pattern === 'none')
-            return {};
-        var opacity = final.patternOpacity || 0.05;
-        var color = final.patternColor || 'borderRgb';
-        var size = final.patternSize || '20px';
-        var colorValue = (0, getCssVariable_1.getCssVariableValue)(color) || 'rgba(var(--borderRgb), 0.1)';
-        var backgroundImage = '';
-        var backgroundSize = size;
-        switch (final.pattern) {
-            case 'grid':
-                backgroundImage = "linear-gradient(to right, ".concat(colorValue, " ").concat(opacity, " 1px, transparent 1px),\n                          linear-gradient(to bottom, ").concat(colorValue, " ").concat(opacity, " 1px, transparent 1px)");
-                backgroundSize = "".concat(size, " ").concat(size);
-                break;
-            case 'dots':
-                backgroundImage = "radial-gradient(".concat(colorValue, " ").concat(opacity, " 1px, transparent 1px)");
-                backgroundSize = "".concat(size, " ").concat(size);
-                break;
-            case 'diagonal':
-                backgroundImage = "repeating-linear-gradient(45deg, ".concat(colorValue, " ").concat(opacity, ", ").concat(colorValue, " ").concat(opacity, " 1px, transparent 1px, transparent 20px)");
-                backgroundSize = "".concat(size, " ").concat(size);
-                break;
-        }
-        return {
-            backgroundImage: backgroundImage,
-            backgroundSize: backgroundSize,
-        };
-    };
-    var getFadeStyle = function () {
-        if (!final.fade)
-            return {};
-        var color = final.fadeColor || 'page-bg';
-        var fadeColor = (0, getCssVariable_1.getCssVariableValue)(color) || color;
-        if (final.fadeRadial) {
-            return {
-                background: "radial-gradient(ellipse at center, transparent 30%, ".concat(fadeColor, " 70%)"),
-            };
-        }
-        var direction = final.fadeDirection || 'bottom';
-        var gradients = {
-            top: 'to top',
-            bottom: 'to bottom',
-            left: 'to left',
-            right: 'to right',
-        };
-        return {
-            background: "linear-gradient(".concat(gradients[direction], ", transparent 0%, ").concat(fadeColor, " 90%)"),
-        };
-    };
-    var getTextAlign = function (align) {
-        return {
-            textAlign: align || 'center',
-        };
+        // Regular item without card
+        return (react_1.default.createElement("div", { key: index, className: "feature-section__item-wrapper ".concat(item.className || ''), style: __assign({ maxWidth: final.itemMaxWidth || '100%' }, item.style) }, featureContent));
     };
     var renderFeaturesContent = function () {
         if (featuresArray.length === 0)
             return null;
-        var gridStyles = getGridStyles();
-        var isCentered = final.layout === 'centered';
-        var maxWidth = final.maxWidth || (isCentered ? '48rem' : '100%');
-        if (isCentered) {
+        var gapValue = final.gap !== undefined ? "".concat(final.gap * 0.25, "rem") : '2rem';
+        var flexGap = gapValue;
+        if (final.layout === 'centered') {
+            var maxWidth = final.maxWidth || '48rem';
             return (react_1.default.createElement("div", { className: "feature-section__centered-container", style: {
                     maxWidth: maxWidth,
                     margin: '0 auto',
                 } }, featuresArray.map(function (item, index) { return renderFeatureItem(item, index); })));
         }
-        return (react_1.default.createElement("div", { className: "feature-section__grid", style: __assign(__assign({}, gridStyles), { maxWidth: final.maxWidth || '100%', margin: '0 auto' }) }, featuresArray.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "feature-section__grid-item" }, renderFeatureItem(item, index))); })));
+        // Use Flex layout with proper flexbox values
+        return (react_1.default.createElement("div", { className: "feature-section__flex-container", style: {
+                display: 'flex',
+                flexWrap: final.wrap !== false ? 'wrap' : 'nowrap',
+                gap: flexGap,
+                alignItems: convertFlexValue(final.align) || 'stretch',
+                justifyContent: convertFlexValue(final.justify) || 'flex-start',
+                maxWidth: final.maxWidth || '100%',
+                margin: '0 auto',
+            } }, featuresArray.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "feature-section__flex-item" }, renderFeatureItem(item, index))); })));
     };
     var getLayoutClasses = function () {
         var classes = ['feature-section'];
@@ -358,23 +269,27 @@ var Feature = function (localProps) {
     };
     var getContainerStyles = function () {
         var padding = getSpacingValue(final.padding, '3rem 0');
-        return __assign(__assign({ position: 'relative', padding: padding, backgroundColor: final.bg ? (0, getCssVariable_1.getCssVariableValue)(final.bg) || final.bg : undefined, overflow: 'hidden' }, getPatternStyle()), final.style);
+        return __assign({ padding: padding }, final.style);
+    };
+    var getTextAlign = function (align) {
+        return {
+            textAlign: align || 'center',
+        };
     };
     return (react_1.default.createElement("section", { id: final.id, className: getLayoutClasses(), style: getContainerStyles() },
-        final.fade && (react_1.default.createElement("div", { className: "feature-section__fade-overlay", style: __assign(__assign({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%' }, getFadeStyle()), { zIndex: 0, pointerEvents: 'none' }) })),
-        react_1.default.createElement("div", { className: "feature-section__container ".concat(final.containerClassName || ''), style: __assign({ position: 'relative', zIndex: 1, maxWidth: final.maxWidth || '1280px', margin: '0 auto', padding: '0 1rem' }, final.containerStyle) },
+        react_1.default.createElement("div", { className: "feature-section__container ".concat(final.containerClassName || ''), style: __assign({ maxWidth: final.maxWidth || '1280px', margin: '0 auto', padding: '0 1rem' }, final.containerStyle) },
             (final.title || final.subtitle || final.description) && (react_1.default.createElement("div", { className: "feature-section__header", style: __assign({ marginBottom: '3rem', maxWidth: final.layout === 'centered' ? '48rem' : '100%', marginLeft: 'auto', marginRight: 'auto' }, getTextAlign(final.titleAlign)) },
-                final.subtitle && (react_1.default.createElement(Text_1.default, { variant: final.subtitleVariant, block: true, size: final.subtitleSize || 'sm', weight: final.subtitleWeight || 600, color: final.subtitleColor || 'var(--primary)', funcss: "feature-section__subtitle ".concat(final.subtitleClassName || ''), style: {
+                final.subtitle && (react_1.default.createElement(Text_1.default, { block: true, size: final.subtitleSize || 'sm', weight: final.subtitleWeight || 600, color: final.subtitleColor || 'var(--primary)', funcss: "feature-section__subtitle ".concat(final.subtitleClassName || ''), style: {
                         textTransform: 'uppercase',
                         letterSpacing: '0.05em',
                         marginBottom: '0.5rem',
-                    }, text: final.subtitle })),
-                final.title && (react_1.default.createElement(Text_1.default, { variant: final.titleVariant, block: true, size: final.titleSize || 'xl', weight: final.titleWeight || 700, color: final.titleColor || 'var(--text-color)', funcss: "feature-section__main-title ".concat(final.titleClassName || ''), style: { marginBottom: '1rem' }, text: final.title })),
-                final.description && (react_1.default.createElement(Text_1.default, { variant: final.descriptionVariant, block: true, size: final.descriptionSize || 'sm', weight: final.descriptionWeight || 400, color: final.descriptionColor || 'var(--text-muted)', funcss: "feature-section__section-description ".concat(final.descriptionClassName || ''), text: final.description })))),
+                    } }, final.subtitle)),
+                final.title && (react_1.default.createElement(Text_1.default, { block: true, size: final.titleSize || 'xl', weight: final.titleWeight || 700, color: final.titleColor || 'var(--text-color)', funcss: "feature-section__main-title ".concat(final.titleClassName || ''), style: { marginBottom: '1rem' } }, final.title)),
+                final.description && (react_1.default.createElement(Text_1.default, { block: true, size: final.descriptionSize || 'sm', weight: final.descriptionWeight || 400, color: final.descriptionColor || 'var(--text-muted)', funcss: "feature-section__section-description ".concat(final.descriptionClassName || '') }, final.description)))),
             react_1.default.createElement("div", { className: "feature-section__content" },
                 renderFeaturesContent(),
                 final.children),
             final.ctaText && (react_1.default.createElement("div", { className: "feature-section__cta-container", style: __assign({ marginTop: '2.5rem' }, getTextAlign(final.ctaAlign)) },
-                react_1.default.createElement(Button_1.default, { variant: final.ctaVariant, onClick: final.ctaOnClick || (function () { return final.ctaUrl && (window.location.href = final.ctaUrl); }), funcss: "feature-section__cta ".concat(final.ctaClassName || '', " ").concat(final.ctaCss || ''), stringPrefix: final.ctaStringPrefix, stringSuffix: final.ctaStringSuffix, startIcon: final.ctaStartIcon, endIcon: final.ctaEndIcon, iconSize: final.ctaIconSize, isLoading: final.ctaIsLoading, status: final.ctaStatus, url: final.ctaUrl }, final.ctaText))))));
+                react_1.default.createElement(Button_1.default, { onClick: final.ctaOnClick || (function () { return final.ctaUrl && (window.location.href = final.ctaUrl); }), funcss: "feature-section__cta ".concat(final.ctaClassName || ''), stringPrefix: final.ctaStringPrefix, stringSuffix: final.ctaStringSuffix, startIcon: final.ctaStartIcon, endIcon: final.ctaEndIcon, iconSize: final.ctaIconSize, bg: final.ctaBg || 'primary', isLoading: final.ctaIsLoading, status: final.ctaStatus, url: final.ctaUrl }, final.ctaText))))));
 };
 exports.default = Feature;

package/ui/flex/Flex.d.ts

@@ -5,21 +5,22 @@ interface FlexProps {
     id?: string;
     children?: React.ReactNode;
     style?: React.CSSProperties;
-    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-    wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
-    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';
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse' | 'col';
+    wrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | 'no-wrap';
+    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'between' | 'around' | 'evenly';
+    alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'start' | 'end' | 'normal';
+    alignContent?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'start' | 'end' | 'between' | 'around';
     gap?: number | string;
-    gapX?: number;
-    gapY?: number;
-    gapUnit?: 'rem' | 'px' | 'em';
+    gapX?: number | string;
+    gapY?: number | string;
+    gapUnit?: 'rem' | 'px' | 'em' | '%';
     responsiveSmall?: boolean;
     responsiveMedium?: boolean;
     responsiveLarge?: boolean;
     width?: string;
     height?: string;
-    fit?: Boolean;
+    fit?: boolean;
+    inline?: boolean;
 }
-export default function Flex({ className, funcss, id, children, style, direction, wrap, justify, alignItems, alignContent, gap, gapX, gapY, gapUnit, responsiveSmall, responsiveMedium, responsiveLarge, fit, width, height, ...rest }: FlexProps): React.JSX.Element;
+export default function Flex({ className, funcss, id, children, style, direction, wrap, justify, alignItems, alignContent, gap, gapX, gapY, gapUnit, responsiveSmall, responsiveMedium, responsiveLarge, fit, inline, width, height, ...rest }: FlexProps): React.JSX.Element;
 export {};

package/ui/flex/Flex.js

@@ -37,17 +37,113 @@ function Flex(_a) {
     // Gap
     gap = _a.gap, gapX = _a.gapX, gapY = _a.gapY, _e = _a.gapUnit, gapUnit = _e === void 0 ? 'rem' : _e, 
     // Responsive
-    responsiveSmall = _a.responsiveSmall, responsiveMedium = _a.responsiveMedium, responsiveLarge = _a.responsiveLarge, fit = _a.fit, 
+    responsiveSmall = _a.responsiveSmall, responsiveMedium = _a.responsiveMedium, responsiveLarge = _a.responsiveLarge, fit = _a.fit, inline = _a.inline, 
     // Size
-    width = _a.width, height = _a.height, rest = __rest(_a, ["className", "funcss", "id", "children", "style", "direction", "wrap", "justify", "alignItems", "alignContent", "gap", "gapX", "gapY", "gapUnit", "responsiveSmall", "responsiveMedium", "responsiveLarge", "fit", "width", "height"]);
+    width = _a.width, height = _a.height, rest = __rest(_a, ["className", "funcss", "id", "children", "style", "direction", "wrap", "justify", "alignItems", "alignContent", "gap", "gapX", "gapY", "gapUnit", "responsiveSmall", "responsiveMedium", "responsiveLarge", "fit", "inline", "width", "height"]);
+    // Helper function to normalize flex values
+    var normalizeFlexValue = function (value, type) {
+        if (type === void 0) { type = 'justify'; }
+        if (!value)
+            return undefined;
+        var mapping = {
+            // Justify content mapping
+            'start': 'flex-start',
+            'end': 'flex-end',
+            'between': 'space-between',
+            'around': 'space-around',
+            'evenly': 'space-evenly',
+            // Align items/content mapping
+            'normal': 'normal',
+            // For alignContent, 'between' and 'around' are already correct
+        };
+        // If it's a shorthand, return the mapped value
+        if (mapping[value]) {
+            return mapping[value];
+        }
+        // If it's already a valid CSS value, return it as is
+        return value;
+    };
+    // Normalize direction shorthand
+    var getDirection = function () {
+        if (direction === 'col')
+            return 'column';
+        return direction;
+    };
+    // Normalize wrap shorthand
+    var getWrap = function () {
+        if (wrap === 'no-wrap')
+            return 'nowrap';
+        return wrap;
+    };
+    // Helper to format gap values
+    var formatGapValue = function (value) {
+        if (value === undefined || value === null)
+            return undefined;
+        // If it's already a string with unit, return as is
+        if (typeof value === 'string' && (value.includes('px') || value.includes('rem') || value.includes('em') || value.includes('%'))) {
+            return value;
+        }
+        // Otherwise, add the specified unit
+        return "".concat(value).concat(gapUnit);
+    };
     var combinedClassName = [
         className,
         funcss,
-        responsiveSmall && 'responsiveSmall',
-        responsiveMedium && 'responsiveMedium',
-        responsiveLarge && 'responsiveLarge',
+        responsiveSmall && 'responsive-small',
+        responsiveMedium && 'responsive-medium',
+        responsiveLarge && 'responsive-large',
+        inline && 'inline-flex',
     ]
         .filter(Boolean)
         .join(' ');
-    return (react_1.default.createElement("div", __assign({ id: id, className: combinedClassName, style: __assign({ display: 'flex', flexDirection: direction, flexWrap: wrap, justifyContent: justify, alignItems: alignItems, alignContent: alignContent, gap: gap ? "".concat(gap).concat(gapUnit) : 0, columnGap: gapX ? "".concat(gapX).concat(gapUnit) : gap ? "".concat(gap).concat(gapUnit) : 0, rowGap: gapY ? "".concat(gapY).concat(gapUnit) : gap ? "".concat(gap).concat(gapUnit) : 0, width: fit ? "100%" : width ? width : 'fit-content', height: fit ? "100%" : height ? height : 'fit-content' }, style) }, rest), children));
+    // Build styles dynamically
+    var flexStyles = {
+        display: inline ? 'inline-flex' : 'flex',
+        flexDirection: getDirection(),
+        flexWrap: getWrap(),
+    };
+    // Only add justify if provided
+    if (justify) {
+        flexStyles.justifyContent = normalizeFlexValue(justify, 'justify');
+    }
+    // Only add alignItems if provided
+    if (alignItems) {
+        flexStyles.alignItems = normalizeFlexValue(alignItems, 'align');
+    }
+    // Only add alignContent if provided
+    if (alignContent) {
+        flexStyles.alignContent = normalizeFlexValue(alignContent, 'align');
+    }
+    // Handle gap properties
+    var formattedGap = formatGapValue(gap);
+    var formattedGapX = formatGapValue(gapX);
+    var formattedGapY = formatGapValue(gapY);
+    if (formattedGap) {
+        flexStyles.gap = formattedGap;
+    }
+    // Only set columnGap/rowGap if explicitly provided or if gap is set but gapX/gapY not
+    if (formattedGapX !== undefined) {
+        flexStyles.columnGap = formattedGapX;
+    }
+    else if (formattedGap) {
+        flexStyles.columnGap = formattedGap;
+    }
+    if (formattedGapY !== undefined) {
+        flexStyles.rowGap = formattedGapY;
+    }
+    else if (formattedGap) {
+        flexStyles.rowGap = formattedGap;
+    }
+    // Handle width and height
+    if (fit) {
+        flexStyles.width = '100%';
+        flexStyles.height = '100%';
+    }
+    else {
+        if (width)
+            flexStyles.width = width;
+        if (height)
+            flexStyles.height = height;
+    }
+    return (react_1.default.createElement("div", __assign({ id: id, className: combinedClassName, style: __assign(__assign({}, flexStyles), style) }, rest), children));
 }

package/ui/form/Form.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+export type InputType = 'text' | 'email' | 'number' | 'tel' | 'textarea' | 'password' | 'date' | 'select' | 'checkbox' | 'radio' | 'file';
+export interface FieldOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface FormField {
+    name: string;
+    label?: string;
+    type: InputType;
+    required?: boolean;
+    placeholder?: string;
+    options?: FieldOption[];
+    multiple?: boolean;
+    value?: any;
+    disabled?: boolean;
+    helperText?: string;
+    inputProps?: {
+        startIcon?: React.ReactNode;
+        endIcon?: React.ReactNode;
+        prefix?: React.ReactNode;
+        suffix?: React.ReactNode;
+        stringPrefix?: string;
+        stringSuffix?: string;
+        iconicBg?: string;
+        funcss?: string;
+        bg?: string;
+        flat?: boolean;
+        bordered?: boolean;
+        borderless?: boolean;
+        rounded?: boolean;
+        leftRounded?: boolean;
+        rightRounded?: boolean;
+        rows?: number;
+        noBorder?: boolean;
+        variant?: string;
+        id?: string;
+        autocomplete?: string;
+        pattern?: string;
+        min?: string | number;
+        max?: string | number;
+        minLength?: number;
+        maxLength?: number;
+        step?: string | number;
+    };
+}
+export interface FormProps {
+    fields: FormField[] | string;
+    onSubmit?: (values: Record<string, any>, viaWhatsApp?: boolean) => void;
+    defaultValues?: Record<string, any> | string;
+    submitText?: string;
+    submitBg?: string;
+    submitPrefix?: React.ReactNode | string;
+    submitSuffix?: React.ReactNode | string;
+    resetText?: string;
+    showReset?: boolean;
+    isLoading?: boolean;
+    className?: string;
+    layout?: 'vertical' | 'horizontal';
+    gap?: number;
+    title?: string;
+    titleSize?: string;
+    titleColor?: string;
+    description?: string;
+    descriptionSize?: string;
+    descriptionColor?: string;
+    whatsappContact?: string;
+    whatsappHeader?: string;
+    whatsappFooter?: string;
+    fullWidth?: boolean;
+    width?: string;
+    centered?: boolean;
+    variant?: string;
+}
+declare const Form: React.FC<FormProps>;
+export default Form;