pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/Pages/multiSelect.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MultiSelect_1 = __importDefault(require("../Components/MultiSelect/MultiSelect"));
+const MultiSelectPage = () => {
+    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([
+        {
+            id: "1721664346718-1",
+            label: "Testing",
+        },
+    ]);
+    const handleValueSelectChange = (options) => {
+        setSelectedOptions(options);
+        console.log("Selected options updated:", options);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(MultiSelect_1.default, { value: selectedOptions, onValueChange: handleValueSelectChange, error: true, errorMessage: 'frr' }) }));
+};
+exports.default = MultiSelectPage;

package/dist/Pages/noteArea.d.ts

@@ -0,0 +1,3 @@
+declare const NoteAreaPage: () => import("react/jsx-runtime").JSX.Element;
+export default NoteAreaPage;
+//# sourceMappingURL=noteArea.d.ts.map

package/dist/Pages/noteArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noteArea.d.ts","sourceRoot":"","sources":["../../src/Pages/noteArea.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY,+CAoCjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/Pages/noteArea.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const NoteTextArea_1 = __importDefault(require("../Components/NoteTextArea/NoteTextArea"));
+const NoteAreaPage = () => {
+    const [saveButtonLoading, setSaveButtonLoading] = (0, react_1.useState)(false);
+    const handleNoteValue = (noteValue, titleValue, file) => {
+        console.log("Title: ", titleValue);
+        console.log("Note: ", noteValue);
+        console.log("File: ", file);
+        setSaveButtonLoading(true);
+        setTimeout(() => {
+            setSaveButtonLoading(false);
+        }, 2000);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { width: "720px", handleSubmit: (noteValue, titleValue, file) => {
+                handleNoteValue(noteValue, titleValue, file);
+            }, value: "text", title: "hello", isEditable: false, saveButtonLoading: saveButtonLoading, handleCancel: (isActive) => {
+                console.log("isActive", isActive);
+            }, customPlaceholder: "Add a note..." }) }));
+};
+exports.default = NoteAreaPage;

package/dist/Pages/notification.d.ts

@@ -0,0 +1,3 @@
+declare const notificationPage: () => import("react/jsx-runtime").JSX.Element;
+export default notificationPage;
+//# sourceMappingURL=notification.d.ts.map

package/dist/Pages/notification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../src/Pages/notification.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,gBAAgB,+CAuCrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/Pages/notification.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Notification_1 = __importDefault(require("../Components/Notification/Notification"));
+const notificationPage = () => {
+    const kavinNotification = {
+        id: 1,
+        title: "Send Proposal",
+        startDate: "2025-10-07T06:30:00.000Z",
+        dueDate: "2025-10-07T07:30:00.000Z",
+        // endDate: "2025-10-07T08:30:00.000Z",
+        description: "Test Deal for Tour",
+        type: "task",
+        host: "Kavin",
+    };
+    // Fixed past date above always renders the "overdue" (error) state — this one is due 20
+    // minutes from render time so the "due soon" (warning/orange) state is directly visible
+    // without needing to edit test data.
+    const dueSoonMeeting = {
+        id: 2,
+        title: "Team standup",
+        startDate: new Date().toISOString(),
+        dueDate: new Date(Date.now() + 20 * 60 * 1000).toISOString(),
+        description: "Daily sync",
+        type: "meeting",
+        host: "Jane Doe",
+    };
+    const handleClose = () => {
+        console.log("Notification closed");
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: 4, children: [(0, jsx_runtime_1.jsx)(Notification_1.default, { notification: kavinNotification, onClose: handleClose, showStatus: true }), (0, jsx_runtime_1.jsx)(Notification_1.default, { notification: dueSoonMeeting, showStatus: true })] }));
+};
+exports.default = notificationPage;

package/dist/Pages/numberInput.d.ts

@@ -0,0 +1,3 @@
+declare const NumberInputPage: () => import("react/jsx-runtime").JSX.Element;
+export default NumberInputPage;
+//# sourceMappingURL=numberInput.d.ts.map

