pixelize-design-library 2.1.28 → 2.1.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/App.js +4 -45
  2. package/dist/Components/Header/Header.js +12 -6
  3. package/dist/Components/Header/HeaderProps.d.ts +3 -0
  4. package/dist/Components/Header/components/desktopMenu.d.ts +1 -1
  5. package/dist/Components/Header/components/desktopMenu.js +2 -2
  6. package/dist/Components/ProductCard/ProductCard.d.ts +1 -1
  7. package/dist/Components/ProductCard/ProductCard.js +5 -3
  8. package/dist/Components/ProductCard/ProductCardProps.d.ts +2 -2
  9. package/dist/Components/ProductDetails/ProductDetails.d.ts +4 -0
  10. package/dist/Components/ProductDetails/ProductDetails.js +28 -0
  11. package/dist/Components/ProductDetails/ProductDetailsProps.d.ts +22 -0
  12. package/dist/Components/ProductDetails/ProductDetailsProps.js +2 -0
  13. package/dist/Components/ProductDetails/ProductDtlPrice.d.ts +7 -0
  14. package/dist/Components/ProductDetails/ProductDtlPrice.js +56 -0
  15. package/dist/Components/ProductDetails/ProductImageSlider.d.ts +12 -0
  16. package/dist/Components/ProductDetails/ProductImageSlider.js +104 -0
  17. package/dist/Components/Select/Select.js +1 -1
  18. package/dist/Components/SideBar/SideBar.d.ts +1 -1
  19. package/dist/Components/SideBar/SideBar.js +7 -12
  20. package/dist/Components/SideBar/SideBarProps.d.ts +1 -0
  21. package/dist/Layout.js +4 -22
  22. package/dist/Pages/productCaard.js +1 -1
  23. package/dist/Pages/productDetailCard.d.ts +3 -0
  24. package/dist/Pages/productDetailCard.js +57 -0
  25. package/dist/Pages/searchSelect.js +3 -1
  26. package/dist/Pages/select.js +1 -1
  27. package/dist/Theme/Default/palette.js +1 -1
  28. package/dist/index.d.ts +2 -1
  29. package/dist/index.js +4 -2
  30. package/package.json +1 -1
package/dist/App.js CHANGED
@@ -35,6 +35,7 @@ var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumb
35
35
  var Layout_1 = __importDefault(require("./Layout"));
36
36
  var lucide_react_1 = require("lucide-react");
37
37
  require("./global.css");
