funuicss 3.7.16 → 3.8.0

package/index.d.ts

@@ -58,6 +58,8 @@ 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.Feature = 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");
@@ -125,6 +125,10 @@ 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.16",
+  "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/flex/Flex.d.ts

@@ -19,6 +19,7 @@ interface FlexProps {
     responsiveLarge?: boolean;
     width?: string;
     height?: string;
+    fit?: Boolean;
 }
-export default function Flex({ className, funcss, id, children, style, direction, wrap, justify, alignItems, alignContent, gap, gapX, gapY, gapUnit, responsiveSmall, responsiveMedium, responsiveLarge, 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, width, height, ...rest }: FlexProps): React.JSX.Element;
 export {};

package/ui/flex/Flex.js

@@ -37,9 +37,9 @@ 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, 
+    responsiveSmall = _a.responsiveSmall, responsiveMedium = _a.responsiveMedium, responsiveLarge = _a.responsiveLarge, fit = _a.fit, 
     // 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", "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", "width", "height"]);
     var combinedClassName = [
         className,
         funcss,
@@ -49,5 +49,5 @@ function Flex(_a) {
     ]
         .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: width ? width : 'fit-content', height: height ? height : 'fit-content' }, style) }, rest), children));
+    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));
 }

package/ui/modal/Modal.d.ts

@@ -5,7 +5,7 @@ interface ModalProps {
     animation?: string;
     duration?: number;
     open: boolean;
-    hideClose: boolean;
+    hideClose?: boolean;
     setOpen: (val: boolean) => void;
     maxWidth?: string;
     maxHeight?: string;

package/ui/products/CartModal.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CartItem } from './Store';
+interface CartModalProps {
+    cart: CartItem[];
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    currency?: string;
+    updateQuantity: (cartItemId: string, quantity: number) => void;
+    removeFromCart: (cartItemId: string) => void;
+    clearCart: () => void;
+    handleCheckout: () => void;
+    cartBadgeColor?: string;
+    checkoutText?: string;
+    checkoutIcon?: React.ReactNode;
+    small?: boolean;
+    big?: boolean;
+    persistCart?: boolean;
+}
+declare const CartModal: React.FC<CartModalProps>;
+export default CartModal;

package/ui/products/CartModal.js

