pixelize-design-library 2.1.29 → 2.1.31

package/dist/App.js

@@ -35,6 +35,7 @@ var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumb
 var Layout_1 = __importDefault(require("./Layout"));
 var lucide_react_1 = require("lucide-react");
 require("./global.css");
+// import Slider from "./Components/Slider/Slider";
 function App() {
     function useWindowSize() {
         var _a = (0, react_1.useState)({
@@ -64,50 +65,8 @@ function App() {
         console.log("Navigating to ".concat(path));
     };
     var menu = [
-        { id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "dashboard" },
-        { id: 2, title: "Calendar", icon: lucide_react_1.Calendar, url: "calendar" },
-        { id: 3, title: "Reports", icon: lucide_react_1.Calendar, url: "reports" },
-        { id: 4, title: "Settings", icon: lucide_react_1.Calendar, url: "settings" },
-        { id: 5, title: "Users", icon: lucide_react_1.Calendar, url: "users" },
-        {
-            id: 6,
-            title: "Notifications notifications notifications notifications notifications",
-            icon: lucide_react_1.Calendar,
-            url: "notifications",
-        },
-        { id: 7, title: "Analytics", icon: lucide_react_1.Calendar, url: "analytics" },
-        {
-            id: 8,
-            title: "Projects",
-            icon: lucide_react_1.Calendar,
-            url: "projects",
-            subMenu: [
-                {
-                    id: 21,
-                    title: "submenu1hghvhvkhvkhvkhvh",
-                    icon: lucide_react_1.Calendar,
-                    url: "submenu1",
-                },
-                {
-                    id: 22,
-                    title: "submenu2",
-                    icon: lucide_react_1.Calendar,
-                    url: "submenu2",
-                },
-            ],
-        },
-        { id: 9, title: "Tasks", icon: lucide_react_1.Calendar, url: "tasks" },
-        { id: 10, title: "Teams", icon: lucide_react_1.Calendar, url: "teams" },
-        { id: 11, title: "Clients", icon: lucide_react_1.Calendar, url: "clients" },
-        { id: 12, title: "Invoices", icon: lucide_react_1.Calendar, url: "invoices" },
-        { id: 13, title: "Payments", icon: lucide_react_1.Calendar, url: "payments" },
-        { id: 14, title: "Leads", icon: lucide_react_1.Calendar, url: "leads" },
-        { id: 15, title: "Opportunities", icon: lucide_react_1.Calendar, url: "opportunities" },
-        { id: 16, title: "Campaigns", icon: lucide_react_1.Calendar, url: "campaigns" },
-        { id: 17, title: "Documents", icon: lucide_react_1.Calendar, url: "documents" },
-        { id: 18, title: "Files", icon: lucide_react_1.Calendar, url: "files" },
-        { id: 19, title: "Support", icon: lucide_react_1.Calendar, url: "support" },
-        { id: 20, title: "Integrations", icon: lucide_react_1.Calendar, url: "integrations" },
+        { id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "" },
+        { id: 2, title: "AlertDialog", icon: lucide_react_1.Calendar, url: "alertdialog" },
     ];
     var _b = (0, react_1.useState)(true), toggle = _b[0], changeToggle = _b[1];
     var _c = (0, react_1.useState)(""), activeMenu = _c[0], setActiveMenu = _c[1];
@@ -138,7 +97,7 @@ function App() {
             react_1.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
             react_1.default.createElement(react_2.Flex, null,
                 react_1.default.createElement(react_2.Box, null,
-                    react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, 
+                    react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, isLoading: false, 
                         // logo={
                         //   "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo"
                         // }

package/dist/Components/Header/Header.js

@@ -33,23 +33,24 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var desktopMenu_1 = __importDefault(require("./components/desktopMenu"));
 var mobileMenu_1 = __importDefault(require("./components/mobileMenu"));
 var Header = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var logo = _a.logo, menuItems = _a.menuItems, rightSlot = _a.rightSlot, active = _a.active, colors = _a.colors;
-    var _k = (0, react_1.useDisclosure)(), isOpen = _k.isOpen, onOpen = _k.onOpen, onClose = _k.onClose;
-    var _l = (0, react_2.useState)(null), hoveredMenu = _l[0], setHoveredMenu = _l[1];
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var logo = _a.logo, menuItems = _a.menuItems, rightSlot = _a.rightSlot, active = _a.active, colors = _a.colors, boxShadow = _a.boxShadow;
+    var _m = (0, react_1.useDisclosure)(), isOpen = _m.isOpen, onOpen = _m.onOpen, onClose = _m.onClose;
+    var _o = (0, react_2.useState)(null), hoveredMenu = _o[0], setHoveredMenu = _o[1];
     var themeColor = (0, useCustomTheme_1.useCustomTheme)().colors;
     var bg = (_b = colors === null || colors === void 0 ? void 0 : colors.bg) !== null && _b !== void 0 ? _b : (_c = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _c === void 0 ? void 0 : _c[700];
     var color = (_d = colors === null || colors === void 0 ? void 0 : colors.color) !== null && _d !== void 0 ? _d : (_e = themeColor === null || themeColor === void 0 ? void 0 : themeColor.background) === null || _e === void 0 ? void 0 : _e[100];
     var activeBg = (_f = colors === null || colors === void 0 ? void 0 : colors.active) !== null && _f !== void 0 ? _f : (_g = themeColor === null || themeColor === void 0 ? void 0 : themeColor.primary) === null || _g === void 0 ? void 0 : _g[400];
     var hoverBg = (_h = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _h !== void 0 ? _h : (_j = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _j === void 0 ? void 0 : _j[500];
+    var hoverText = (_k = colors === null || colors === void 0 ? void 0 : colors.hoverTextColor) !== null && _k !== void 0 ? _k : (_l = themeColor === null || themeColor === void 0 ? void 0 : themeColor.text) === null || _l === void 0 ? void 0 : _l[600];
     var isActive = function (href) { return href && active === href; };
-    return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", 
+    return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, 
         //   position="sticky"
         //   top="0"
         zIndex: 1000 },
         react_2.default.createElement(react_1.Flex, { h: 16, align: "center", mx: "auto" },
             react_2.default.createElement(react_1.Box, { cursor: "pointer" }, logo),
-            react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlot, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color }),
+            react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlot, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText }),
             react_2.default.createElement(react_1.HStack, { spacing: 4, display: { base: "none", md: "flex" } }, rightSlot),
             react_2.default.createElement(react_1.IconButton, { variant: "unstyled", icon: react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full" }, isOpen ? react_2.default.createElement(lucide_react_1.X, { size: 20 }) : react_2.default.createElement(lucide_react_1.MenuIcon, { size: 20 })), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? onClose : onOpen })),
         react_2.default.createElement(mobileMenu_1.default, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, rightSlot: rightSlot })));

package/dist/Components/Header/HeaderProps.d.ts

@@ -28,7 +28,9 @@ export type HeaderProps = {
         color: string;
         active: string;
         hover: string;
+        hoverTextColor?: string;
     };
+    boxShadow?: string;
 };
 export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
     setHoveredMenu: (menu: string | null) => void;
@@ -37,6 +39,7 @@ export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
     hoveredMenu: string | null;
     hoverBg: string;
     color: string;
+    hoverTextColor?: string;
 };
 export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg'> & {
     isOpen: boolean;

package/dist/Components/Header/components/desktopMenu.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { DesktopMenuProps } from "../HeaderProps";
-declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, }: DesktopMenuProps) => React.JSX.Element;
+declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }: DesktopMenuProps) => React.JSX.Element;
 export default DesktopMenu;