38
+ // import Slider from "./Components/Slider/Slider";
38
39
  function App() {
39
40
  function useWindowSize() {
40
41
  var _a = (0, react_1.useState)({
@@ -64,50 +65,8 @@ function App() {
64
65
  console.log("Navigating to ".concat(path));
65
66
  };
66
67
  var menu = [
67
- { id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "dashboard" },
68
- { id: 2, title: "Calendar", icon: lucide_react_1.Calendar, url: "calendar" },
69
- { id: 3, title: "Reports", icon: lucide_react_1.Calendar, url: "reports" },
70
- { id: 4, title: "Settings", icon: lucide_react_1.Calendar, url: "settings" },
71
- { id: 5, title: "Users", icon: lucide_react_1.Calendar, url: "users" },
72
- {
73
- id: 6,
74
- title: "Notifications notifications notifications notifications notifications",
75
- icon: lucide_react_1.Calendar,
76
- url: "notifications",
77
- },
78
- { id: 7, title: "Analytics", icon: lucide_react_1.Calendar, url: "analytics" },
79
- {
80
- id: 8,
81
- title: "Projects",
82
- icon: lucide_react_1.Calendar,
83
- url: "projects",
84
- subMenu: [
85
- {
86
- id: 21,
87
- title: "submenu1hghvhvkhvkhvkhvh",
88
- icon: lucide_react_1.Calendar,
89
- url: "submenu1",
90
- },
91
- {
92
- id: 22,
93
- title: "submenu2",
94
- icon: lucide_react_1.Calendar,
95
- url: "submenu2",
96
- },
97
- ],
98
- },
99
- { id: 9, title: "Tasks", icon: lucide_react_1.Calendar, url: "tasks" },
100
- { id: 10, title: "Teams", icon: lucide_react_1.Calendar, url: "teams" },
101
- { id: 11, title: "Clients", icon: lucide_react_1.Calendar, url: "clients" },
102
- { id: 12, title: "Invoices", icon: lucide_react_1.Calendar, url: "invoices" },
103
- { id: 13, title: "Payments", icon: lucide_react_1.Calendar, url: "payments" },
104
- { id: 14, title: "Leads", icon: lucide_react_1.Calendar, url: "leads" },
105
- { id: 15, title: "Opportunities", icon: lucide_react_1.Calendar, url: "opportunities" },
106
- { id: 16, title: "Campaigns", icon: lucide_react_1.Calendar, url: "campaigns" },
107
- { id: 17, title: "Documents", icon: lucide_react_1.Calendar, url: "documents" },
108
- { id: 18, title: "Files", icon: lucide_react_1.Calendar, url: "files" },
109
- { id: 19, title: "Support", icon: lucide_react_1.Calendar, url: "support" },
110
- { id: 20, title: "Integrations", icon: lucide_react_1.Calendar, url: "integrations" },
68
+ { id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "" },
69
+ { id: 2, title: "AlertDialog", icon: lucide_react_1.Calendar, url: "alertdialog" },
111
70
  ];
112
71
  var _b = (0, react_1.useState)(true), toggle = _b[0], changeToggle = _b[1];
113
72
  var _c = (0, react_1.useState)(""), activeMenu = _c[0], setActiveMenu = _c[1];
@@ -138,7 +97,7 @@ function App() {
138
97
  react_1.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
139
98
  react_1.default.createElement(react_2.Flex, null,
140
99
  react_1.default.createElement(react_2.Box, null,
141
- react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); },
100
+ react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, isLoading: false,
142
101
  // logo={
143
102
  // "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo"
144
103
  // }
package/dist/Components/Header/Header.js CHANGED
@@ -33,23 +33,29 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
33
33
  var desktopMenu_1 = __importDefault(require("./components/desktopMenu"));
34
34
  var mobileMenu_1 = __importDefault(require("./components/mobileMenu"));
35
35
  var Header = function (_a) {
36
- var _b, _c, _d, _e, _f, _g, _h, _j;
37
- var logo = _a.logo, menuItems = _a.menuItems, rightSlot = _a.rightSlot, active = _a.active, colors = _a.colors;
38
- var _k = (0, react_1.useDisclosure)(), isOpen = _k.isOpen, onOpen = _k.onOpen, onClose = _k.onClose;
39
- var _l = (0, react_2.useState)(null), hoveredMenu = _l[0], setHoveredMenu = _l[1];
36
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
37
+ var logo = _a.logo, menuItems = _a.menuItems, rightSlot = _a.rightSlot, active = _a.active, colors = _a.colors, boxShadow = _a.boxShadow;
38
+ var _m = (0, react_1.useDisclosure)(), isOpen = _m.isOpen, onOpen = _m.onOpen, onClose = _m.onClose;
39
+ var _o = (0, react_2.useState)(null), hoveredMenu = _o[0], setHoveredMenu = _o[1];
40
40
  var themeColor = (0, useCustomTheme_1.useCustomTheme)().colors;
41
41
  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];
42
42
  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];
43
43
  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];
44
44
  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];
45
+ 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];
45
46
  var isActive = function (href) { return href && active === href; };
46
- return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md",
47
+ console.log(themeColor, "themeColor?.boxShadow.default");
48
+ return (react_2.default.createElement(react_1.Box
49
+ // bg={bg}
50
+ , {
51
+ // bg={bg}
52
+ color: color, px: 4, shadow: "md", boxShadow: boxShadow,
47
53
  // position="sticky"
48
54
  // top="0"
49
55
  zIndex: 1000 },
50
56
  react_2.default.createElement(react_1.Flex, { h: 16, align: "center", mx: "auto" },
51
57
  react_2.default.createElement(react_1.Box, { cursor: "pointer" }, logo),
52
- react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlot, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color }),
58
+ 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 }),
53
59
  react_2.default.createElement(react_1.HStack, { spacing: 4, display: { base: "none", md: "flex" } }, rightSlot),
