funuicss 3.7.15 → 3.8.0

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;

package/ui/products/ProductDetail.js

@@ -0,0 +1,249 @@
+"use strict";
+// components/products/ProductDetail.tsx
+'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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var pi_1 = require("react-icons/pi");
+var tfi_1 = require("react-icons/tfi");
+var si_1 = require("react-icons/si");
+var Modal_1 = __importDefault(require("../modal/Modal"));
+var Div_1 = __importDefault(require("../div/Div"));
+var Text_1 = __importDefault(require("../text/Text"));
+var Flex_1 = __importDefault(require("../flex/Flex"));
+var Button_1 = __importDefault(require("../button/Button"));
+var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
+var Input_1 = __importDefault(require("../input/Input"));
+var Circle_1 = __importDefault(require("../specials/Circle"));
+var Carousel_1 = __importDefault(require("../carousel/Carousel"));
+var Select_1 = __importDefault(require("../select/Select"));
+var io5_1 = require("react-icons/io5");
+var ImageScaler_1 = __importDefault(require("../components/ImageScaler"));
+var ProductDetail = function (_a) {
+    var product = _a.product, open = _a.open, setOpen = _a.setOpen, _b = _a.currency, currency = _b === void 0 ? '$' : _b, onAddToCart = _a.onAddToCart;
+    var _c = (0, react_1.useState)(0), selectedImageIndex = _c[0], setSelectedImageIndex = _c[1];
+    var _d = (0, react_1.useState)(''), selectedColor = _d[0], setSelectedColor = _d[1];
+    var _e = (0, react_1.useState)(''), selectedSize = _e[0], setSelectedSize = _e[1];
+    var _f = (0, react_1.useState)(1), quantity = _f[0], setQuantity = _f[1];
+    var _g = (0, react_1.useState)(false), showFullDescription = _g[0], setShowFullDescription = _g[1];
+    var hasDiscount = product.comparePrice && product.comparePrice > product.price;
+    var discountPercent = hasDiscount
+        ? Math.round(((product.comparePrice - product.price) / product.comparePrice) * 100)
+        : 0;
+    var getDisplayPrice = function () {
+        var price = product.price || 0;
+        var productCurrency = product.currency || currency;
+        return "".concat(productCurrency).concat(price.toFixed(2));
+    };
+    var handleAddToCart = function () {
+        onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(product, quantity, {
+            color: selectedColor,
+            size: selectedSize,
+        });
+        setOpen(false);
+    };
+    var totalPrice = ((product.price || 0) * quantity).toFixed(2);
+    // Function to safely process description
+    var processDescription = function (description) {
+        if (!description)
+            return '';
+        // Remove h1, h2, h3 tags but keep their content
+        var processed = description
+            .replace(/<h[1-3][^>]*>/gi, '<p>')
+            .replace(/<\/h[1-3]>/gi, '</p>');
+        return processed;
+    };
+    // Function to truncate HTML while preserving tags
+    var truncateHTML = function (html, maxLength) {
+        if (html.length <= maxLength)
+            return html;
+        var truncated = '';
+        var length = 0;
+        var inTag = false;
+        var tagBuffer = '';
+        for (var i = 0; i < html.length && length < maxLength; i++) {
+            var char = html[i];
+            if (char === '<') {
+                inTag = true;
+                tagBuffer = char;
+            }
+            else if (char === '>') {
+                inTag = false;
+                tagBuffer += char;
+                truncated += tagBuffer;
+                tagBuffer = '';
+            }
+            else if (inTag) {
+                tagBuffer += char;
+            }
+            else {
+                truncated += char;
+                length++;
+            }
+        }
+        // Close any open tags
+        var tempDiv = document.createElement('div');
+        tempDiv.innerHTML = truncated + '...';
+        // Get the innerHTML to ensure tags are properly closed
+        return tempDiv.innerHTML;
+    };
+    // Process the description
+    var processedDescription = processDescription(product.description || '');
+    var maxDescriptionLength = 200;
+    var shouldTruncate = processedDescription.length > maxDescriptionLength;
+    var displayDescription = showFullDescription
+        ? processedDescription
+        : (shouldTruncate ? truncateHTML(processedDescription, maxDescriptionLength) : processedDescription);
+    // Check if description has HTML tags
+    var hasHTML = /<[a-z][\s\S]*>/i.test(processedDescription);
+    return (react_1.default.createElement(Modal_1.default, { animation: "SlideDown", open: open, setOpen: setOpen, maxWidth: '1000px', title: react_1.default.createElement(react_1.default.Fragment, null), body: react_1.default.createElement(Flex_1.default, { width: '100%', gap: 2 },
+            react_1.default.createElement("div", { className: "w-400" }, product.images && product.images.length > 0 && (react_1.default.createElement(Div_1.default, { funcss: "margin-bottom-20" },
+                react_1.default.createElement(Div_1.default, { funcss: "funui_products_main_image_container mb-3" },
+                    react_1.default.createElement(ImageScaler_1.default, { src: product.images[selectedImageIndex], size: "100%" })),
+                product.images.length > 1 && (react_1.default.createElement(Carousel_1.default, { gap: 1 }, product.images.map(function (image, index) { return (react_1.default.createElement(Div_1.default, { key: index, funcss: "funui_products_thumbnail rounde-edge ".concat(selectedImageIndex === index ? 'funui_products_thumbnail-active' : ''), onClick: function () { return setSelectedImageIndex(index); } },
+                    react_1.default.createElement(ImageScaler_1.default, { src: image, size: "100px" }))); })))))),
+            react_1.default.createElement("div", { className: "col" },
+                react_1.default.createElement(Flex_1.default, { direction: 'column', gap: 2, alignItems: 'flex-start', justify: 'flex-start' },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(Text_1.default, { text: product.name, size: "2xl", block: true }),
+                        react_1.default.createElement(Flex_1.default, { justify: "space-between", alignItems: "center", width: '100%' },
+                            react_1.default.createElement(Text_1.default, { text: getDisplayPrice(), size: "xl" }),
+                            (hasDiscount || product.comparePrice) && (react_1.default.createElement(Text_1.default, { text: "".concat(product.currency || currency).concat(product.comparePrice.toFixed(2)), textDecoration: 'line-through' })))),
+                    ((product.colors && product.colors.length > 0) || (product.sizes && product.sizes.length > 0)) &&
+                        react_1.default.createElement(Flex_1.default, { width: '100%', gap: 1 },
+                            product.colors && product.colors.length > 0 && (react_1.default.createElement("div", { className: "col" },
+                                react_1.default.createElement(Select_1.default, { fullWidth: true, options: __spreadArray([
+                                        { text: 'Select Color', value: '' }
+                                    ], product.colors.map(function (color) { return ({
+                                        text: color.name,
+                                        value: color.name,
+                                        prefix: react_1.default.createElement("div", { className: 'circle', style: { width: "20px", height: '20px', backgroundColor: color.code } })
+                                    }); }), true), value: selectedColor, onChange: function (e) { return setSelectedColor(e); }, bordered: true }))),
+                            product.sizes && product.sizes.length > 0 && (react_1.default.createElement("div", { className: "col" },
+                                react_1.default.createElement(Select_1.default, { fullWidth: true, options: __spreadArray([
+                                        { text: 'Select Size', value: '' }
+                                    ], product.sizes.map(function (size) { return ({ text: size, value: size }); }), true), value: selectedSize, onChange: function (e) { return setSelectedSize(e); }, bordered: true })))),
+                    processedDescription && (react_1.default.createElement("div", null,
+                        react_1.default.createElement(Text_1.default, { text: "Description", size: "lg", funcss: "margin-bottom-1" }),
+                        react_1.default.createElement("div", { className: "article text-sm ".concat(hasHTML ? '' : 'whitespace-pre-wrap'), dangerouslySetInnerHTML: { __html: displayDescription } }),
+                        shouldTruncate && (react_1.default.createElement(Button_1.default, { text: showFullDescription ? 'Show Less' : 'Read More', onClick: function () { return setShowFullDescription(!showFullDescription); }, small: true, bg: 'lighter', startIcon: showFullDescription ? react_1.default.createElement(pi_1.PiCaretUp, null) : react_1.default.createElement(pi_1.PiCaretDown, null) })))),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(Flex_1.default, { gap: 3, width: '100%' },
+                            product.warranty && (react_1.default.createElement(Flex_1.default, { gap: 0.3 },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(pi_1.PiShieldCheck, { className: 'text-primary' })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(Text_1.default, { text: "Warranty", size: "xs", opacity: 4, block: true }),
+                                    react_1.default.createElement(Text_1.default, { text: product.warranty, size: "sm", block: true, lineHeight: '1' })))),
+                            product.manufacturer && (react_1.default.createElement(Flex_1.default, { gap: 0.3 },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(pi_1.PiUser, { className: 'text-primary' })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(Text_1.default, { text: "Manufacturer", size: "xs", opacity: 4, block: true }),
+                                    react_1.default.createElement(Text_1.default, { text: product.manufacturer, size: "sm", block: true, lineHeight: '1' })))),
+                            product.countryOfOrigin && (react_1.default.createElement(Flex_1.default, { gap: 0.3 },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(pi_1.PiGlobe, { className: 'text-primary' })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(Text_1.default, { text: "Country of Origin", size: "xs", opacity: 4, block: true }),
+                                    react_1.default.createElement(Text_1.default, { text: product.countryOfOrigin, size: "sm", block: true, lineHeight: '1' })))),
+                            product.isFeatured && (react_1.default.createElement(Flex_1.default, { gap: 0.3 },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(pi_1.PiUsers, { className: 'text-primary' })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(Text_1.default, { text: "Featured", size: "xs", opacity: 4, block: true }),
+                                    react_1.default.createElement(Text_1.default, { text: "Yes", size: "sm", block: true, lineHeight: '1' })))),
+                            product.rating && (react_1.default.createElement(Flex_1.default, { gap: 0.3 },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(tfi_1.TfiComments, { className: 'text-primary' })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(Text_1.default, { text: "Rating", size: "xs", opacity: 4, block: true }),
+                                    react_1.default.createElement(Text_1.default, { text: product.rating, size: "sm", block: true, lineHeight: '1' })))),
+                            product.brand && (react_1.default.createElement(Flex_1.default, { gap: 0.3 },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(si_1.SiBlackmagicdesign, { className: 'text-primary' })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(Text_1.default, { text: "Brand", size: "xs", opacity: 4, block: true }),
+                                    react_1.default.createElement(Text_1.default, { text: product.brand, size: "sm", block: true, lineHeight: '1' })))),
+                            product.category && (react_1.default.createElement(Flex_1.default, { gap: 0.3 },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(io5_1.IoLayersOutline, { className: 'text-primary' })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(Text_1.default, { text: "Category", size: "xs", opacity: 4, block: true }),
+                                    react_1.default.createElement(Text_1.default, { text: product.category, size: "sm", block: true, lineHeight: '1' })))),
+                            product.isNew && (react_1.default.createElement(Flex_1.default, { gap: 0.3 },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(pi_1.PiChecks, { className: 'text-primary' })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(Text_1.default, { text: "New", size: "xs", opacity: 4, block: true }),
+                                    react_1.default.createElement(Text_1.default, { text: "Yes", size: "sm", block: true, lineHeight: '1' })))),
+                            product.isSale && (react_1.default.createElement(Flex_1.default, { gap: 0.3 },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(pi_1.PiChecks, { className: 'text-primary' })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(Text_1.default, { text: "On Sale", size: "xs", opacity: 4, block: true }),
+                                    react_1.default.createElement(Text_1.default, { text: "Yes", size: "sm", block: true, lineHeight: '1' })))),
+                            product.weight && (react_1.default.createElement(Flex_1.default, { gap: 0.3 },
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(pi_1.PiScales, { className: 'text-primary' })),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement(Text_1.default, { text: "Weight", size: "xs", opacity: 4, block: true }),
+                                    react_1.default.createElement(Text_1.default, { text: product.weight + " " + product.weightUnit, size: "sm", block: true, lineHeight: '1' }))))))))), footer: react_1.default.createElement(RowFlex_1.default, { gap: 1, justify: 'flex-end', funcss: 'pt' },
+            react_1.default.createElement(RowFlex_1.default, { gap: 0.5, alignItems: "center" },
+                react_1.default.createElement(Circle_1.default, { body: react_1.default.createElement(pi_1.PiMinus, null), onClick: function () { return setQuantity(Math.max(1, quantity - 1)); }, funcss: quantity <= 1 ? "disabled" : "" }),
+                react_1.default.createElement("div", { className: "w-90" },
+                    react_1.default.createElement(Input_1.default, { type: "number", value: quantity, onChange: function (e) {
+                            var value = parseInt(e.target.value);
+                            if (!isNaN(value)) {
+                                setQuantity(Math.max(1, value));
+                            }
+                        }, funcss: "text-center", bordered: true })),
+                react_1.default.createElement(Circle_1.default, { onClick: function () { return setQuantity(quantity + 1); }, bg: 'lighter' },
+                    react_1.default.createElement(pi_1.PiPlus, null))),
+            react_1.default.createElement(Button_1.default, { text: "Add to Cart - ".concat(currency).concat(totalPrice), bg: "primary", raised: true, onClick: handleAddToCart })) }));
+};
+exports.default = ProductDetail;