package/dist/Pages/numberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberInput.d.ts","sourceRoot":"","sources":["../../src/Pages/numberInput.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,eAAe,+CAepB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Pages/numberInput.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const NumberInput_1 = __importDefault(require("../Components/NumberInput/NumberInput"));
+const NumberInputPage = () => {
+    const [numbetInputValue, setNumbetInputValue] = (0, react_1.useState)("0");
+    const handleNumberinput = (value) => {
+        setNumbetInputValue(value);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NumberInput_1.default, { min: 0, max: 20, value: numbetInputValue, onChange: handleNumberinput }) }));
+};
+exports.default = NumberInputPage;

package/dist/Pages/orgSwitcher.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const OrgSwitcherPage: React.FC;
+export default OrgSwitcherPage;
+//# sourceMappingURL=orgSwitcher.d.ts.map

package/dist/Pages/orgSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"orgSwitcher.d.ts","sourceRoot":"","sources":["../../src/Pages/orgSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuCxC,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EA+C5B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Pages/orgSwitcher.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const OrgSwitcher_1 = __importDefault(require("../Components/OrgSwitcher/OrgSwitcher"));
+const useCustomTheme_1 = require("../Theme/useCustomTheme");
+const ORGS = [
+    { id: 1, name: "Pixelize Technologies", role: "Owner" },
+    { id: 2, name: "Norstella Pharma Solutions", role: "Admin" },
+    { id: 3, name: "Acme Corporation", role: "Sales Manager" },
+    { id: 4, name: "Globex International", role: "Member" },
+    { id: 5, name: "Initech Software Pvt Ltd", role: "Admin" },
+    { id: 6, name: "Umbrella Health Group", role: "Viewer" },
+    { id: 7, name: "Stark Industries", role: "Owner" },
+];
+const Section = ({ title, children, bg, }) => {
+    var _a, _b, _c, _d;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mb: 8, p: 6, borderRadius: "16px", border: "1px solid", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : "#E2E8F0", bg: bg !== null && bg !== void 0 ? bg : theme.colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", mb: 4, color: (_d = (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[900]) !== null && _d !== void 0 ? _d : "gray.700", children: title }), children] }));
+};
+const OrgSwitcherPage = () => {
+    const [org, setOrg] = (0, react_1.useState)(1);
+    const [loadingOrg, setLoadingOrg] = (0, react_1.useState)(2);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const handleSwitch = (id) => {
+        setIsLoading(true);
+        setLoadingOrg(id);
+        setTimeout(() => setIsLoading(false), 1200);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "900px", mx: "auto", py: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "lg", mb: 6, children: "Org Switcher" }), (0, jsx_runtime_1.jsxs)(Section, { title: "Ghost trigger (navbar) \u2014 searchable, role subtitles, active check", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { bg: "gray.50", p: 3, borderRadius: "10px", justify: "flex-start", children: (0, jsx_runtime_1.jsx)(OrgSwitcher_1.default, { organizations: ORGS, value: org, onChange: (id) => setOrg(id) }) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { mt: 3, fontSize: "sm", color: "gray.500", children: ["Selected org id: ", (0, jsx_runtime_1.jsx)("b", { children: org })] })] }), (0, jsx_runtime_1.jsxs)(Section, { title: "Loading state (switching)", children: [(0, jsx_runtime_1.jsx)(OrgSwitcher_1.default, { organizations: ORGS, value: loadingOrg, onChange: handleSwitch, isLoading: isLoading }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 3, fontSize: "sm", color: "gray.500", children: "Pick an org \u2192 simulates a 1.2s switch with inline spinner." })] }), (0, jsx_runtime_1.jsx)(Section, { title: "Variants & sizes", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 6, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(OrgSwitcher_1.default, { organizations: ORGS.slice(0, 3), value: 1, onChange: () => { }, triggerVariant: "outline", size: "sm" }), (0, jsx_runtime_1.jsx)(OrgSwitcher_1.default, { organizations: ORGS.slice(0, 3), value: 2, onChange: () => { }, triggerVariant: "subtle", size: "md" }), (0, jsx_runtime_1.jsx)(OrgSwitcher_1.default, { organizations: ORGS.slice(0, 3), value: 3, onChange: () => { }, triggerVariant: "outline", size: "lg" })] }) })] }));
+};
+exports.default = OrgSwitcherPage;