54
60
  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 })),
55
61
  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 CHANGED
@@ -28,7 +28,9 @@ export type HeaderProps = {
28
28
  color: string;
29
29
  active: string;
30
30
  hover: string;
31
+ hoverTextColor?: string;
31
32
  };
33
+ boxShadow?: string;
32
34
  };
33
35
  export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
34
36
  setHoveredMenu: (menu: string | null) => void;
@@ -37,6 +39,7 @@ export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
37
39
  hoveredMenu: string | null;
38
40
  hoverBg: string;
39
41
  color: string;
42
+ hoverTextColor?: string;
40
43
  };
41
44
  export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg'> & {
42
45
  isOpen: boolean;
package/dist/Components/Header/components/desktopMenu.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { DesktopMenuProps } from "../HeaderProps";
3
- declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, }: DesktopMenuProps) => React.JSX.Element;
3
+ declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }: DesktopMenuProps) => React.JSX.Element;
4
4
  export default DesktopMenu;
package/dist/Components/Header/components/desktopMenu.js CHANGED
@@ -8,14 +8,14 @@ var lucide_react_1 = require("lucide-react");
8
8
  var react_2 = __importDefault(require("react"));
9
9
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
10
10
  var DesktopMenu = function (_a) {
11
- 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;
11
+ 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;
12
12
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
13
13
  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) {
14
14
  var _a, _b, _c, _d;
15
15
  var hasChildren = !!item.children;
16
16
  var isHovered = hoveredMenu === item.label;
17
17
  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); } },
18
- 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 },
18
+ 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 },
19
19
  react_2.default.createElement(react_1.VStack, { spacing: 0 },
20
20
  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)),
21
21
  react_2.default.createElement(react_1.Text, null, item.label))),
package/dist/Components/ProductCard/ProductCard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { ProductCardProps } from './ProductCardProps';
3
- declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, onAddToCart, bag, description, }: ProductCardProps) => React.JSX.Element;
3
+ declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, onAddToCart, batch, description, }: ProductCardProps) => React.JSX.Element;
4
4
  export default ProductCard;
package/dist/Components/ProductCard/ProductCard.js CHANGED
@@ -33,13 +33,15 @@ var ProductTags_1 = __importDefault(require("./ProductTags"));
33
33
  var ProductPrice_1 = __importDefault(require("./ProductPrice"));
34
34
  var Button_1 = __importDefault(require("../Button/Button"));
35
35
  var ProductLabel_1 = __importDefault(require("./ProductLabel"));
36
+ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
36
37
  var ProductCard = function (_a) {
37
- 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;
38
+ 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;
38
39
  var _b = (0, react_1.useState)(false), hover = _b[0], setHover = _b[1];
39
- 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" },
40
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
41
+ 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" },
40
42
  react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: "11.25rem", w: "full", overflow: "hidden" },
41
43
  react_1.default.createElement(react_2.Image, { src: hover && productImage.hover ? productImage.hover : productImage.visibile, alt: label, w: "full", h: "full", objectFit: "cover" }),
42
- bag && (react_1.default.createElement(react_2.Badge, { colorScheme: bag.color || "red", position: "absolute", top: 2, right: 2 }, bag.label))),
44
+ batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "red", position: "absolute", top: 2, right: 2 }, batch.label))),
43
45
  react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", mt: 3 },
44
46
  react_1.default.createElement(ProductLabel_1.default, { label: label, description: description }),
45
47
  tags && react_1.default.createElement(ProductTags_1.default, { tags: tags }),
package/dist/Components/ProductCard/ProductCardProps.d.ts CHANGED
@@ -8,7 +8,7 @@ export type ProductCardProps = {
8
8
  options?: options[];
9
9
  onClick?: () => void;
10
10
  onAddToCart?: () => void;
11
- bag?: bag;
11
+ batch?: batch;
12
12
  };