package/dist/Components/Header/components/desktopMenu.js

@@ -8,14 +8,14 @@ var lucide_react_1 = require("lucide-react");
 var react_2 = __importDefault(require("react"));
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var DesktopMenu = function (_a) {
-    var menuItems = _a.menuItems, rightSlot = _a.rightSlot, setHoveredMenu = _a.setHoveredMenu, isActive = _a.isActive, activeBg = _a.activeBg, hoveredMenu = _a.hoveredMenu, hoverBg = _a.hoverBg, color = _a.color;
+    var menuItems = _a.menuItems, rightSlot = _a.rightSlot, setHoveredMenu = _a.setHoveredMenu, isActive = _a.isActive, activeBg = _a.activeBg, hoveredMenu = _a.hoveredMenu, hoverBg = _a.hoverBg, color = _a.color, hoverTextColor = _a.hoverTextColor;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     return (react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0 }, menuItems.map(function (item) {
         var _a, _b, _c, _d;
         var hasChildren = !!item.children;
         var isHovered = hoveredMenu === item.label;
         return (react_2.default.createElement(react_1.Box, { key: item.label, position: "relative", onMouseEnter: function () { return hasChildren && setHoveredMenu(item.label); }, onMouseLeave: function () { return hasChildren && setHoveredMenu(null); } },
-            react_2.default.createElement(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 }) : undefined, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, color: color },
+            react_2.default.createElement(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 }) : undefined, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, color: color },
                 react_2.default.createElement(react_1.VStack, { spacing: 0 },
                     item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label)),
                     react_2.default.createElement(react_1.Text, null, item.label))),