@@ -0,0 +1,85 @@
+"use strict";
+// components/products/CartModal.tsx
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var pi_1 = require("react-icons/pi");
+var Modal_1 = __importDefault(require("../modal/Modal"));
+var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
+var Text_1 = __importDefault(require("../text/Text"));
+var Input_1 = __importDefault(require("../input/Input"));
+var Div_1 = __importDefault(require("../div/Div"));
+var Button_1 = __importDefault(require("../button/Button"));
+var Circle_1 = __importDefault(require("../specials/Circle"));
+var Flex_1 = __importDefault(require("../flex/Flex"));
+var generateCartItemId = function (product, options) {
+    var parts = [
+        product.id,
+        (options === null || options === void 0 ? void 0 : options.color) || '',
+        (options === null || options === void 0 ? void 0 : options.size) || ''
+    ].filter(Boolean);
+    return parts.join('_');
+};
+var CartModal = function (_a) {
+    var cart = _a.cart, isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, _b = _a.currency, currency = _b === void 0 ? '$' : _b, updateQuantity = _a.updateQuantity, removeFromCart = _a.removeFromCart, clearCart = _a.clearCart, handleCheckout = _a.handleCheckout, _c = _a.cartBadgeColor, cartBadgeColor = _c === void 0 ? 'error' : _c, _d = _a.checkoutText, checkoutText = _d === void 0 ? 'Checkout' : _d, checkoutIcon = _a.checkoutIcon, _e = _a.small, small = _e === void 0 ? false : _e, _f = _a.big, big = _f === void 0 ? false : _f, _g = _a.persistCart, persistCart = _g === void 0 ? true : _g;
+    var totalItems = cart.reduce(function (sum, item) { return sum + item.quantity; }, 0);
+    var subtotal = cart.reduce(function (sum, item) { return sum + (item.product.price * item.quantity); }, 0);
+    var handleRemoveItem = function (item) {
+        var cartItemId = generateCartItemId(item.product, {
+            color: item.selectedColor,
+            size: item.selectedSize
+        });
+        removeFromCart(cartItemId);
+    };
+    var handleUpdateQuantity = function (item, newQuantity) {
+        var cartItemId = generateCartItemId(item.product, {
+            color: item.selectedColor,
+            size: item.selectedSize
+        });
+        updateQuantity(cartItemId, newQuantity);
+    };
+    return (react_1.default.createElement(Modal_1.default, { animation: "SlideLeft", position: "right", duration: 0.3, open: isOpen, setOpen: setIsOpen, funcss: "funui_products_cart_modal width-400 sm:width-500", title: react_1.default.createElement(Text_1.default, { text: "Your Cart", size: "h3" }), body: react_1.default.createElement(Div_1.default, { funcss: "funui_products_cart_body max-height-70vh overflow-y-auto" }, cart.length === 0 ? (react_1.default.createElement(Div_1.default, { funcss: "flex-center padding-40" },
+            react_1.default.createElement(Text_1.default, { text: "Your cart is empty", color: "text-light", size: "large" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            cart.map(function (item, index) {
+                var _a;
+                var cartItemId = generateCartItemId(item.product, {
+                    color: item.selectedColor,
+                    size: item.selectedSize
+                });
+                return (react_1.default.createElement(RowFlex_1.default, { key: "".concat(cartItemId, "-").concat(index), funcss: "lighter p round-edge section", alignItems: "center", justify: 'space-between', gap: 1 },
+                    react_1.default.createElement(Div_1.default, { funcss: " width-80 height-80" }, ((_a = item.product.images) === null || _a === void 0 ? void 0 : _a[0]) ? (react_1.default.createElement("img", { src: item.product.images[0], alt: item.product.name, loading: "lazy", className: "fit round-edge" })) : (react_1.default.createElement(Div_1.default, { funcss: "w-80 h-80 flex central" },
+                        react_1.default.createElement(Text_1.default, { text: "No Image", color: "text-light", size: "sm" })))),
+                    react_1.default.createElement(Div_1.default, { funcss: "funui_products_cart_details flex-1 min-width-0" },
+                        react_1.default.createElement(Text_1.default, { text: item.product.name, block: true }),
+                        (item.selectedColor || item.selectedSize) && (react_1.default.createElement(Text_1.default, { text: "".concat(item.selectedColor ? "Color: ".concat(item.selectedColor) : '', " ").concat(item.selectedSize ? "Size: ".concat(item.selectedSize) : ''), size: 'sm' })),
+                        react_1.default.createElement(Text_1.default, { text: "".concat(item.product.currency || currency).concat((item.product.price * item.quantity).toFixed(2)), block: true, size: 'lg' })),
+                    react_1.default.createElement("div", { className: "col" },
+                        react_1.default.createElement(Flex_1.default, { width: '100%', gap: 0.5, alignItems: 'center' },
+                            react_1.default.createElement(Circle_1.default, { size: 2.5, bg: 'bg', body: react_1.default.createElement(pi_1.PiMinus, null), onClick: function () { return handleUpdateQuantity(item, item.quantity - 1); } }),
+                            react_1.default.createElement("div", { className: "w-90" },
+                                react_1.default.createElement(Input_1.default, { type: "number", value: item.quantity, onChange: function (e) {
+                                        var value = parseInt(e.target.value);
+                                        if (!isNaN(value)) {
+                                            handleUpdateQuantity(item, Math.max(1, value));
+                                        }
+                                    }, fullWidth: true, bordered: true })),
+                            react_1.default.createElement(Circle_1.default, { bg: 'bg', size: 2.5, body: react_1.default.createElement(pi_1.PiPlus, null), onClick: function () { return handleUpdateQuantity(item, item.quantity + 1); } }))),
+                    react_1.default.createElement(Circle_1.default, { size: 2.5, body: react_1.default.createElement(pi_1.PiTrash, null), onClick: function () { return handleRemoveItem(item); }, bg: 'error' })));
+            }),
+            react_1.default.createElement(Div_1.default, { funcss: "funui_products_cart_summary padding-20 space-y-3" },
+                react_1.default.createElement(RowFlex_1.default, { justify: "space-between" },
+                    react_1.default.createElement(Text_1.default, { text: "Subtotal", color: "text-light" }),
+                    react_1.default.createElement(Text_1.default, { text: "".concat(currency).concat(subtotal.toFixed(2)) })),
+                react_1.default.createElement(RowFlex_1.default, { justify: "space-between" },
+                    react_1.default.createElement(Text_1.default, { text: "Items", color: "text-light" }),
+                    react_1.default.createElement(Text_1.default, { text: totalItems.toString() })))))), footer: cart.length > 0 ? (react_1.default.createElement(Div_1.default, { funcss: "funui_products_cart_footer padding-20 border-top border-light" },
+            react_1.default.createElement(RowFlex_1.default, { justify: "space-between", alignItems: "center" },
+                react_1.default.createElement(Div_1.default, null,
+                    react_1.default.createElement(Text_1.default, { text: "Total", color: "text-light", size: "sm", block: true }),
+                    react_1.default.createElement(Text_1.default, { text: "".concat(currency).concat(subtotal.toFixed(2)), size: "h4" })),
+                react_1.default.createElement(Button_1.default, { text: checkoutText, bg: "primary", raised: true, onClick: handleCheckout, funcss: "padding-x-30", startIcon: checkoutIcon, small: small, big: big })))) : react_1.default.createElement(react_1.default.Fragment, null) }));
+};
+exports.default = CartModal;

package/ui/products/ProductCard.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Product } from './Store';
+interface ProductCardProps {
+    product: Product;
+    currency?: string;
+    onClick?: (product: Product) => void;
+    onAddToCart?: (product: Product) => void;
+    className?: string;
+    funcss?: string;
+    showBadges?: boolean;
+}
+declare const ProductCard: React.FC<ProductCardProps>;
+export default ProductCard;

package/ui/products/ProductCard.js

@@ -0,0 +1,56 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Div_1 = __importDefault(require("../div/Div"));
+var Text_1 = __importDefault(require("../text/Text"));
+var Flex_1 = __importDefault(require("../flex/Flex"));
+var ProductCard = function (_a) {
+    var _b;
+    var product = _a.product, _c = _a.currency, currency = _c === void 0 ? '$' : _c, onClick = _a.onClick, onAddToCart = _a.onAddToCart, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.funcss, funcss = _e === void 0 ? '' : _e, _f = _a.showBadges, showBadges = _f === void 0 ? true : _f;
+    var hasDiscount = product.comparePrice && product.comparePrice > product.price;
+    var discountPercent = hasDiscount
+        ? Math.round(((product.comparePrice - product.price) / product.comparePrice) * 100)
+        : 0;
+    var stockAvailable = product.stock === undefined || product.stock > 0;
+    var handleClick = function () {
+        onClick === null || onClick === void 0 ? void 0 : onClick(product);
+    };
+    var handleAddToCart = function (e) {
+        e.stopPropagation();
+        onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(product);
+    };
+    var getDisplayPrice = function () {
+        var price = product.price || 0;
+        var productCurrency = product.currency || currency;
+        return "".concat(productCurrency).concat(price.toFixed(2));
+    };
+    return (react_1.default.createElement(Div_1.default, { funcss: "funui_store_product-card ".concat(className, " ").concat(funcss), onClick: handleClick, customStyle: { cursor: 'pointer' } },
+        react_1.default.createElement(Div_1.default, { funcss: "funui_store_image-container" },
+            ((_b = product.images) === null || _b === void 0 ? void 0 : _b[0]) ? (react_1.default.createElement("img", { src: product.images[0], alt: product.name, loading: "lazy", className: "funui_store_product-image" })) : (react_1.default.createElement(Div_1.default, { funcss: "funui_store_no-image" },
+                react_1.default.createElement(Text_1.default, { text: "No Image", color: "text-muted", size: "sm" }))),
+            showBadges && (react_1.default.createElement(Div_1.default, { funcss: "funui_store_product-badges" }, product.isSale && (react_1.default.createElement("span", { className: "funui_store_badge sale" }, "Sale"))))),
+        react_1.default.createElement(Div_1.default, { funcss: "funui_store_product-info" },
+            react_1.default.createElement(Flex_1.default, { fit: true, justify: 'space-between', alignItems: 'center', gap: 1 },
+                product.category && (react_1.default.createElement("span", { className: "funui_store_product-category" }, product.category)),
+                product.isNew && (react_1.default.createElement(Text_1.default, { size: 'xs', color: 'success', weight: 600 }, "New"))),
+            react_1.default.createElement(Flex_1.default, { gap: 0.5, direction: 'column', width: '100%' },
+                react_1.default.createElement(Text_1.default, { block: true, size: 'lg', truncate: 2 }, product.name),
+                react_1.default.createElement(Flex_1.default, { width: '100%', gap: 1, justify: 'space-between' },
+                    react_1.default.createElement(Flex_1.default, { gap: 0.5, alignItems: 'center' },
+                        react_1.default.createElement("span", { className: "text-lg block" }, getDisplayPrice()),
+                        hasDiscount && (react_1.default.createElement(Text_1.default, { size: 'xs', color: 'info', weight: 600 },
+                            discountPercent,
+                            "% Off"))),
+                    hasDiscount && (react_1.default.createElement(Text_1.default, { size: "sm", opacity: 4, textDecoration: 'line-through' },
+                        product.currency || currency,
+                        product.comparePrice.toFixed(2)))),
+                !stockAvailable ? (react_1.default.createElement("span", { className: "funui_store_stock-info out text-xs" }, "Out of Stock")) : product.stock !== undefined && product.stock > 0 && product.stock < 10 ? (react_1.default.createElement("span", { className: "funui_store_stock-info low text-xs" },
+                    "Only ",
+                    product.stock,
+                    " left")) : stockAvailable && (react_1.default.createElement("span", { className: "funui_store_stock-info in text-xs" }, "In Stock"))))));
+};
+exports.default = ProductCard;

package/ui/products/ProductDetail.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Product } from './Store';
+interface ProductDetailProps {
+    product: Product;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    currency?: string;
+    onAddToCart?: (product: Product, quantity: number, selectedOptions?: {
+        color?: string;
+        size?: string;
+    }) => void;
+}
+declare const ProductDetail: React.FC<ProductDetailProps>;
+export default ProductDetail;