13
13
  export type options = {
14
14
  label: string;
@@ -16,7 +16,7 @@ export type options = {
16
16
  price: number;
17
17
  offer: number;
18
18
  };
19
- export type bag = {
19
+ export type batch = {
20
20
  label: string;
21
21
  color?: string;
22
22
  };
package/dist/Components/ProductDetails/ProductDetails.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { ProductDetailsProps } from "./ProductDetailsProps";
3
+ declare const ProductDetails: ({ price, label, shortdesc, tags, images, batch, category }: ProductDetailsProps) => React.JSX.Element;
4
+ export default ProductDetails;
package/dist/Components/ProductDetails/ProductDetails.js ADDED
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var react_1 = __importDefault(require("react"));
7
+ var react_2 = require("@chakra-ui/react");
8
+ var ProductImageSlider_1 = __importDefault(require("./ProductImageSlider"));
9
+ var ProductLabel_1 = __importDefault(require("../ProductCard/ProductLabel"));
10
+ var ProductTags_1 = __importDefault(require("../ProductCard/ProductTags"));
11
+ var ProductDtlPrice_1 = __importDefault(require("./ProductDtlPrice"));
12
+ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
13
+ var ProductDetails = function (_a) {
14
+ var price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category;
15
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
16
+ return (react_1.default.createElement(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5 },
17
+ react_1.default.createElement(react_2.Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: "31.25rem" },
18
+ react_1.default.createElement(ProductImageSlider_1.default, { images: images, thumbHeight: 80, imageSize: 480, batch: batch })),
19
+ react_1.default.createElement(react_2.Box, { flex: "1" },
20
+ label &&
21
+ react_1.default.createElement(ProductLabel_1.default, { label: label }),
22
+ react_1.default.createElement(react_2.Text, { fontSize: "md", color: theme.colors.gray[700], my: 3 }, shortdesc),
23
+ tags &&
24
+ react_1.default.createElement(ProductTags_1.default, { tags: tags }),
25
+ price &&
26
+ react_1.default.createElement(ProductDtlPrice_1.default, { price: price }))));
27
+ };
28
+ exports.default = ProductDetails;
package/dist/Components/ProductDetails/ProductDetailsProps.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { batch } from "../ProductCard/ProductCardProps";
2
+ export type ProductDetailsProps = {
3
+ price?: price[];
4
+ label?: string;
5
+ shortdesc?: string;
6
+ tags?: string[];
7
+ images?: images[];
8
+ batch?: batch;
9
+ category?: string;
10
+ };
11
+ export type price = {
12
+ label: string;
13
+ weight: number;
14
+ unit: number;
15
+ price: number;
16
+ offer: number;
17
+ };
18
+ export type images = {
19
+ imageUrl: string;
20
+ imageId: number;
21
+ order: number;
22
+ };
package/dist/Components/ProductDetails/ProductDetailsProps.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
package/dist/Components/ProductDetails/ProductDtlPrice.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ import { price } from "./ProductDetailsProps";
3
+ interface ProductDtlPriceProps {
4
+ price: price[];
5
+ }
6
+ declare const ProductDtlPrice: ({ price }: ProductDtlPriceProps) => React.JSX.Element;
7
+ export default ProductDtlPrice;
package/dist/Components/ProductDetails/ProductDtlPrice.js ADDED
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ var react_1 = __importStar(require("react"));
27
+ var react_2 = require("@chakra-ui/react");
28
+ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
29
+ var ProductDtlPrice = function (_a) {
30
+ var price = _a.price;
31
+ var _b = (0, react_1.useState)(0), selectedIndex = _b[0], setSelectedIndex = _b[1];
32
+ var selected = price[selectedIndex];
33
+ var originalPrice = selected.price + selected.offer;
34
+ var discount = Math.round((selected.offer / originalPrice) * 100);
35
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
36
+ return (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, p: 4, borderRadius: "md", w: "full" },
37
+ react_1.default.createElement(react_2.HStack, { spacing: 2, align: "center" },
38
+ react_1.default.createElement(react_2.Text, { fontSize: "lg", color: theme.colors.gray[500], as: "s" },
39
+ "\u20B9",
40
+ originalPrice),
41
+ react_1.default.createElement(react_2.Text, { fontSize: "xl", color: theme.colors.red[500], fontWeight: "bold" },
42
+ "\u20B9",
43
+ selected.price),
44
+ react_1.default.createElement(react_2.Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5 },
45
+ "SAVE ",
46
+ discount,
47
+ "%")),
48
+ react_1.default.createElement(react_2.Text, { fontSize: "md", fontWeight: "medium" }, selected.weight),
49
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600] }, "(Incl. of all taxes)"),
50
+ react_1.default.createElement(react_2.Box, null,
51
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1 },
52
+ "Packs : ",
53
+ selected.label),
54
+ 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)); })))));
55
+ };
56
+ exports.default = ProductDtlPrice;
package/dist/Components/ProductDetails/ProductImageSlider.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import React from "react";
2
+ import { images } from "./ProductDetailsProps";
3
+ import { batch } from "../ProductCard/ProductCardProps";
4
+ interface ProductImageSliderProps {
5
+ images?: images[];
6
+ thumbHeight?: number;
7
+ imageSize?: number;
8
+ thumbnailsToShow?: number;
9
+ batch?: batch;
10
+ }
11
+ export default function ProductImageSlider({ images, thumbHeight, imageSize, thumbnailsToShow, batch, }: ProductImageSliderProps): React.JSX.Element;
12
+ export {};
package/dist/Components/ProductDetails/ProductImageSlider.js ADDED
@@ -0,0 +1,104 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ var react_1 = require("@chakra-ui/react");
27
+ var react_2 = __importStar(require("react"));
28
+ var lucide_react_1 = require("lucide-react");
29
+ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
30
+ function ProductImageSlider(_a) {
31
+ var _b;
32
+ 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;
33
+ var _f = (0, react_2.useState)(0), activeIndex = _f[0], setActiveIndex = _f[1];
34
+ var _g = (0, react_2.useState)(0), thumbStartIndex = _g[0], setThumbStartIndex = _g[1];
35
+ var _h = (0, react_2.useState)("center center"), transformOrigin = _h[0], setTransformOrigin = _h[1];
36
+ var _j = (0, react_2.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
37
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
38
+ var totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
39
+ var visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
40
+ var canScrollUp = thumbStartIndex > 0;
41
+ var canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
42
+ var handleThumbScroll = function (direction) {
43
+ if (direction === "up" && canScrollUp) {
44
+ setThumbStartIndex(function (prev) {
45
+ var newStart = Math.max(prev - 1, 0);
46
+ setActiveIndex(newStart);
47
+ return newStart;
48
+ });
49
+ }
50
+ else if (direction === "down" && canScrollDown) {
51
+ setThumbStartIndex(function (prev) {
52
+ var newStart = Math.min(prev + 1, totalThumbs - thumbnailsToShow);
53
+ setActiveIndex(newStart);
54
+ return newStart;
55
+ });
56
+ }
57
+ };
58
+ var updateActiveIndex = function (newIndex) {
59
+ setActiveIndex(newIndex);
60
+ // Scroll thumbnails window if active index is outside the current visible range
61
+ if (newIndex < thumbStartIndex) {
62
+ setThumbStartIndex(newIndex);
63
+ }
64
+ else if (newIndex >= thumbStartIndex + thumbnailsToShow) {
65
+ setThumbStartIndex(newIndex - thumbnailsToShow + 1);
66
+ }
67
+ };
68
+ return (react_2.default.createElement(react_1.Flex, { maxW: "6xl", mx: "auto", gap: 4 },
69
+ 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" },
70
+ 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 }),
71
+ 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) {
72
+ var actualIndex = thumbStartIndex + index;
73
+ 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
74
+ ? "0.125rem solid ".concat(theme.colors.gray[500])
75
+ : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s" },
76
+ react_2.default.createElement(react_1.Image, { src: src.imageUrl, w: "100%", h: "100%", objectFit: "cover", alt: "Thumb ".concat(actualIndex) })));
77
+ })),
78
+ 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 })),
79
+ 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) {
80
+ var bounds = e.currentTarget.getBoundingClientRect();
81
+ var x = ((e.clientX - bounds.left) / bounds.width) * 100;
82
+ var y = ((e.clientY - bounds.top) / bounds.height) * 100;
83
+ setTransformOrigin("".concat(x, "% ").concat(y, "%"));
84
+ }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () {
85
+ setIsHovered(false);
86
+ setTransformOrigin("center center");
87
+ } },
88
+ react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
89
+ 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)),
90
+ 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" }),
91
+ 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 () {
92
+ var _a;
93
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
94
+ var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
95
+ updateActiveIndex(newIndex);
96
+ }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
97
+ 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 () {
98
+ var _a;
99
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
100
+ var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
101
+ updateActiveIndex(newIndex);
102
+ }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }))));
103
+ }
104
+ exports.default = ProductImageSlider;
package/dist/Components/Select/Select.js CHANGED
@@ -32,7 +32,7 @@ var FormLabel_1 = require("../Common/FormLabel");
32
32
  var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
