funuicss 3.8.8 → 3.8.9

package/ui/products/ProductDetail.js

@@ -57,8 +57,6 @@ 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");
@@ -68,8 +66,8 @@ var ProductDetail = function (_a) {
     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 _f = (0, react_1.useState)(false), showFullDescription = _f[0], setShowFullDescription = _f[1];
+    var _g = (0, react_1.useState)(false), canAddToCart = _g[0], setCanAddToCart = _g[1];
     var hasDiscount = product.comparePrice && product.comparePrice > product.price;
     var discountPercent = hasDiscount
         ? Math.round(((product.comparePrice - product.price) / product.comparePrice) * 100)
@@ -83,13 +81,28 @@ var ProductDetail = function (_a) {
         return "".concat(productCurrency).concat(price.toFixed(2));
     };
     var handleAddToCart = function () {
-        onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(product, quantity, {
+        // Always add with quantity 1
+        onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(product, 1, {
             color: selectedColor,
             size: selectedSize,
         });
         setOpen(false);
     };
-    var totalPrice = ((product.price || 0) * quantity).toFixed(2);
+    // Validate if all required selections are made
+    (0, react_1.useEffect)(function () {
+        var isValid = true;
+        // Check if color selection is required and selected
+        if (product.colors && product.colors.length > 0) {
+            isValid = isValid && selectedColor !== '';
+        }
+        // Check if size selection is required and selected
+        if (product.sizes && product.sizes.length > 0) {
+            isValid = isValid && selectedSize !== '';
+        }
+        // Also check stock availability
+        isValid = isValid && stockAvailable;
+        setCanAddToCart(isValid);
+    }, [selectedColor, selectedSize, stockAvailable, product.colors, product.sizes]);
     // Function to safely process description
     var processDescription = function (description) {
         if (!description)
@@ -177,9 +190,11 @@ var ProductDetail = function (_a) {
                         react_1.default.createElement(Text_1.default, { size: 'xs', opacity: 4 },
                             product.stock,
                             " units available"))),
-                    ((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) || (product.sizes && product.sizes.length > 0)) && (react_1.default.createElement(Flex_1.default, { width: '100%', gap: 1, direction: "column" },
                         product.colors && product.colors.length > 0 && (react_1.default.createElement("div", { className: "col" },
-                            react_1.default.createElement(Text_1.default, { size: "sm", weight: 500, funcss: "mb-1" }, "Color"),
+                            react_1.default.createElement(Text_1.default, { size: "sm", weight: 500, funcss: "mb-1" },
+                                "Color",
+                                react_1.default.createElement(Text_1.default, { size: "xs", color: "error", funcss: "margin-left-1" }, "*")),
                             react_1.default.createElement(Select_1.default, { fullWidth: true, options: __spreadArray([
                                     { text: 'Select Color', value: '' }
                                 ], product.colors.map(function (color) { return ({
@@ -192,12 +207,16 @@ var ProductDetail = function (_a) {
                                             backgroundColor: color.code,
                                             border: selectedColor === color.name ? '2px solid var(--primary)' : '1px solid var(--border)'
                                         } }))
-                                }); }), true), value: selectedColor, onChange: function (e) { return setSelectedColor(e); }, bordered: true }))),
+                                }); }), true), value: selectedColor, onChange: function (e) { return setSelectedColor(e); }, bordered: true }),
+                            selectedColor === '' && (react_1.default.createElement(Text_1.default, { size: "xs", color: "error", funcss: "margin-top-1" }, "Please select a color")))),
                         product.sizes && product.sizes.length > 0 && (react_1.default.createElement("div", { className: "col" },
-                            react_1.default.createElement(Text_1.default, { size: "sm", weight: 500, funcss: "mb-1" }, "Size"),
+                            react_1.default.createElement(Text_1.default, { size: "sm", weight: 500, funcss: "mb-1" },
+                                "Size",
+                                react_1.default.createElement(Text_1.default, { size: "xs", color: "error", funcss: "margin-left-1" }, "*")),
                             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 }))))),