@@ -23,7 +23,7 @@ var DesktopMenu = function (_a) {
                 react_2.default.createElement(react_1.Box, { position: "absolute", top: "100%", bg: colors === null || colors === void 0 ? void 0 : colors.white, color: colors === null || colors === void 0 ? void 0 : colors.black, rounded: "md", shadow: "md", minW: "10rem", zIndex: 10 },
                     react_2.default.createElement(react_1.Stack, { spacing: 1, p: 2 }, (_d = item.children) === null || _d === void 0 ? void 0 : _d.map(function (subItem) {
                         var _a, _b, _c;
-                        return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
+                        return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor } },
                             react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
                                 subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", alignItems: "end" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
                                 react_2.default.createElement(react_1.Text, null, subItem.label))));

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, onAddToCart, bag, description, }: ProductCardProps) => React.JSX.Element;
+declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, onAddToCart, batch, description, }: ProductCardProps) => React.JSX.Element;
 export default ProductCard;

package/dist/Components/ProductCard/ProductCard.js

@@ -33,13 +33,15 @@ var ProductTags_1 = __importDefault(require("./ProductTags"));
 var ProductPrice_1 = __importDefault(require("./ProductPrice"));
 var Button_1 = __importDefault(require("../Button/Button"));
 var ProductLabel_1 = __importDefault(require("./ProductLabel"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var ProductCard = function (_a) {
-    var label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, onAddToCart = _a.onAddToCart, bag = _a.bag, description = _a.description;
+    var label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, onAddToCart = _a.onAddToCart, batch = _a.batch, description = _a.description;
     var _b = (0, react_1.useState)(false), hover = _b[0], setHover = _b[1];
-    return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063 rem", borderRadius: "lg", overflow: "hidden", p: 3, w: "16.25rem", position: "relative", bg: "white", boxShadow: "lg" },
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063 rem", borderRadius: "lg", overflow: "hidden", p: 3, w: "16.25rem", 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: "11.25rem", w: "full", overflow: "hidden" },
             react_1.default.createElement(react_2.Image, { src: hover && productImage.hover ? productImage.hover : productImage.visibile, alt: label, w: "full", h: "full", objectFit: "cover" }),
-            bag && (react_1.default.createElement(react_2.Badge, { colorScheme: bag.color || "red", position: "absolute", top: 2, right: 2 }, bag.label))),
+            batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "red", position: "absolute", top: 2, right: 2 }, batch.label))),
         react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", mt: 3 },
             react_1.default.createElement(ProductLabel_1.default, { label: label, description: description }),
             tags && react_1.default.createElement(ProductTags_1.default, { tags: tags }),

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

@@ -8,7 +8,7 @@ export type ProductCardProps = {
     options?: options[];
     onClick?: () => void;
     onAddToCart?: () => void;
-    bag?: bag;
+    batch?: batch;
 };
 export type options = {
     label: string;
@@ -16,7 +16,7 @@ export type options = {
     price: number;
     offer: number;
 };
-export type bag = {
+export type batch = {
     label: string;
     color?: string;
 };

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

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

package/dist/Components/ProductDetails/ProductDetails.js

@@ -0,0 +1,28 @@
+"use strict";
+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 react_2 = require("@chakra-ui/react");
+var ProductImageSlider_1 = __importDefault(require("./ProductImageSlider"));
+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 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 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 }),
+            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 }),
+            price &&
+                react_1.default.createElement(ProductDtlPrice_1.default, { price: price }))));
+};
+exports.default = ProductDetails;

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