33
33
  var HelperText_1 = __importDefault(require("../Common/HelperText"));
34
34
  function Select(_a) {
35
- var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, _j = _a.height, height = _j === void 0 ? "2.75rem" : _j, formControlStyle = _a.formControlStyle, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
35
+ var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? "31.25rem" : _h, _j = _a.height, height = _j === void 0 ? "2.75rem" : _j, formControlStyle = _a.formControlStyle, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
36
36
  var getOptionsList = (0, react_1.useCallback)(function () {
37
37
  if (!options.length)
38
38
  return react_1.default.createElement("option", { value: "" }, "No Options");
package/dist/Components/SideBar/SideBar.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { SidebarProps } from "./SideBarProps";
3
- export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, }: SidebarProps): React.JSX.Element;
3
+ 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 CHANGED
@@ -23,7 +23,7 @@ var MenuItems_1 = __importDefault(require("./components/MenuItems"));
23
23
  var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
24
24
  function Sidebar(_a) {
25
25
  var _b;
26
- 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;
26
+ 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;
27
27
  var theme = (0, useCustomTheme_1.useCustomTheme)();
28
28
  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] },
29
29
  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) {
34
34
  react_1.default.createElement(defaultLogo_1.default, null)),
35
35
  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))),
36
36
  react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