package/ui/products/ProductDetailModal.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Product } from './Products';
+declare const ProductDetailModal: React.MemoExoticComponent<({ isOpen, setIsOpen, selectedProduct, selectedImageIndex, setSelectedImageIndex, selectedColor, setSelectedColor, quantity, setQuantity, handleAddFromModal, small, big }: {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    selectedProduct: Product;
+    selectedImageIndex: number;
+    setSelectedImageIndex: (index: number) => void;
+    selectedColor: string;
+    setSelectedColor: (color: string) => void;
+    quantity: number;
+    setQuantity: (qty: number) => void;
+    handleAddFromModal: () => void;
+    small?: boolean;
+    big?: boolean;
+}) => React.JSX.Element>;
+export default ProductDetailModal;

package/ui/products/ProductDetailModal.js

@@ -0,0 +1,99 @@
+"use strict";
+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 });
+var react_1 = __importStar(require("react"));
+var pi_1 = require("react-icons/pi");
+var Modal_1 = __importDefault(require("../modal/Modal"));
+var Close_1 = __importDefault(require("../modal/Close"));
+var Button_1 = __importDefault(require("../button/Button"));
+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 DETAIL_EMPTY_SVG = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23f3f4f6"><rect width="100" height="100"/><text x="50" y="55" text-anchor="middle" fill="%239ca3af" font-size="12">No Image</text></svg>';
+var THUMBNAIL_EMPTY_SVG = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23f3f4f6"><rect width="100" height="100"/></svg>';
+var ProductDetailModal = (0, react_1.memo)(function (_a) {
+    var isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, selectedProduct = _a.selectedProduct, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, selectedColor = _a.selectedColor, setSelectedColor = _a.setSelectedColor, quantity = _a.quantity, setQuantity = _a.setQuantity, handleAddFromModal = _a.handleAddFromModal, small = _a.small, big = _a.big;
+    return (react_1.default.createElement(Modal_1.default, { animation: "ScaleUp", duration: 0.3, open: isOpen, setOpen: setIsOpen, funcss: "funui_products_detail_modal max-width-600", title: react_1.default.createElement(RowFlex_1.default, { justify: "space-between", alignItems: "center" },
+            react_1.default.createElement(Text_1.default, { text: selectedProduct.name, size: "h3", funcss: "text-bold", block: true }),
+            react_1.default.createElement(Close_1.default, { onClick: function () { return setIsOpen(false); } })), body: react_1.default.createElement(Div_1.default, { funcss: "funui_products_detail_body" },
+            selectedProduct.images && selectedProduct.images.length > 0 && (react_1.default.createElement(Div_1.default, { funcss: "margin-bottom-20" },
+                react_1.default.createElement(Div_1.default, { funcss: "margin-bottom-10" },
+                    react_1.default.createElement("img", { src: selectedProduct.images[selectedImageIndex], alt: selectedProduct.name, style: { width: '100%', borderRadius: '0.5rem' }, loading: "lazy", onError: function (e) {
+                            e.target.src = DETAIL_EMPTY_SVG;
+                        } })),
+                selectedProduct.images.length > 1 && (react_1.default.createElement(RowFlex_1.default, { gap: 1, wrap: "wrap" }, selectedProduct.images.map(function (image, index) { return (react_1.default.createElement(Div_1.default, { key: index, funcss: "cursor-pointer ".concat(selectedImageIndex === index ? 'border-2 border-primary' : 'border border-light'), onClick: function () { return setSelectedImageIndex(index); }, customStyle: {
+                        width: '80px',
+                        height: '80px',
+                        borderRadius: '0.5rem',
+                        overflow: 'hidden',
+                        cursor: 'pointer'
+                    } },
+                    react_1.default.createElement("img", { src: image, alt: "".concat(selectedProduct.name, " ").concat(index + 1), loading: "lazy", style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover'
+                        }, onError: function (e) {
+                            e.target.src = THUMBNAIL_EMPTY_SVG;
+                        } }))); }))))),
+            react_1.default.createElement(Div_1.default, { funcss: "funui_products_detail_info space-y-3" },
+                react_1.default.createElement(RowFlex_1.default, { justify: "space-between", alignItems: "center" },
+                    react_1.default.createElement(Text_1.default, { text: "$".concat(selectedProduct.price.toFixed(2)), size: "h3", funcss: "text-bold" }),
+                    selectedProduct.comparePrice && selectedProduct.comparePrice > selectedProduct.price && (react_1.default.createElement(Text_1.default, { text: "$".concat(selectedProduct.comparePrice.toFixed(2)), funcss: "text-light line-through" }))),
+                selectedProduct.description && (react_1.default.createElement(Text_1.default, { text: selectedProduct.description, funcss: "text-light line-height-1.6" })),
+                selectedProduct.colors && selectedProduct.colors.length > 0 && (react_1.default.createElement(Div_1.default, { funcss: "funui_products_color_selection space-y-2" },
+                    react_1.default.createElement(Text_1.default, { text: "Color", funcss: "text-bold" }),
+                    react_1.default.createElement(RowFlex_1.default, { gap: 1, wrap: "wrap" }, selectedProduct.colors.map(function (color) { return (react_1.default.createElement(Button_1.default, { key: color.name, onClick: function () { return setSelectedColor(color.name); }, funcss: "padding-10 rounded ".concat(selectedColor === color.name
+                            ? 'border-2 border-primary'
+                            : 'border border-light'), style: { backgroundColor: color.code }, "aria-label": color.name }, selectedColor === color.name && (react_1.default.createElement(pi_1.PiCheck, { style: { color: 'white' } })))); })))),
+                react_1.default.createElement(Div_1.default, { funcss: "funui_products_quantity_selection space-y-2" },
+                    react_1.default.createElement(Text_1.default, { text: "Quantity", funcss: "text-bold" }),
+                    react_1.default.createElement(RowFlex_1.default, { gap: 2, alignItems: "center" },
+                        react_1.default.createElement(Button_1.default, { startIcon: "-", onClick: function () { return setQuantity(Math.max(1, quantity - 1)); }, disabled: quantity <= 1, color: "text", small: small }),
+                        react_1.default.createElement(Input_1.default, { type: "number", value: quantity, onChange: function (e) {
+                                var value = parseInt(e.target.value);
+                                if (!isNaN(value)) {
+                                    setQuantity(Math.max(1, value));
+                                }
+                            }, funcss: "width-100 text-center", bordered: true }),
+                        react_1.default.createElement(Button_1.default, { startIcon: react_1.default.createElement(pi_1.PiPlus, null), onClick: function () { return setQuantity(quantity + 1); }, color: "text", small: small }))))), footer: react_1.default.createElement(RowFlex_1.default, { gap: 1, justify: "flex-end", funcss: "funui_products_detail_footer" },
+            react_1.default.createElement(Button_1.default, { text: "Cancel", color: "text", onClick: function () { return setIsOpen(false); }, small: small }),
+            react_1.default.createElement(Button_1.default, { text: "Add to Cart - $".concat(((selectedProduct.price || 0) * quantity).toFixed(2)), bg: "primary", raised: true, startIcon: react_1.default.createElement(pi_1.PiShoppingCart, null), onClick: handleAddFromModal, small: small, big: big })) }));
+});
+ProductDetailModal.displayName = 'ProductDetailModal';
+exports.default = ProductDetailModal;