@@ -0,0 +1,22 @@
+import { batch } from "../ProductCard/ProductCardProps";
+export type ProductDetailsProps = {
+    price?: price[];
+    label?: string;
+    shortdesc?: string;
+    tags?: string[];
+    images?: images[];
+    batch?: batch;
+    category?: string;
+};
+export type price = {
+    label: string;
+    weight: number;
+    unit: number;
+    price: number;
+    offer: number;
+};
+export type images = {
+    imageUrl: string;
+    imageId: number;
+    order: number;
+};

package/dist/Components/ProductDetails/ProductDetailsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { price } from "./ProductDetailsProps";
+interface ProductDtlPriceProps {
+    price: price[];
+}
+declare const ProductDtlPrice: ({ price }: ProductDtlPriceProps) => React.JSX.Element;
+export default ProductDtlPrice;

package/dist/Components/ProductDetails/ProductDtlPrice.js

@@ -0,0 +1,56 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ProductDtlPrice = function (_a) {
+    var price = _a.price;
+    var _b = (0, react_1.useState)(0), selectedIndex = _b[0], setSelectedIndex = _b[1];
+    var selected = price[selectedIndex];
+    var originalPrice = selected.price + selected.offer;
+    var discount = Math.round((selected.offer / originalPrice) * 100);
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, p: 4, borderRadius: "md", w: "full" },
+        react_1.default.createElement(react_2.HStack, { spacing: 2, align: "center" },
+            react_1.default.createElement(react_2.Text, { fontSize: "lg", color: theme.colors.gray[500], as: "s" },
+                "\u20B9",
+                originalPrice),
+            react_1.default.createElement(react_2.Text, { fontSize: "xl", color: theme.colors.red[500], fontWeight: "bold" },
+                "\u20B9",
+                selected.price),
+            react_1.default.createElement(react_2.Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5 },
+                "SAVE ",
+                discount,
+                "%")),
+        react_1.default.createElement(react_2.Text, { fontSize: "md", fontWeight: "medium" }, selected.weight),
+        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600] }, "(Incl. of all taxes)"),
+        react_1.default.createElement(react_2.Box, null,
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1 },
+                "Packs : ",
+                selected.label),
+            react_1.default.createElement(react_2.HStack, { spacing: 2 }, price.map(function (pack, idx) { return (react_1.default.createElement(react_2.Button, { key: pack.label, size: "sm", variant: idx === selectedIndex ? "solid" : "outline", colorScheme: idx === selectedIndex ? "blackAlpha" : undefined, onClick: function () { return setSelectedIndex(idx); } }, pack.label)); })))));
+};
+exports.default = ProductDtlPrice;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { images } from "./ProductDetailsProps";
+import { batch } from "../ProductCard/ProductCardProps";
+interface ProductImageSliderProps {
+    images?: images[];
+    thumbHeight?: number;
+    imageSize?: number;
+    thumbnailsToShow?: number;
+    batch?: batch;
+}
+export default function ProductImageSlider({ images, thumbHeight, imageSize, thumbnailsToShow, batch, }: ProductImageSliderProps): React.JSX.Element;
+export {};

package/dist/Components/ProductDetails/ProductImageSlider.js