package/dist/Pages/organizationDetails.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const OrganizationDetailsPage: React.FC;
+export default OrganizationDetailsPage;
+//# sourceMappingURL=organizationDetails.d.ts.map

package/dist/Pages/organizationDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"organizationDetails.d.ts","sourceRoot":"","sources":["../../src/Pages/organizationDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgDxC,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAgEpC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/Pages/organizationDetails.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const OrganizationDetails_1 = __importDefault(require("../Components/OrganizationDetails/OrganizationDetails"));
+const initialActive = [
+    {
+        orgId: 1,
+        company_name: "Pixelize HQ",
+        company_url: "pixelize.example.com",
+        default: 1,
+        uiInvite: 1,
+        defaultOrg: 1,
+        roleName: "Super Admin",
+        deleteDisabledReason: "Your default organization cannot be deleted",
+    },
+    {
+        orgId: 2,
+        company_name: "Northwind Traders",
+        company_url: "northwind.example.com",
+        default: 0,
+        uiInvite: 1,
+        defaultOrg: 0,
+        roleName: "Super Admin",
+    },
+    {
+        orgId: 3,
+        company_name: "Globex Corporation",
+        company_url: "globex.example.com",
+        default: 0,
+        uiInvite: 1,
+        defaultOrg: 0,
+        roleName: "Admin",
+        deleteDisabledReason: "Only a Super Admin can delete this organization",
+    },
+];
+const initialInvited = [
+    {
+        orgId: 4,
+        company_name: "Initech",
+        company_url: "initech.example.com",
+        default: 0,
+        uiInvite: 0,
+        defaultOrg: 0,
+    },
+];
+const OrganizationDetailsPage = () => {
+    const [active, setActive] = (0, react_1.useState)(initialActive);
+    const [invited, setInvited] = (0, react_1.useState)(initialInvited);
+    const [ownsConfirm, setOwnsConfirm] = (0, react_1.useState)(false);
+    const removeOrg = (orgId) => setActive((prev) => prev.filter((o) => o.orgId !== orgId));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { style: { display: "block", padding: "8px 12px", fontSize: 13 }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: ownsConfirm, onChange: (e) => setOwnsConfirm(e.target.checked) }), " ", "Own the delete confirm (onDeleteRequest) instead of the built-in modal"] }), (0, jsx_runtime_1.jsx)(OrganizationDetails_1.default, { activeOrganizations: active, invitedOrganizations: invited, userName: "Mahesh", onEditOrganization: (orgId, newName) => {
+                    console.log("[OrganizationDetailsPage] rename", orgId, newName);
+                    setActive((prev) => prev.map((o) => o.orgId === orgId ? { ...o, company_name: newName } : o));
+                }, onSetDefault: (orgId) => {
+                    console.log("[OrganizationDetailsPage] set default", orgId);
+                    setActive((prev) => prev.map((o) => ({ ...o, default: o.orgId === orgId ? 1 : 0 })));
+                }, onAcceptInvite: (orgId) => {
+                    console.log("[OrganizationDetailsPage] accept", orgId);
+                    setInvited((prev) => prev.filter((o) => o.orgId !== orgId));
+                }, onDeclineInvite: (orgId) => {
+                    console.log("[OrganizationDetailsPage] decline", orgId);
+                    setInvited((prev) => prev.filter((o) => o.orgId !== orgId));
+                }, onDeleteOrganization: (orgId) => {
+                    console.log("[OrganizationDetailsPage] delete", orgId);
+                    removeOrg(orgId);
+                }, onDeleteRequest: ownsConfirm
+                    ? (orgId) => {
+                        console.log("[OrganizationDetailsPage] delete request", orgId);
+                        if (window.confirm(`Delete organization ${orgId}?`))
+                            removeOrg(orgId);
+                    }
+                    : undefined, onCreateOrganization: (values) => {
+                    console.log("[OrganizationDetailsPage] create", values);
+                }, onBack: () => console.log("[OrganizationDetailsPage] back") })] }));
+};
+exports.default = OrganizationDetailsPage;