package/ui/products/Products.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+export type Product = {
+    id: string;
+    name: string;
+    price: number;
+    comparePrice?: number;
+    description?: string;
+    images?: string[];
+    category?: string;
+    brand?: string;
+    tags?: string[];
+    colors?: {
+        name: string;
+        code: string;
+    }[];
+    sku?: string;
+    stock?: number;
+    rating?: number;
+    isNew?: boolean;
+    isSale?: boolean;
+    discountPercentage?: number;
+};
+export type CartItem = {
+    product: Product;
+    quantity: number;
+    selectedColor?: string;
+};
+type ProductsPageProps = {
+    products: Product[] | string;
+    title?: string;
+    showHeader?: boolean;
+    showSearch?: boolean;
+    showFilters?: boolean;
+    showCart?: boolean;
+    cartIcon?: string | React.ReactNode;
+    cartBadgeColor?: string;
+    cartBadgeText?: string;
+    checkoutText?: string;
+    checkoutIcon?: string | React.ReactNode;
+    onAddToCart?: (item: CartItem) => void;
+    onRemoveFromCart?: (itemId: string) => void;
+    onUpdateQuantity?: (itemId: string, quantity: number) => void;
+    onCheckout?: (cartItems: CartItem[], totalAmount: number) => void;
+    onProductClick?: (product: Product) => void;
+    className?: string;
+    gridClassName?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    id?: string;
+    funcss?: string;
+    bg?: string;
+    color?: string;
+    rounded?: boolean;
+    raised?: boolean;
+    fullWidth?: boolean;
+    small?: boolean;
+    big?: boolean;
+};
+declare const Products: React.FC<ProductsPageProps>;
+export default Products;