@@ -0,0 +1,104 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+function ProductImageSlider(_a) {
+    var _b;
+    var images = _a.images, _c = _a.thumbHeight, thumbHeight = _c === void 0 ? 60 : _c, _d = _a.imageSize, imageSize = _d === void 0 ? 480 : _d, _e = _a.thumbnailsToShow, thumbnailsToShow = _e === void 0 ? 6 : _e, batch = _a.batch;
+    var _f = (0, react_2.useState)(0), activeIndex = _f[0], setActiveIndex = _f[1];
+    var _g = (0, react_2.useState)(0), thumbStartIndex = _g[0], setThumbStartIndex = _g[1];
+    var _h = (0, react_2.useState)("center center"), transformOrigin = _h[0], setTransformOrigin = _h[1];
+    var _j = (0, react_2.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
+    var visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
+    var canScrollUp = thumbStartIndex > 0;
+    var canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
+    var handleThumbScroll = function (direction) {
+        if (direction === "up" && canScrollUp) {
+            setThumbStartIndex(function (prev) {
+                var newStart = Math.max(prev - 1, 0);
+                setActiveIndex(newStart);
+                return newStart;
+            });
+        }
+        else if (direction === "down" && canScrollDown) {
+            setThumbStartIndex(function (prev) {
+                var newStart = Math.min(prev + 1, totalThumbs - thumbnailsToShow);
+                setActiveIndex(newStart);
+                return newStart;
+            });
+        }
+    };
+    var updateActiveIndex = function (newIndex) {
+        setActiveIndex(newIndex);
+        // Scroll thumbnails window if active index is outside the current visible range
+        if (newIndex < thumbStartIndex) {
+            setThumbStartIndex(newIndex);
+        }
+        else if (newIndex >= thumbStartIndex + thumbnailsToShow) {
+            setThumbStartIndex(newIndex - thumbnailsToShow + 1);
+        }
+    };
+    return (react_2.default.createElement(react_1.Flex, { maxW: "6xl", mx: "auto", gap: 4 },
+        react_2.default.createElement(react_1.Box, { w: "".concat(thumbHeight, "px"), h: "".concat(thumbHeight * thumbnailsToShow, "px"), display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden" },
+            react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronUp, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Up", onClick: function () { return handleThumbScroll("up"); }, isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }),
+            react_2.default.createElement(react_1.VStack, { spacing: 2, flex: "1", overflow: "hidden" }, visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map(function (src, index) {
+                var actualIndex = thumbStartIndex + index;
+                return (react_2.default.createElement(react_1.Box, { key: actualIndex, w: "".concat(thumbHeight, "px"), h: "".concat(thumbHeight, "px"), borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
+                        ? "0.125rem solid ".concat(theme.colors.gray[500])
+                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s" },
+                    react_2.default.createElement(react_1.Image, { src: src.imageUrl, w: "100%", h: "100%", objectFit: "cover", alt: "Thumb ".concat(actualIndex) })));
+            })),
+            react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: function () { return handleThumbScroll("down"); }, isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })),
+        react_2.default.createElement(react_1.Box, { w: "".concat(imageSize, "px"), h: "".concat(imageSize, "px"), position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: function (e) {
+                var bounds = e.currentTarget.getBoundingClientRect();
+                var x = ((e.clientX - bounds.left) / bounds.width) * 100;
+                var y = ((e.clientY - bounds.top) / bounds.height) * 100;
+                setTransformOrigin("".concat(x, "% ").concat(y, "%"));
+            }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () {
+                setIsHovered(false);
+                setTransformOrigin("center center");
+            } },
+            react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
+                react_2.default.createElement(react_1.Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid" }, batch === null || batch === void 0 ? void 0 : batch.label)),
+            react_2.default.createElement(react_1.Image, { src: (_b = images === null || images === void 0 ? void 0 : images[activeIndex].imageUrl) !== null && _b !== void 0 ? _b : "", w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }),
+            react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: function () {
+                    var _a;
+                    var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
+                    var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
+                    updateActiveIndex(newIndex);
+                }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
+            react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: function () {
+                    var _a;
+                    var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
+                    var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
+                    updateActiveIndex(newIndex);
+                }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }))));
+}
+exports.default = ProductImageSlider;

package/dist/Components/SideBar/SideBar.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { SidebarProps } from "./SideBarProps";
-export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, }: SidebarProps): React.JSX.Element;
+export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, isLoading, }: SidebarProps): React.JSX.Element;

package/dist/Components/SideBar/SideBar.js

@@ -23,7 +23,7 @@ var MenuItems_1 = __importDefault(require("./components/MenuItems"));
 var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
 function Sidebar(_a) {
     var _b;
-    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu;
+    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, isLoading = _a.isLoading;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "4.688rem" : "15.625rem", flexDir: "column", justifyContent: "space-between", background: theme.colors.sidebar.background[500] },
         react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
