pixelize-design-library 2.2.60 → 2.2.62

package/dist/Components/ProductCard/ProductCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { ProductCardProps } from './ProductCardProps';
-declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, button, batch, description, avalabilitys, onClick, size, }: ProductCardProps) => React.JSX.Element;
+import React from "react";
+import { ProductCardProps } from "./ProductCardProps";
+declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, description, avalabilitys, onAddToCart, onClick, size, }: ProductCardProps) => React.JSX.Element;
 export default ProductCard;

package/dist/Components/ProductCard/ProductCard.js

@@ -36,7 +36,7 @@ var ProductLabel_1 = __importDefault(require("./ProductLabel"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var ProductCard = function (_a) {
     var _b;
-    var label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, button = _a.button, batch = _a.batch, description = _a.description, avalabilitys = _a.avalabilitys, onClick = _a.onClick, _c = _a.size, size = _c === void 0 ? "sm" : _c;
+    var id = _a.id, label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, button = _a.button, batch = _a.batch, description = _a.description, avalabilitys = _a.avalabilitys, onAddToCart = _a.onAddToCart, onClick = _a.onClick, _c = _a.size, size = _c === void 0 ? "sm" : _c;
     var _d = (0, react_1.useState)(false), hover = _d[0], setHover = _d[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var sizeStyles = {
@@ -50,9 +50,7 @@ var ProductCard = function (_a) {
     var safeSize = allowedSizes.includes(size) ? size : "md";
     return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: cardWidth, position: "relative", bg: theme.colors.white, boxShadow: "lg" },
         react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer" },
-            react_1.default.createElement(react_2.Image, { src: hover && productImage.hover
-                    ? productImage.hover
-                    : productImage.visibile, alt: label, w: "full", h: "full" }),
+            react_1.default.createElement(react_2.Image, { src: hover && productImage.hover ? productImage.hover : productImage.visibile, alt: label, w: "full", h: "full" }),
             batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
                     xs: "xs",
                     sm: "sm",
@@ -74,6 +72,7 @@ var ProductCard = function (_a) {
                 react_1.default.createElement(ProductLabel_1.default, { label: label, description: description, size: size })),
             tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: size }),
             options && react_1.default.createElement(ProductPrice_1.default, { options: options, size: size }),
-            (button === null || button === void 0 ? void 0 : button.onClick) && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick }, (_b = button.label) !== null && _b !== void 0 ? _b : "Add to Cart")))));
+            (button === null || button === void 0 ? void 0 : button.onClick) && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick }, (_b = button.label) !== null && _b !== void 0 ? _b : "Add to Cart")),
+            onAddToCart && (react_1.default.createElement(Button_1.default, { width: "100%", borderRadius: "full", onClick: function () { return onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id); }, colorScheme: "orange", size: "sm" }, "Add to Cart")))));
 };
 exports.default = ProductCard;

package/dist/Components/ProductCard/ProductCardProps.d.ts

@@ -1,5 +1,6 @@
-export type SizeType = 'xs' | 'sm' | 'md' | 'lg';
+export type SizeType = "xs" | "sm" | "md" | "lg";
 export type ProductCardProps = {
+    id: string | number;
     label: string;
     description?: string;
     productImage: productImage;
@@ -12,7 +13,7 @@ export type ProductCardProps = {
         label: string;
         onClick: () => void;
     };
-    onAddToCart?: () => void;
+    onAddToCart?: (id: string | number) => void;
     batch?: batch;
     size?: SizeType;
     avalabilitys?: boolean;

package/dist/Components/ProductDetails/ProductDetails.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ProductDetailsProps } from "./ProductDetailsProps";
-declare const ProductDetails: ({ price, label, shortdesc, tags, images, batch, category }: ProductDetailsProps) => React.JSX.Element;
+declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, }: ProductDetailsProps) => React.JSX.Element;
 export default ProductDetails;

package/dist/Components/ProductDetails/ProductDetails.js

@@ -10,19 +10,19 @@ var ProductLabel_1 = __importDefault(require("../ProductCard/ProductLabel"));
 var ProductTags_1 = __importDefault(require("../ProductCard/ProductTags"));
 var ProductDtlPrice_1 = __importDefault(require("./ProductDtlPrice"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var lucide_react_1 = require("lucide-react");
 var ProductDetails = function (_a) {
-    var price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category;
+    var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5 },
         react_1.default.createElement(react_2.Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: "31.25rem" },
             react_1.default.createElement(ProductImageSlider_1.default, { images: images, thumbHeight: 80, imageSize: 480, batch: batch })),
         react_1.default.createElement(react_2.Box, { flex: "1" },
-            label &&
-                react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
+            label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
             react_1.default.createElement(react_2.Text, { fontSize: "md", color: theme.colors.gray[700], my: 3 }, shortdesc),
-            tags &&
-                react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
-            price &&
-                react_1.default.createElement(ProductDtlPrice_1.default, { price: price }))));
+            tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
+            price && react_1.default.createElement(ProductDtlPrice_1.default, { price: price }),
+            react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "orange", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, width: "full", onClick: function () { return onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id); } }, "Add to cart"))));
 };
 exports.default = ProductDetails;

package/dist/Components/ProductDetails/ProductDetailsProps.d.ts

@@ -1,5 +1,6 @@
 import { batch } from "../ProductCard/ProductCardProps";
 export type ProductDetailsProps = {
+    id: string | number;
     price?: price[];
     label?: string;
     shortdesc?: string;
@@ -7,6 +8,7 @@ export type ProductDetailsProps = {
     images?: images[];
     batch?: batch;
     category?: string;
+    onAddToCart?: (id: string | number) => void;
 };
 export type price = {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.60",
+  "version": "2.2.62",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",