37
- react_1.default.createElement(react_2.Flex
38
- // mt={5}
39
- , {
40
- // mt={5}
41
- flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
42
- 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' }) },
43
- react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu })),
37
+ 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" },
38
+ 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 },
39
+ 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 }))),
44
40
  react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
45
- !isDisableAddNew && (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem",
46
- // mt="1rem"
47
- cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
41
+ !isDisableAddNew && (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
42
+ 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 },
48
43
  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" },
49
44
  react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
50
- react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New"))),
45
+ react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
51
46
  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] },
52
47
  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 }))),
53
48
  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 CHANGED
@@ -9,6 +9,7 @@ export type SidebarProps = {
9
9
  isDisableAddNew?: boolean;
10
10
  onAddNewClick?: () => void;
11
11
  selectedSubMenu?: string | null;
12
+ isLoading?: boolean;
12
13
  };
13
14
  export type MenuProps = {
14
15
  id: string | number;
package/dist/Layout.js CHANGED
@@ -68,6 +68,7 @@ var fileUpload_1 = require("./Pages/fileUpload");
68
68
  var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
69
69
  var Slider_1 = __importDefault(require("./Components/Slider/Slider"));
70
70
  var contactForm_1 = __importDefault(require("./Pages/contactForm"));
71
+ var productDetailCard_1 = __importDefault(require("./Pages/productDetailCard"));
71
72
  var Layout = function () {
72
73
  var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
73
74
  var navigate = function (path) {
@@ -218,6 +219,8 @@ var Layout = function () {
218
219
  ] }));