@@ -34,20 +34,15 @@ function Sidebar(_a) {
                     react_1.default.createElement(defaultLogo_1.default, null)),
                 react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, display: toggle ? "none" : "flex", lineHeight: 2 }, companyName))),
             react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
-            react_1.default.createElement(react_2.Flex
-            // mt={5}
-            , { 
-                // mt={5}
-                flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
-                react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: 'all 0.3s ease' }) },
-                    react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu })),
+            react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
+                react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: 6 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 2 },
+                    react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md", startColor: theme.colors.gray[600], endColor: theme.colors.gray[500] }))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
                 react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
-                !isDisableAddNew && (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", 
-                    // mt="1rem"
-                    cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
+                !isDisableAddNew && (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
+                    react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
                     react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
                         react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
-                    react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New"))),
+                    react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
                 react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: changeToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
                     react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
                     react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse"))))));

package/dist/Components/SideBar/SideBarProps.d.ts

@@ -9,6 +9,7 @@ export type SidebarProps = {
     isDisableAddNew?: boolean;
     onAddNewClick?: () => void;
     selectedSubMenu?: string | null;
+    isLoading?: boolean;
 };
 export type MenuProps = {
     id: string | number;

package/dist/Layout.js

@@ -68,6 +68,7 @@ var fileUpload_1 = require("./Pages/fileUpload");
 var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
 var Slider_1 = __importDefault(require("./Components/Slider/Slider"));
 var contactForm_1 = __importDefault(require("./Pages/contactForm"));
+var productDetailCard_1 = __importDefault(require("./Pages/productDetailCard"));
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
     var navigate = function (path) {
@@ -218,6 +219,8 @@ var Layout = function () {
                     ] }));
             case "/productCard":
                 return react_2.default.createElement(productCaard_1.default, null);
+            case "/productDetails":
+                return react_2.default.createElement(productDetailCard_1.default, null);
             case "/tag":
                 return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", colorScheme: "gray", onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
             case "/":
@@ -225,28 +228,6 @@ var Layout = function () {
         }
     };
     return (react_2.default.createElement("div", null,
-        react_2.default.createElement(Slider_1.default, { images: [
-                {
-                    "id": 5,
-                    "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262240-leaf.jpg",
-                    "order": 1
-                },
-                {
-                    "id": 6,
-                    "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262240-wall1.jpg",
-                    "order": 2
-                },
-                {
-                    "id": 7,
-                    "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262241-wall2.jpg",
-                    "order": 3
-                },
-                {
-                    "id": 8,
-                    "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262241-wall3.jpg",
-                    "order": 4
-                }
-            ] }),
         react_2.default.createElement("nav", null,
             react_2.default.createElement(react_1.HStack, { spacing: 1, flexWrap: "wrap", alignItems: "center" },
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline", size: "xs" }, "Home"),
@@ -288,6 +269,7 @@ var Layout = function () {
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/upload"); }, variant: "outline", size: "xs" }, "File Upload"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/slider"); }, variant: "outline", size: "xs" }, "Slider"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productCard"); }, variant: "outline" }, "Product Card"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productDetails"); }, variant: "outline" }, "Product Detail Card"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/contactForm"); }, variant: "outline" }, "contactForm")),
             react_2.default.createElement("br", null),
             react_2.default.createElement("br", null),

package/dist/Pages/productCaard.js

@@ -24,7 +24,7 @@ var productCaard = function () {
         react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
                 visibile: "https://www.sreeannapoorna.com/cdn/shop/files/80A4644.jpg?v=1752466892&width=1946",
                 hover: "https://www.sreeannapoorna.com/cdn/shop/files/80A4658.jpg?v=1752466430&width=1946",
-            }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, onAddToCart: function () { }, onClick: function () { }, bag: {
+            }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, onAddToCart: function () { }, onClick: function () { }, batch: {
                 label: "Special",
                 color: "red",
             } })));

package/dist/Pages/productDetailCard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ProductDetailCard: () => React.JSX.Element;
+export default ProductDetailCard;