+                                ], product.sizes.map(function (size) { return ({ text: size, value: size }); }), true), value: selectedSize, onChange: function (e) { return setSelectedSize(e); }, bordered: true }),
+                            selectedSize === '' && (react_1.default.createElement(Text_1.default, { size: "xs", color: "error", funcss: "margin-top-1" }, "Please select a size")))))),
                     processedDescription && (react_1.default.createElement(Div_1.default, null,
                         react_1.default.createElement(Text_1.default, { text: "Description", size: "lg", weight: 600, funcss: "margin-bottom-1" }),
                         react_1.default.createElement("div", { className: "article text-sm ".concat(hasHTML ? '' : 'whitespace-pre-wrap'), dangerouslySetInnerHTML: { __html: displayDescription } }),
@@ -264,17 +283,6 @@ var ProductDetail = function (_a) {
                                 react_1.default.createElement(Div_1.default, null,
                                     react_1.default.createElement(Text_1.default, { text: "Tags", size: "xs", opacity: 4, block: true }),
                                     react_1.default.createElement(Text_1.default, { text: product.tags.join(', '), size: "sm", block: true, lineHeight: '1', truncate: 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, disabled: !stockAvailable })) }));
+            react_1.default.createElement(Button_1.default, { text: "Add to Cart", startIcon: react_1.default.createElement(pi_1.PiBag, null), bg: "primary", raised: true, onClick: handleAddToCart, disabled: !canAddToCart, funcss: !canAddToCart ? "opacity-6" : "" })) }));
 };
 exports.default = ProductDetail;

package/ui/products/Store.js