219
220
  case "/productCard":
220
221
  return react_2.default.createElement(productCaard_1.default, null);
222
+ case "/productDetails":
223
+ return react_2.default.createElement(productDetailCard_1.default, null);
221
224
  case "/tag":
222
225
  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"); } }));
223
226
  case "/":
@@ -225,28 +228,6 @@ var Layout = function () {
225
228
  }
226
229
  };
227
230
  return (react_2.default.createElement("div", null,
228
- react_2.default.createElement(Slider_1.default, { images: [
229
- {
230
- "id": 5,
231
- "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262240-leaf.jpg",
232
- "order": 1
233
- },
234
- {
235
- "id": 6,
236
- "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262240-wall1.jpg",
237
- "order": 2
238
- },
239
- {
240
- "id": 7,
241
- "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262241-wall2.jpg",
242
- "order": 3
243
- },
244
- {
245
- "id": 8,
246
- "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262241-wall3.jpg",
247
- "order": 4
248
- }
249
- ] }),
250
231
  react_2.default.createElement("nav", null,
251
232
  react_2.default.createElement(react_1.HStack, { spacing: 1, flexWrap: "wrap", alignItems: "center" },
252
233
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline", size: "xs" }, "Home"),
@@ -288,6 +269,7 @@ var Layout = function () {
288
269
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/upload"); }, variant: "outline", size: "xs" }, "File Upload"),
289
270
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/slider"); }, variant: "outline", size: "xs" }, "Slider"),
290
271
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productCard"); }, variant: "outline" }, "Product Card"),
272
+ react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productDetails"); }, variant: "outline" }, "Product Detail Card"),
291
273
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/contactForm"); }, variant: "outline" }, "contactForm")),
292
274
  react_2.default.createElement("br", null),
293
275
  react_2.default.createElement("br", null),
package/dist/Pages/productCaard.js CHANGED
@@ -24,7 +24,7 @@ var productCaard = function () {
24
24
  react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
25
25
  visibile: "https://www.sreeannapoorna.com/cdn/shop/files/80A4644.jpg?v=1752466892&width=1946",
26
26
  hover: "https://www.sreeannapoorna.com/cdn/shop/files/80A4658.jpg?v=1752466430&width=1946",
27
- }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, onAddToCart: function () { }, onClick: function () { }, bag: {
27
+ }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, onAddToCart: function () { }, onClick: function () { }, batch: {
28
28
  label: "Special",
29
29
  color: "red",
30
30
  } })));
package/dist/Pages/productDetailCard.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const ProductDetailCard: () => React.JSX.Element;
3
+ export default ProductDetailCard;
package/dist/Pages/productDetailCard.js ADDED
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var react_1 = __importDefault(require("react"));
7
+ var ProductDetails_1 = __importDefault(require("../Components/ProductDetails/ProductDetails"));
8
+ var ProductDetailCard = function () {
9
+ var product = {
10
+ productId: 34,
11
+ productType: "1",
12
+ productName: "Laddu",
13
+ options: [
14
+ { label: "100 G", weight: 1, unit: 1, price: 102, offer: 5 },
15
+ { label: "200 G", weight: 200, unit: 1, price: 250, offer: 50 }
16
+ ],
17
+ batch: { label: "Brand New", color: "green" },
18
+ tags: ["Special", "Diwali", "Diwali2", "Diwali4"],
19
+ description: "Some sweet laddu new",
20
+ shortDescription: "Sweet laddu",
21
+ label: "Laddu",
22
+ images: [
23
+ {
24
+ imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/WhatsAppImage2024-04-05at6.13.05PM.jpg?v=1752067613&width=600",
25
+ imageId: 40,
26
+ order: 1
27
+ },
28
+ {
29
+ imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/WhatsApp_Image_2025-08-01_at_13.55.23_fb75636c.jpg?v=1754043053&width=600",
30
+ imageId: 41,
31
+ order: 2
32
+ },
33
+ {
34
+ imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/WhatsApp_Image_2025-08-01_at_13.55.18_4b1220aa.jpg?v=1754119798&width=600",
35
+ imageId: 42,
36
+ order: 3
37
+ },
38
+ {
39
+ imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/WhatsApp_Image_2025-08-01_at_13.55.20_fb00ea27.jpg?v=1754119798&width=600",
40
+ imageId: 43,
41
+ order: 4
42
+ },
43
+ {
44
+ imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/WhatsAppImage2023-06-06at1.04.57PM_2_85be6a79-8f5e-442e-a8d0-f578ab6e6241.jpg?v=1754119798&width=600",
45
+ imageId: 44,
46
+ order: 5
47
+ },
48
+ {
49
+ imageUrl: "https://sweetkaramcoffee.in/cdn/shop/files/16_483ee84f-f797-414b-b9ec-92a74daabaae.png?v=1754119798&width=600",
50
+ imageId: 45,
51
+ order: 6
52
+ },
53
+ ]
54
+ };
55
+ 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 }));
56
+ };
57
+ exports.default = ProductDetailCard;
package/dist/Pages/searchSelect.js CHANGED
@@ -103,7 +103,9 @@ var SearchSelect = function () {
103
103
  }, onSearch: function (query) { return setSearch(query); }, searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {
104
104
  maxChips: 3,
105
105
  onClick: function () { return console.log("chip removed"); },
106
- }, isSelectAll: true, pagination: {
106
+ },
107
+ // isSelectAll
108
+ pagination: {
107
109
  limit: 50,
108
110
  scrollLoading: paginationLoading,
109
111
  onScroll: function (startIndex, limit, query) { return __awaiter(void 0, void 0, void 0, function () {
package/dist/Pages/select.js CHANGED
@@ -38,6 +38,6 @@ var SelectPage = function () {
38
38
  react_1.default.createElement(Select_1.default, { options: [
39
39
  { id: 1, label: "magesssssss" },
40
40
  { id: 2, label: "sjdfg" },
41
- ], onChange: handleOnChange, value: selected })));
41
+ ], onChange: handleOnChange, value: selected, width: 200 })));
42
42
  };