package/dist/Pages/productDetailCard.js

@@ -0,0 +1,57 @@
+"use strict";
+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 ProductDetails_1 = __importDefault(require("../Components/ProductDetails/ProductDetails"));
+var ProductDetailCard = function () {
+    var product = {
+        productId: 34,
+        productType: "1",
+        productName: "Laddu",
+        options: [
+            { label: "100 G", weight: 1, unit: 1, price: 102, offer: 5 },
+            { label: "200 G", weight: 200, unit: 1, price: 250, offer: 50 }
+        ],
+        batch: { label: "Brand New", color: "green" },
+        tags: ["Special", "Diwali", "Diwali2", "Diwali4"],
+        description: "Some sweet laddu new",
+        shortDescription: "Sweet laddu",
+        label: "Laddu",
+        images: [
+            {
+                imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/WhatsAppImage2024-04-05at6.13.05PM.jpg?v=1752067613&width=600",
+                imageId: 40,
+                order: 1
+            },
+            {
+                imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/WhatsApp_Image_2025-08-01_at_13.55.23_fb75636c.jpg?v=1754043053&width=600",
+                imageId: 41,
+                order: 2
+            },
+            {
+                imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/WhatsApp_Image_2025-08-01_at_13.55.18_4b1220aa.jpg?v=1754119798&width=600",
+                imageId: 42,
+                order: 3
+            },
+            {
+                imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/WhatsApp_Image_2025-08-01_at_13.55.20_fb00ea27.jpg?v=1754119798&width=600",
+                imageId: 43,
+                order: 4
+            },
+            {
+                imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/WhatsAppImage2023-06-06at1.04.57PM_2_85be6a79-8f5e-442e-a8d0-f578ab6e6241.jpg?v=1754119798&width=600",
+                imageId: 44,
+                order: 5
+            },
+            {
+                imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/16_483ee84f-f797-414b-b9ec-92a74daabaae.png?v=1754119798&width=600",
+                imageId: 45,
+                order: 6
+            },
+        ]
+    };
+    return (react_1.default.createElement(ProductDetails_1.default, { price: product === null || product === void 0 ? void 0 : product.options, label: product === null || product === void 0 ? void 0 : product.label, shortdesc: product === null || product === void 0 ? void 0 : product.shortDescription, tags: product === null || product === void 0 ? void 0 : product.tags, images: product === null || product === void 0 ? void 0 : product.images, batch: product === null || product === void 0 ? void 0 : product.batch, category: product === null || product === void 0 ? void 0 : product.productType }));
+};
+exports.default = ProductDetailCard;

package/dist/Pages/searchSelect.js

@@ -103,7 +103,9 @@ var SearchSelect = function () {
             }, onSearch: function (query) { return setSearch(query); }, searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {
                 maxChips: 3,
                 onClick: function () { return console.log("chip removed"); },
-            }, isSelectAll: true, pagination: {
+            }, 
+            // isSelectAll
+            pagination: {
                 limit: 50,
                 scrollLoading: paginationLoading,
                 onScroll: function (startIndex, limit, query) { return __awaiter(void 0, void 0, void 0, function () {

package/dist/Theme/Default/palette.js

@@ -302,7 +302,7 @@ var palette = {
     boxShadow: {
         primary: "#9A52E247",
         error: "#F2463A47",
-        default: "",
+        default: "#00000033",
     },
     sidebar: {
         background: {

package/dist/index.d.ts

@@ -51,5 +51,6 @@ import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
 import ProductCard from "./Components/ProductCard/ProductCard";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProductCard, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+import ProductDetails from "./Components/ProductDetails/ProductDetails";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = void 0;
+exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -145,4 +145,6 @@ var table_1 = require("./Utils/table");
 Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return table_1.debounce; } });
 var ProductCard_1 = __importDefault(require("./Components/ProductCard/ProductCard"));
 exports.ProductCard = ProductCard_1.default;
+var ProductDetails_1 = __importDefault(require("./Components/ProductDetails/ProductDetails"));
+exports.ProductDetails = ProductDetails_1.default;
 exports.default = withTheme_1.default;

package/package.json

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