funuicss 3.7.15 → 3.8.0

package/index.d.ts

@@ -57,6 +57,9 @@ export { default as ScrollToTop } from "./ui/scrolltotop/ScrollToTop";
 export { default as Select } from "./ui/select/Select";
 export { default as FileUpload } from "./ui/input/FileUpload";
 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 Cookie } from "./js/Cookie";
 export { useVariable, useAsset, useAssetType, useAssetValue, useAssets, useVariables, } from "./ui/theme/theme";
 export { FunGet } from "./js/Fun";

package/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (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.Footer = exports.FileUpload = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = 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;
 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");
@@ -123,6 +123,12 @@ var FileUpload_1 = require("./ui/input/FileUpload");
 Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return __importDefault(FileUpload_1).default; } });
 var Footer_1 = require("./ui/footer/Footer");
 Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return __importDefault(Footer_1).default; } });
+var Feature_1 = require("./ui/feature/Feature");
+Object.defineProperty(exports, "Feature", { enumerable: true, get: function () { return __importDefault(Feature_1).default; } });
+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; } });
 // 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.7.15",
+  "version": "3.8.0",
   "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

@@ -37,10 +37,11 @@ interface ButtonProps {
     isLoading?: boolean;
     variant?: string;
     url?: string;
+    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, ...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, 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, 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"]);
+    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 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, 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, 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
@@ -213,7 +213,7 @@ function Button(_a) {
         return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, isReactElement(icon) ? react_1.default.cloneElement(icon, { size: iconSize }) : icon));
     };
     return (react_1.default.createElement("span", null,
-        react_1.default.createElement("button", __assign({ 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),
+        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 }),

package/ui/components/ImageScaler.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function ImageScaler({ funcss, size, src, }: {
+    funcss?: string | undefined;
+    size?: string | undefined;
+    src?: string | undefined;
+}): React.JSX.Element;

package/ui/components/ImageScaler.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ImageScaler;
+var react_1 = __importDefault(require("react"));
+function ImageScaler(_a) {
+    var _b = _a.funcss, funcss = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? "100%" : _c, _d = _a.src, src = _d === void 0 ? '' : _d;
+    return (react_1.default.createElement("div", { className: "image-scaler-container ".concat(funcss), style: {
+            maxWidth: size,
+            width: size,
+            maxHeight: size,
+            height: size,
+        } },
+        react_1.default.createElement("img", { src: src, className: "image-scaler-img", loading: "lazy", alt: "" })));
+}

package/ui/div/Div.d.ts

@@ -11,9 +11,11 @@ type DivProps = {
     width?: string;
     padding?: string;
     margin?: string;
+    id?: string;
     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, fit, customStyle, ...rest }: DivProps) => React.JSX.Element;
+declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, 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, fit = _a.fit, customStyle = _a.customStyle, rest = __rest(_a, ["children", "funcss", "content", "minHeight", "maxHeight", "maxWidth", "minWidth", "height", "width", "padding", "margin", "fit", "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, 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"]);
     return (React.createElement("div", null,
-        React.createElement("div", __assign({ 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) }, rest), content || children)));
+        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)));
 };
 exports.default = Div;

package/ui/empty/Empty.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface EmptyProps {
+    header?: React.ReactNode;
+    title?: string;
+    titleSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    content?: React.ReactNode;
+    description?: string;
+    descriptionSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    action?: React.ReactNode;
+    ctaText?: string;
+    ctaIcon?: React.ReactNode;
+    ctaOnClick?: () => void;
+    ctaBg?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    showCta?: boolean;
+}
+export default function Empty({ header, title, titleSize, content, description, descriptionSize, action, ctaText, ctaIcon, ctaOnClick, ctaBg, showCta, }: EmptyProps): React.JSX.Element;
+export {};

package/ui/empty/Empty.js

@@ -0,0 +1,66 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Empty;
+var React = __importStar(require("react"));
+var Button_1 = __importDefault(require("../button/Button"));
+var pi_1 = require("react-icons/pi");
+var Text_1 = __importDefault(require("../text/Text"));
+var Flex_1 = __importDefault(require("../flex/Flex"));
+function Empty(_a) {
+    var header = _a.header, _b = _a.title, title = _b === void 0 ? 'No Data Available' : _b, _c = _a.titleSize, titleSize = _c === void 0 ? 'xl' : _c, content = _a.content, _d = _a.description, description = _d === void 0 ? "There's nothing to display at the moment. Try adjusting your filters or check back later." : _d, _e = _a.descriptionSize, descriptionSize = _e === void 0 ? 'md' : _e, action = _a.action, _f = _a.ctaText, ctaText = _f === void 0 ? 'Go Back' : _f, _g = _a.ctaIcon, ctaIcon = _g === void 0 ? React.createElement(pi_1.PiArrowLeft, null) : _g, ctaOnClick = _a.ctaOnClick, _h = _a.ctaBg, ctaBg = _h === void 0 ? 'primary' : _h, _j = _a.showCta, showCta = _j === void 0 ? true : _j;
+    var handleCtaClick = function () {
+        if (ctaOnClick) {
+            ctaOnClick();
+        }
+        else {
+            window.history.back();
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement("div", null,
+            React.createElement("div", { className: "central flex p-3" },
+                React.createElement("div", { className: "text-center width-600-max" },
+                    React.createElement(Flex_1.default, { gap: 1, direction: "column", fit: true },
+                        React.createElement("div", null, header ? (header) : (React.createElement("div", null,
+                            React.createElement(Text_1.default, { text: title, size: titleSize, block: true })))),
+                        React.createElement("div", { className: "article" }, content ? (content) : (React.createElement(Text_1.default, { article: true, opacity: 4, text: description, size: descriptionSize, block: true }))),
+                        showCta && (React.createElement("div", null, action ? (action) : (React.createElement("div", { className: "row-flex gap", style: { justifyContent: 'center', gap: '0.4rem' } },
+                            React.createElement(Button_1.default, { startIcon: ctaIcon, bg: ctaBg, onClick: handleCtaClick }, ctaText)))))))))));
+}

package/ui/feature/Feature.d.ts

@@ -0,0 +1,130 @@
+import React from 'react';
+type FeatureItem = {
+    icon?: string | React.ReactNode;
+    iconColor?: string;
+    iconSize?: number;
+    iconClassName?: string;
+    title?: React.ReactNode;
+    titleSize?: string;
+    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;
+    imageStyle?: React.CSSProperties;
+    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;
+};
+type FeatureProps = {
+    variant?: string;
+    layout?: 'checklist' | 'centered' | 'grid';
+    title?: React.ReactNode;
+    titleSize?: string;
+    titleWeight?: number;
+    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;
+    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;
+    cardPadding?: string;
+    cardRounded?: string;
+    cardShadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+    cardBorder?: boolean;
+    cardBorderColor?: string;
+    cardHoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
+    cardClassName?: string;
+    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;
+    ctaStartIcon?: React.ReactNode;
+    ctaEndIcon?: React.ReactNode;
+    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';
+    children?: React.ReactNode;
+    id?: string;
+    funcss?: string;
+    sectionClass?: string;
+    maxWidth?: string;
+    responsiveColumns?: string;
+};
+declare const Feature: React.FC<FeatureProps>;
+export default Feature;