package/dist/Pages/photoViewer.d.ts

@@ -0,0 +1,3 @@
+export default PhotoViewer;
+declare function PhotoViewer(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=photoViewer.d.ts.map

package/dist/Pages/photoViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"photoViewer.d.ts","sourceRoot":"","sources":["../../src/Pages/photoViewer.jsx"],"names":[],"mappings":";AAGA,wEAcC"}

package/dist/Pages/photoViewer.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const ProfilePhotoViewer_1 = __importDefault(require("../Components/ProfilePhotoViewer/ProfilePhotoViewer"));
+const PhotoViewer = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ProfilePhotoViewer_1.default, { photoUrl: "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=", onPhotoChange: (file) => console.log(file), isEditable: true, isView: true, fallbackText: "" }) }));
+};
+exports.default = PhotoViewer;

package/dist/Pages/pinInputs.d.ts

@@ -0,0 +1,3 @@
+declare const PinInputPage: () => import("react/jsx-runtime").JSX.Element;
+export default PinInputPage;
+//# sourceMappingURL=pinInputs.d.ts.map

package/dist/Pages/pinInputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pinInputs.d.ts","sourceRoot":"","sources":["../../src/Pages/pinInputs.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY,+CAMjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Pages/pinInputs.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PinInput_1 = __importDefault(require("../Components/PinInput/PinInput"));
+const PinInputPage = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(PinInput_1.default, { pins: 5, label: "Enter pin", color: "primary" }) }));
+};
+exports.default = PinInputPage;

package/dist/Pages/productCaard.d.ts

@@ -0,0 +1,3 @@
+declare const productCaard: () => import("react/jsx-runtime").JSX.Element;
+export default productCaard;
+//# sourceMappingURL=productCaard.d.ts.map