@@ -750,16 +750,16 @@ var Store = function (localProps) {
                 maxWidth: "1500px"
             } },
             react_1.default.createElement(Flex_1.default, { width: '100%', justify: 'center', gap: 2 },
-                showFilters && !isMobile && (react_1.default.createElement(View_1.default, { funcss: "w-250" },
-                    react_1.default.createElement(RowFlex_1.default, { justify: "space-between", funcss: 'bb', alignItems: "center" },
+                showFilters && !isMobile && (react_1.default.createElement(View_1.default, { funcss: "w-200" },
+                    react_1.default.createElement(RowFlex_1.default, { justify: "space-between", funcss: 'bb mb', alignItems: "center" },
                         react_1.default.createElement(Text_1.default, { text: "Filters", size: "h5" }),
-                        react_1.default.createElement(Button_1.default, { text: "Clear", onClick: clearFilters, small: true, bg: "transparent", color: "text-light" })),
-                    react_1.default.createElement(Accordion_1.default, { items: filterAccordionItems, allowMultiple: true, titleClass: "text-sm", contentClass: "text-sm" }))),
+                        react_1.default.createElement(Button_1.default, { text: "Clear", onClick: clearFilters, small: true, bg: "lighter", startIcon: react_1.default.createElement(pi_1.PiX, null) })),
+                    react_1.default.createElement(Accordion_1.default, { border: false, funcss: 'bg borderless', items: filterAccordionItems, allowMultiple: true, titleClass: "text-sm", contentClass: "text-sm" }))),
                 react_1.default.createElement("div", { className: 'col fit' },
                     showFilters && isMobile && (react_1.default.createElement(Div_1.default, { funcss: "mobile-filters-button mb-4" },
                         react_1.default.createElement(Button_1.default, { startIcon: react_1.default.createElement(pi_1.PiFunnel, null), text: "Filters", onClick: function () { return setShowMobileFilters(true); }, bg: "light", color: "text", raised: true, funcss: "w-full" }))),
                     react_1.default.createElement(Flex_1.default, { gap: 1, width: '100%', funcss: 'mb-4', justify: 'space-between' },
-                        showSearch && (react_1.default.createElement("div", { className: "w-300" },
+                        showSearch && (react_1.default.createElement("div", { className: "w-400" },
                             react_1.default.createElement(Input_1.default, { label: "Search products...", value: searchQuery, onChange: function (e) { return setSearchQuery(e.target.value); }, startIcon: react_1.default.createElement(pi_1.PiMagnifyingGlass, null), borderless: true }))),
                         showCart && (react_1.default.createElement("button", { onClick: function () { return setIsCartOpen(true); }, className: "cart-icon relative", type: "button", "aria-label": "Shopping cart (".concat(totalItems, " items)"), disabled: showLoading },
                             react_1.default.createElement(sl_1.SlHandbag, { size: 30 }),

package/ui/sidebar/SideBar.js

@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SideBar;
 var react_1 = __importStar(require("react"));
-var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var Text_1 = __importDefault(require("../text/Text"));
 var navigation_1 = require("next/navigation");
 var theme_1 = require("../theme/theme");
@@ -142,7 +141,7 @@ function SideBar(_a) {
                 _b[position] = 0,
                 _b.padding = '1rem',
                 _b) },
-            react_1.default.createElement(RowFlex_1.default, { justify: "space-between", funcss: "pl-2 pr-2" }, header && react_1.default.createElement("div", null, header)),
+            header && react_1.default.createElement("div", null, header),
             react_1.default.createElement("section", { className: "sidebar-body mt-3" },
                 links.length > 0 && (react_1.default.createElement("nav", { className: "sidebar-links" }, isAccordion ? (react_1.default.createElement(Accordion_1.default, { itemClass: accordionItemCss, items: accordionItems, allowMultiple: false, contentClass: "", titleClass: 'text-sm', activeClass: "" })) : (Object.entries(groupedLinks).map(function (_a) {
                     var section = _a[0], sectionLinks = _a[1];

package/ui/specials/CircleGroup.d.ts

@@ -4,6 +4,7 @@ interface AvatarGroupProps {
     size?: number;
     overlap?: number;
     maxVisible?: number;
+    funcss?: string;
 }
-export default function CircleGroup({ avatars, size, overlap, maxVisible, }: AvatarGroupProps): React.JSX.Element;
+export default function CircleGroup({ avatars, size, overlap, maxVisible, funcss, }: AvatarGroupProps): React.JSX.Element;
 export {};

package/ui/specials/CircleGroup.js

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CircleGroup;
 var react_1 = __importDefault(require("react"));
 function CircleGroup(_a) {
-    var avatars = _a.avatars, _b = _a.size, size = _b === void 0 ? 2 : _b, _c = _a.overlap, overlap = _c === void 0 ? 0.8 : _c, _d = _a.maxVisible, maxVisible = _d === void 0 ? avatars.length : _d;
+    var avatars = _a.avatars, _b = _a.size, size = _b === void 0 ? 2 : _b, _c = _a.overlap, overlap = _c === void 0 ? 0.8 : _c, _d = _a.maxVisible, maxVisible = _d === void 0 ? avatars.length : _d, _e = _a.funcss, funcss = _e === void 0 ? '' : _e;
     var displayed = avatars.slice(0, maxVisible);
     var extra = avatars.length - maxVisible;
-    return (react_1.default.createElement("div", { className: "flex", style: { direction: 'ltr' } },
+    return (react_1.default.createElement("div", { className: "flex ".concat(funcss), style: { direction: 'ltr' } },
         displayed.map(function (avatar, i) { return (react_1.default.createElement("div", { key: i, style: {
                 marginLeft: i === 0 ? '0' : "-".concat(overlap, "rem"),
                 zIndex: avatars.length - i,
             } }, react_1.default.cloneElement(avatar, { size: size }))); }),
-        extra > 0 && (react_1.default.createElement("div", { className: "avatar lighter text-small flex ", style: {
+        extra > 0 && (react_1.default.createElement("div", { className: "avatar lighter  flex ", style: {
                 width: "".concat(size, "rem"),
                 height: "".concat(size, "rem"),
                 marginLeft: "-".concat(overlap, "rem"),