43
43
  exports.default = SelectPage;
package/dist/Theme/Default/palette.js CHANGED
@@ -302,7 +302,7 @@ var palette = {
302
302
  boxShadow: {
303
303
  primary: "#9A52E247",
304
304
  error: "#F2463A47",
305
- default: "",
305
+ default: "#00000033",
306
306
  },
307
307
  sidebar: {
308
308
  background: {
package/dist/index.d.ts CHANGED
@@ -51,5 +51,6 @@ import { useCustomTheme } from "./Theme/useCustomTheme";
51
51
  import { ThemesList } from "./Theme";
52
52
  import { debounce } from "./Utils/table";
53
53
  import ProductCard from "./Components/ProductCard/ProductCard";
54
- 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, };
54
+ import ProductDetails from "./Components/ProductDetails/ProductDetails";
55
+ 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, };
55
56
  export default withTheme;
package/dist/index.js CHANGED
@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  return (mod && mod.__esModule) ? mod : { "default": mod };
28
28
  };
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
- 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;
31
- 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;
30
+ 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;
31
+ 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;
32
32
  var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
33
33
  exports.Accordian = Accordion_1.default;
34
34
  var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -145,4 +145,6 @@ var table_1 = require("./Utils/table");
145
145
  Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return table_1.debounce; } });
146
146
  var ProductCard_1 = __importDefault(require("./Components/ProductCard/ProductCard"));
147
147
  exports.ProductCard = ProductCard_1.default;
148
+ var ProductDetails_1 = __importDefault(require("./Components/ProductDetails/ProductDetails"));
149
+ exports.ProductDetails = ProductDetails_1.default;
148
150
  exports.default = withTheme_1.default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.1.28",
3
+ "version": "2.1.30",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",