package/dist/Pages/productCaard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"productCaard.d.ts","sourceRoot":"","sources":["../../src/Pages/productCaard.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY,+CA+UjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Pages/productCaard.js

@@ -0,0 +1,311 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ProductCard_1 = __importDefault(require("../Components/ProductCard/ProductCard"));
+const react_1 = require("@chakra-ui/react");
+const productCaard = () => {
+    const Products = [
+        {
+            "productId": 12,
+            "label": "hello",
+            "description": "hh",
+            "batch": {
+                "color": "red",
+                "label": "nh"
+            },
+            "tags": [],
+            "rating": 1,
+            "reviews": 0,
+            "images": [
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                    "imageId": 9,
+                    "order": 4,
+                    "isImage": true
+                },
+                // {
+                //   "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376124/main_sweets/1763376123548-Mothichoor%20%281%29.jpg",
+                //   "imageId": 10,
+                //   "order": 5
+                // }
+            ],
+            "options": [
+                {
+                    "var_id": 6,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 800,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 2
+                },
+                // {
+                //   "var_id": 7,
+                //   "unit": 2,
+                //   "label": "hho",
+                //   "offer": 5,
+                //   "price": 600,
+                //   "weight": 200,
+                //   "offerPrice": "475",
+                //   "stocks": 5
+                // },
+                // {
+                //   "var_id": 8,
+                //   "unit": 2,
+                //   "label": "hho",
+                //   "offer": 5,
+                //   "price": 400,
+                //   "weight": 200,
+                //   "offerPrice": "475",
+                //   "stocks": 5
+                // },
+            ]
+        },
+        {
+            "productId": 13,
+            "label": "hellovideo",
+            "description": "hh",
+            "batch": {
+                "color": "red",
+                "label": "nh"
+            },
+            "tags": [
+                "hwnjncdsncidjncsdncsjncjnvjnvjsnvjnsdvkjnsdvkjnsdvkjnsdvkjn", "jbjkbjbj"
+            ],
+            "rating": 2,
+            "reviews": 0,
+            "images": [
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                    "imageId": 9,
+                    "order": 4,
+                    "isImage": true
+                }, {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376124/main_sweets/1763376123548-Mothichoor%20%281%29.jpg",
+                    "imageId": 10,
+                    "order": 5,
+                    "isImage": false
+                }
+            ],
+            "options": [
+                {
+                    "var_id": 6,
+                    "unit": 2,
+                    "label": "hhhgbjhbjhbjhbkjbkjnkjnkjbkjbkjbkjbjhvjhvbjhvjhvjhvjhvo",
+                    "offer": 5,
+                    "price": 800,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 2
+                },
+                {
+                    "var_id": 7,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 600,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+                {
+                    "var_id": 8,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 400,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+            ]
+        },
+        {
+            "productId": 14,
+            "label": "hello",
+            "description": "hh",
+            "batch": {
+                "color": "red",
+                "label": "nh"
+            },
+            "tags": [
+                "hw", "new"
+            ],
+            "rating": 3,
+            "reviews": 0,
+            "images": [
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                    "imageId": 9,
+                    "order": 4,
+                    "isImage": true
+                }, {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376124/main_sweets/1763376123548-Mothichoor%20%281%29.jpg",
+                    "imageId": 10,
+                    "order": 5,
+                    "isImage": true
+                }
+            ],
+            "options": [
+                {
+                    "var_id": 6,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 800,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 2
+                },
+                {
+                    "var_id": 7,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 600,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+                {
+                    "var_id": 8,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 400,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+            ]
+        },
+        {
+            "productId": 15,
+            "label": "hello",
+            "description": "hh",
+            "batch": {
+                "color": "red",
+                "label": "nh"
+            },
+            "tags": [
+                "hw", "new", "featured"
+            ],
+            "rating": 4.5,
+            "reviews": 120,
+            "images": [
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376124/main_sweets/1763376123548-Mothichoor%20%281%29.jpg",
+                    "imageId": 11,
+                    "order": 4,
+                    "isImage": true
+                },
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                    "imageId": 12,
+                    "order": 5,
+                    "isImage": true
+                }
+            ],
+            "options": [
+                {
+                    "var_id": 9,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 900,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+                {
+                    "var_id": 10,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 700,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 4
+                },
+                {
+                    "var_id": 11,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 200,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 0
+                },
+            ]
+        },
+        {
+            "productId": 16,
+            "label": "hello",
+            "description": "hh",
+            "batch": {
+                "color": "red",
+                "label": "nh"
+            },
+            "tags": [
+                "hw", "new", "featured", "popular"
+            ],
+            "rating": 4,
+            "reviews": 120,
+            "images": [
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376124/main_sweets/1763376123548-Mothichoor%20%281%29.jpg",
+                    "imageId": 11,
+                    "order": 4,
+                    "isImage": true
+                },
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                    "imageId": 12,
+                    "order": 5,
+                    "isImage": true
+                }
+            ],
+            "options": [
+                {
+                    "var_id": 9,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 900,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+                {
+                    "var_id": 10,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 700,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 4
+                },
+                {
+                    "var_id": 11,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 200,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 0
+                },
+            ]
+        }
+    ];
+    return ((0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: { base: 2, md: 3, lg: 4 }, spacing: 6, children: Products.map((product) => ((0, jsx_runtime_1.jsx)(ProductCard_1.default, { id: product.productId, label: product.label, productImage: product.images, description: product.description, options: product.options, batch: product.batch, tags: product.tags, rating: product.rating, reviews: product.reviews, addToCart: true, 
+            // isQtyEditable={true}
+            displayRating: false, onAddToCart: (id, var_id, qty) => console.log('Add to cart:', id, var_id, qty), onNotifyMe: (id, var_id) => console.log('notify', id, var_id) }, product.productId))) }));
+};
+exports.default = productCaard;

package/dist/Pages/productDetailCard.d.ts

@@ -0,0 +1,3 @@
+declare const ProductDetailCard: () => import("react/jsx-runtime").JSX.Element;
+export default ProductDetailCard;
+//# sourceMappingURL=productDetailCard.d.ts.map

package/dist/Pages/productDetailCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"productDetailCard.d.ts","sourceRoot":"","sources":["../../src/Pages/productDetailCard.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,+CA0FtB,CAAA;AAED,eAAe,iBAAiB,CAAA"}