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

package/dist/esm/Components/PlanPill/PlanPill.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { AlertCircle, Clock, Sparkles } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { onGradient } from "../../Theme/tokens/builders/accentText";
+import { ACCENT_GRADIENT } from "./planPillGradient";
+const TONE_ICON = {
+    normal: Sparkles,
+    warning: Clock,
+    danger: AlertCircle,
+};
+const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient, maxLabelWidth = "150px", ariaLabel, onClick, }) => {
+    const theme = useCustomTheme();
+    const c = theme.colors;
+    const toneGradient = {
+        normal: ACCENT_GRADIENT,
+        warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
+        danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
+    };
+    const resolved = gradient !== null && gradient !== void 0 ? gradient : toneGradient[tone];
+    const ink = onGradient(resolved.from, resolved.to, c.white, c.black);
+    // The chip is a translucent inset of the pill itself, so it tints with whichever
+    // ink won — a white wash under black text would wash the chip out entirely.
+    const onDark = ink === c.white;
+    const Icon = icon === undefined ? TONE_ICON[tone] : icon;
+    const hasMobile = !!mobileLabel && mobileLabel !== label;
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`, color: ink, borderRadius: "999px", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
+            transform: "translateY(-1px)",
+            boxShadow: `0 6px 18px ${resolved.from}59`,
+        }, _focusVisible: {
+            outline: "none",
+            boxShadow: `0 0 0 3px ${resolved.from}55`,
+        }, sx: {
+            "@media (prefers-reduced-motion: reduce)": {
+                transition: "none",
+                _hover: { transform: "none" },
+            },
+        }, children: [Icon ? _jsx(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, _jsx(Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? (_jsx(Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? (_jsx(Flex, { as: "span", align: "center", px: "8px", borderRadius: "999px", bg: onDark ? "rgba(255,255,255,0.22)" : "rgba(0,0,0,0.12)", border: "1px solid", borderColor: onDark ? "rgba(255,255,255,0.28)" : "rgba(0,0,0,0.08)", fontSize: "11px", fontWeight: "700", lineHeight: "18px", sx: { fontVariantNumeric: "tabular-nums" }, children: status })) : null] }));
+};
+export default PlanPill;

package/dist/esm/Components/PlanPill/PlanPillProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/PlanPill/planPillGradient.js

@@ -0,0 +1,17 @@
+/**
+ * The plan badge's `normal` tone is a single fixed accent — not brand-driven, and
+ * not mode-dependent.
+ *
+ * Its tone carries meaning (normal / warning / danger), and a brand gradient can
+ * collide with that: rosewood's `#c74962 → #ea0727` is red, so a healthy plan
+ * rendered as if it had expired. Greyscale brands failed the other way, sinking
+ * the badge into the header chrome.
+ *
+ * One accent for both color modes is deliberate: a lighter dark-mode variant was
+ * tried and flipped `onGradient`'s ink to black, which read as a washed-out candy
+ * pill on dark chrome. These stops keep white ink in both modes, so the badge looks
+ * like the same component everywhere. Verified at AA (>= 4.5:1) on both stops.
+ *
+ * Consumers who genuinely want another colour still pass `gradient`.
+ */
+export const ACCENT_GRADIENT = { from: "#8B3FC8", to: "#df187a" };

package/dist/esm/Components/ProductCard/ProductCard.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Image, Badge, VStack, HStack, Text, IconButton } from "@chakra-ui/react";
+import ProductTags from "./ProductTags";
+import ProductPrice from "./ProductPrice";
+import Button from "../Button/Button";
+import ProductLabel from "./ProductLabel";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { Minus, Plus } from "lucide-react";
+import ProductReview from "./ProductReview";
+const ProductCard = ({ id, label, productImage, rating, reviews, tags, options, button, batch, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size = "sm", notifyMe, isQtyEditable = false, displayRating = true, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const [hover, setHover] = useState(false);
+    const theme = useCustomTheme();
+    const [selectedOption, setSelectedOption] = useState(options === null || options === void 0 ? void 0 : options[0]);
+    const [qty, setQty] = useState(1);
+    const handleOptionSelect = (option) => {
+        setSelectedOption(option);
+        onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
+    };
+    const handleIncrement = (e) => {
+        e.stopPropagation();
+        if ((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) && qty < selectedOption.stocks) {
+            setQty((prev) => prev + 1);
+        }
+    };
+    const handleDecrement = (e) => {
+        e.stopPropagation();
+        if (qty > 1) {
+            setQty((prev) => prev - 1);
+        }
+    };
+    const sizeStyles = {
+        xs: { cardWidth: "16.25rem", imgHeight: "11.25rem", padding: 3 },
+        sm: { cardWidth: "18rem", imgHeight: "13rem", padding: 4 },
+        md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
+        lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
+    };
+    const { cardWidth, imgHeight, padding } = sizeStyles[size];
+    const imageList = (_a = productImage === null || productImage === void 0 ? void 0 : productImage.filter((img) => img.isImage !== false)) !== null && _a !== void 0 ? _a : [];
+    const isSizeType = (s) => s === "xs" || s === "sm" || s === "md" || s === "lg";
+    const safeSize = isSizeType(size) ? size : "md";
+    return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.background[50], boxShadow: "lg", children: [imageList.length > 0 && (_jsxs(Box, { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer", children: [_jsx(Image, { src: hover && ((_b = imageList === null || imageList === void 0 ? void 0 : imageList[1]) === null || _b === void 0 ? void 0 : _b.imageUrl) ? imageList[1].imageUrl : (_c = imageList === null || imageList === void 0 ? void 0 : imageList[0]) === null || _c === void 0 ? void 0 : _c.imageUrl, alt: label, w: "full", h: "full", transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)" }), batch && (_jsx(Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
+                            xs: "xs",
+                            sm: "sm",
+                            md: "md",
+                            lg: "lg",
+                        }[size], px: {
+                            xs: 1,
+                            sm: 2,
+                            md: 3,
+                            lg: 4,
+                        }[size], py: {
+                            xs: 0.5,
+                            sm: 1,
+                            md: 1.5,
+                            lg: 2,
+                        }[size], children: batch.label }))] })), _jsxs(VStack, { spacing: 2, align: "start", p: padding, flex: "1", w: "full", children: [_jsx(Box, { onClick: onClick, cursor: "pointer", children: _jsx(ProductLabel, { label: label, size: size }) }), tags && _jsx(ProductTags, { tags: tags, size: size }), options && (_jsx(ProductPrice, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: (displayRating && ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)))
+                            ? _jsx(ProductReview, { rating: rating, reviewCount: reviews })
+                            : undefined })), _jsxs(VStack, { w: "full", align: "stretch", spacing: 2, mt: "auto", children: [typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) <= 0 && (_jsx(Button, { colorScheme: "gray", size: safeSize, width: "100%", isDisabled: true, children: "Out of Stock" })), addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && isQtyEditable && (_jsx(HStack, { w: "full", justify: "space-between", children: _jsxs(HStack, { children: [_jsx(IconButton, { icon: _jsx(Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }), _jsx(Text, { fontWeight: "bold", w: 8, textAlign: "center", children: qty }), _jsx(IconButton, { icon: _jsx(Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1), isRound: true, variant: "outline", colorScheme: "red" })] }) })), (button === null || button === void 0 ? void 0 : button.onClick) && (_jsx(Button, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick, children: (_g = button.label) !== null && _g !== void 0 ? _g : "Add to Cart" })), addToCart && (((_h = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _h !== void 0 ? _h : 1) > 0) && (_jsx(Button, { width: "100%", size: safeSize, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)), colorScheme: "red", children: "Add to Cart" })), addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) <= 0) && notifyMe && (_jsx(Button, { width: "100%", size: safeSize, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)), colorScheme: "red", variant: "outline", children: "Notify Me" })), goToCart && (_jsx(Button, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red", children: "Go to Cart" }))] })] })] }));
+};
+export default ProductCard;

package/dist/esm/Components/ProductCard/ProductCardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/ProductCard/ProductLabel.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '@chakra-ui/react';
+const ProductLabel = ({ label, description, size }) => {
+    const fontSizes = {
+        xs: "md",
+        sm: "lg",
+        md: "xl",
+        lg: "2xl"
+    };
+    const descriptionSizes = {
+        xs: 'xs',
+        sm: 'sm',
+        md: 'md',
+        lg: 'lg',
+    };
+    return (_jsxs(Box, { children: [_jsx(Text, { fontWeight: "bold", fontSize: fontSizes[size], children: label }), description && _jsx(Text, { fontSize: descriptionSizes[size], fontStyle: "italic", children: description })] }));
+};
+export default ProductLabel;

package/dist/esm/Components/ProductCard/ProductPrice.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import { Box, Text, Portal, useOutsideClick, Flex, Grid, HStack, Badge, useBreakpointValue, } from '@chakra-ui/react';
+import OverflowTooltipText from '../SideBar/components/OverflowTooltipText';
+import { useCustomTheme } from '../../Theme/useCustomTheme';
+import { accentTextOnCanvas } from '../../Theme/tokens/builders/accentText';
+import { rafThrottle } from '../../Utils/rafThrottle';
+const sizeConfig = {
+    xs: {
+        font: "xs",
+        label: "sm",
+        price: "sm",
+        px: 2,
+        py: 1,
+        rowHeight: "2rem",
+        iconSize: "0.75rem",
+        dotSize: "0.375rem",
+    },
+    sm: {
+        font: "sm",
+        label: "md",
+        price: "md",
+        px: 3,
+        py: 1.5,
+        rowHeight: "2.5rem",
+        iconSize: "1rem",
+        dotSize: "0.5rem",
+    },
+    md: {
+        font: "md",
+        label: "lg",
+        price: "lg",
+        px: 4,
+        py: 2,
+        rowHeight: "3rem",
+        iconSize: "1.25rem",
+        dotSize: "0.625rem",
+    },
+    lg: {
+        font: "lg",
+        label: "xl",
+        price: "xl",
+        px: 5,
+        py: 2.5,
+        rowHeight: "3.5rem",
+        iconSize: "1.5rem",
+        dotSize: "0.75rem",
+    },
+};
+const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
+    const cfg = sizeConfig[size];
+    const theme = useCustomTheme();
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(options[0]);
+    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+    const buttonRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const isSingleOption = options.length === 1;
+    const isMobile = useBreakpointValue({ base: true, md: false });
+    useOutsideClick({
+        ref: dropdownRef,
+        handler: () => setIsOpen(false),
+    });
+    const getDiscountedPrice = (option) => Math.round(option.price - (option.price * option.offer) / 100);
+    useEffect(() => {
+        const updatePosition = () => {
+            if (buttonRef.current) {
+                const rect = buttonRef.current.getBoundingClientRect();
+                setDropdownPosition({
+                    top: rect.bottom + 4,
+                    left: rect.left,
+                    width: rect.width
+                });
+            }
+        };
+        if (!isOpen)
+            return;
+        updatePosition();
+        const onReposition = rafThrottle(updatePosition);
+        window.addEventListener("resize", onReposition);
+        window.addEventListener("scroll", onReposition, {
+            capture: true, // every scrollable ancestor, not just the window
+            passive: true,
+        });
+        return () => {
+            onReposition.cancel();
+            window.removeEventListener("resize", onReposition);
+            window.removeEventListener("scroll", onReposition, true);
+        };
+    }, [isOpen]);
+    useEffect(() => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
+    }, [selected, onSelect]);
+    return (_jsxs(_Fragment, { children: [isSingleOption ? (_jsx(Box, { border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
+                // py={cfg.py}
+                rounded: "md", display: "inline-block", w: "100%", children: _jsx(Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : (_jsxs(Box, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
+                // py={cfg.py}
+                rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [_jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), _jsx(Text, { fontSize: cfg.font, color: accentTextOnCanvas(theme.colors.red, theme.colors.red[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: "\u25BE" })] })), !isSingleOption && isOpen && (_jsx(Portal, { children: _jsx(Box, { ref: dropdownRef, position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
+                        const discounted = getDiscountedPrice(option);
+                        const isSelected = selected.var_id === option.var_id;
+                        return (_jsxs(Grid, { px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? 'red.50' : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? 'red.300' : 'transparent', _hover: { bg: 'red.100' }, onClick: () => {
+                                setSelected(option);
+                                setIsOpen(false);
+                            }, templateColumns: { base: '1fr auto', md: '1fr auto' }, 
+                            // columnGap={{ base: 2, md: 3 }}
+                            // rowGap={{ base: 1.5, md: 2 }}
+                            alignItems: "center", children: [_jsx(HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), _jsx(Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: _jsxs(HStack, { spacing: 2, align: "center", children: [option.offer > 0 && (_jsx(Badge, { bg: "green.100", color: "green.700", borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), _jsxs(Text, { fontSize: "sm", fontWeight: "bold", color: accentTextOnCanvas(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && (_jsxs(Text, { fontSize: "xs", color: "gray.500", textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), _jsx(Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.500' : 'gray.600', bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && (_jsx(Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: "red.500", borderRadius: "full" })) })] }, option.var_id));
+                    }) }) })), _jsxs(Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [_jsxs(Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && (_jsxs(Text, { color: "gray.500", textDecoration: "line-through", children: ["\u20B9", selected.price] })), _jsxs(Text, { color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && (_jsx(Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
+};
+export default ProductPrice;

package/dist/esm/Components/ProductCard/ProductReview.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text, Icon } from '@chakra-ui/react';
+import { BookCheck, Star } from 'lucide-react';
+// The theme's `yellow` scale reverses index roles in dark mode (like every utility hue), so
+// pulling it through the theme would silently flip this decorative "filled star" from gold to
+// pale. A rating star is a universal, brand-independent gold — not something that should follow
+// canvas/mode — so it's pinned here instead. Needs a design-token addition (a mode-stable
+// "rating gold") to pixelize-design-library if this pattern is needed elsewhere.
+const RATING_STAR_FILL = "#ECC94B";
+const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
+    const hasRating = rating !== undefined && rating !== null;
+    const hasReviewCount = reviewCount !== undefined && reviewCount !== null;
+    // Convert rating to number and ensure it's between 0 and 5
+    // Calculate fill percentage: (rating / 5) * 100%
+    const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
+    const fillPercentage = (numericRating / 6) * 100;
+    return (_jsxs(Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && (_jsxs(Flex, { align: "center", gap: 1, bg: "teal.50", color: "teal.900", px: 2, borderRadius: "md", children: [_jsxs(Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [_jsx(Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: _jsx(Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && (_jsx(Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: _jsx(Star, { size: 14, color: RATING_STAR_FILL, fill: RATING_STAR_FILL }) }))] }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && _jsx(Box, { h: "4", w: "0.063rem", bg: "gray.400" }), hasReviewCount && (_jsxs(Flex, { align: "center", gap: "1", children: [_jsx(Icon, { as: BookCheck, boxSize: 3.5 }), _jsxs(Text, { fontSize: "sm", color: "gray.600", children: ["(", reviewCount, ")"] })] }))] }));
+};
+export default ProductReview;

package/dist/esm/Components/ProductCard/ProductTags.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Flex, useTheme } from '@chakra-ui/react';
+import ToolTip from '../ToolTip/ToolTip';
+const ProductTags = ({ tags, className, size = 'sm' }) => {
+    const getRows = (tags) => {
+        const count = tags.length;
+        if (count === 1)
+            return [tags];
+        if (count === 2)
+            return [tags];
+        if (count === 3)
+            return [[tags[0]], tags.slice(1)];
+        if (count === 4)
+            return [tags.slice(0, 2), tags.slice(2, 4)];
+        return [];
+    };
+    return (_jsx(Flex, { direction: "column", gap: "1", className: className, w: "full", children: getRows(tags).map((row, rowIndex) => (_jsx(Flex, { gap: "1", children: row.map((tag, tagIndex) => (_jsx(Tag, { fullWidth: row.length === 1, size: size, children: tag }, tagIndex))) }, rowIndex))) }));
+};
+const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
+    var _a, _b, _c, _d;
+    const theme = useTheme();
+    const tagBorder = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = theme.colors.red) === null || _d === void 0 ? void 0 : _d[200];
+    const tagText = theme.colors.text[900];
+    // Size map for tags
+    const tagSizes = {
+        xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },
+        sm: { fontSize: '0.75rem', px: '0.6rem', py: '0.2rem' },
+        md: { fontSize: '0.875rem', px: '0.75rem', py: '0.3rem' },
+        lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
+    };
+    const ref = React.useRef(null);
+    const [truncated, setTruncated] = React.useState(false);
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const check = () => setTruncated(el.scrollWidth > el.clientWidth);
+        check();
+        window.addEventListener('resize', check);
+        return () => {
+            window.removeEventListener('resize', check);
+        };
+    }, [children]);
+    const content = (_jsx(Box, { ref: ref, flex: fullWidth ? '1' : '1', border: "0.063rem solid", borderColor: tagBorder, color: tagText, fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: children }));
+    return truncated ? (_jsx(ToolTip, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom', children: content })) : (content);
+};
+export default ProductTags;

package/dist/esm/Components/ProductDetails/ProductDetails.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Flex, Text, HStack, IconButton, useBreakpointValue } from "@chakra-ui/react";
+import ProductImageSlider from "./ProductImageSlider";
+import ProductLabel from "../ProductCard/ProductLabel";
+import ProductTags from "../ProductCard/ProductTags";
+import ProductDtlPrice from "./ProductDtlPrice";
+import Button from "../Button/Button";
+import { ShoppingCartIcon, Minus, Plus } from "lucide-react";
+import ProductReview from "../ProductCard/ProductReview";
+import FormattedDescription from "../Common/FormattedDescription";
+const ProductDetails = ({ id, price, label, shortdesc, tags, images, batch, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable = false, displayRating = true, }) => {
+    var _a, _b, _c, _d, _e;
+    const isMobile = useBreakpointValue({ base: true, md: false });
+    const [selectedOption, setSelectedOption] = React.useState(price === null || price === void 0 ? void 0 : price[0]);
+    const [qty, setQty] = React.useState(1);
+    React.useEffect(() => {
+        setQty(1);
+    }, [selectedOption]);
+    const handleIncrement = () => {
+        setQty((prev) => {
+            var _a;
+            const stock = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : Infinity;
+            if (prev >= stock)
+                return prev;
+            return prev + 1;
+        });
+    };
+    const handleDecrement = () => {
+        setQty((prev) => (prev > 1 ? prev - 1 : 1));
+    };
+    return (_jsxs(Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5, children: [_jsx(Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem", children: _jsx(ProductImageSlider, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch }) }), _jsxs(Box, { flex: "1", children: [label && _jsx(ProductLabel, { label: label, size: "sm" }), shortdesc && _jsx(Box, { my: 3, children: _jsx(FormattedDescription, { content: shortdesc }) }), ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && (_jsx(ProductReview, { rating: rating, reviewCount: reviews, mb: 3 })), tags && _jsx(ProductTags, { tags: tags, size: "sm" }), price && (_jsx(ProductDtlPrice, { price: price, onSelect: (option) => {
+                            setSelectedOption(option);
+                            onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
+                        } })), typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : 0) <= 0 && (_jsx(Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" }, children: _jsx(Button, { colorScheme: "gray", size: "sm", 
+                            // width="50%"
+                            // onClick={button?.onClick}
+                            isDisabled: true, children: "Out of Stock" }) })), goToCart && (_jsx(Button, { size: "sm", colorScheme: "red", leftIcon: _jsx(ShoppingCartIcon, {}), sx: { ml: "1.1rem" }, onClick: OnGoToCart, children: "Go to cart" })), addToCart && (((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _b !== void 0 ? _b : 1) > 0) && isQtyEditable && (_jsx(HStack, { sx: { ml: "1.1rem", mb: 4 }, spacing: 4, children: _jsxs(HStack, { children: [_jsx(IconButton, { icon: _jsx(Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }), _jsx(Text, { fontWeight: "bold", w: 8, textAlign: "center", children: qty }), _jsx(IconButton, { icon: _jsx(Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _c !== void 0 ? _c : Infinity), isRound: true, variant: "outline", colorScheme: "red" })] }) })), addToCart && (((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 1) > 0) && (_jsx(Button, { size: "sm", colorScheme: "red", leftIcon: _jsx(ShoppingCartIcon, {}), sx: { ml: "1.1rem" }, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)), children: "Add to cart" })), addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) <= 0) && notifyMe && (_jsx(Button, { size: "sm", colorScheme: "red", variant: "outline", sx: { ml: "1.1rem" }, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)), children: "Notify Me" }))] })] }));
+};
+export default ProductDetails;

package/dist/esm/Components/ProductDetails/ProductDetailsProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/ProductDetails/ProductDtlPrice.js

@@ -0,0 +1,22 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Box, Text, HStack, Badge, Button, VStack, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText";
+const ProductDtlPrice = ({ price, onSelect }) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selected = price[selectedIndex];
+    const discounted = Math.round(selected.price - (selected.price * selected.offer) / 100);
+    const theme = useCustomTheme();
+    useEffect(() => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
+    }, [selected, onSelect]);
+    return (_jsxs(VStack, { align: "start", spacing: 3, p: 4, borderRadius: "md", w: "full", children: [_jsxs(HStack, { spacing: 2, align: "center", children: [selected.offer > 0 && (_jsxs(Text, { fontSize: "lg", color: theme.colors.gray[500], as: "s", children: ["\u20B9", selected.price] })), _jsxs(Text, { fontSize: "xl", color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "bold", children: ["\u20B9", discounted] }), selected.offer > 0 && (_jsxs(Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5, children: ["SAVE ", selected.offer, "%"] }))] }), _jsx(Text, { fontSize: "sm", color: theme.colors.gray[600], children: "(Incl. of all taxes)" }), _jsxs(Box, { children: [_jsxs(Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1, children: ["Packs : ", selected.label] }), _jsx(HStack, { spacing: 2, children: price.map((pack, idx) => (_jsx(Button, { size: "xs", variant: "outline", borderColor: idx === selectedIndex ? "orange.400" : "orange.200", bg: idx === selectedIndex ? "orange.50" : theme.colors.background[50], 
+                            // orange.600 fails AA against both possible bg states — walk the scale per canvas
+                            color: accentTextOnCanvas(theme.colors.orange, idx === selectedIndex ? theme.colors.orange[50] : theme.colors.background[50]), borderRadius: "md", fontWeight: "medium", _hover: {
+                                bg: "orange.100",
+                            }, _active: {
+                                bg: "orange.100",
+                            }, onClick: () => setSelectedIndex(idx), children: pack.label }, pack.var_id))) })] })] }));
+};
+export default ProductDtlPrice;

package/dist/esm/Components/ProductDetails/ProductImageSlider.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge, Box, Flex, IconButton, Image, AspectRatio, VStack, HStack, useBreakpointValue, } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Play, } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+export default function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbnailsToShow = 6, batch, }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [thumbStartIndex, setThumbStartIndex] = useState(0);
+    const [transformOrigin, setTransformOrigin] = useState("center center");
+    const [isHovered, setIsHovered] = useState(false);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const theme = useCustomTheme();
+    const isMobile = useBreakpointValue({ base: true, md: false });
+    const getYouTubeId = (url) => {
+        const patterns = [
+            /youtu\.be\/([A-Za-z0-9_-]{6,})/i,
+            /youtube\.com\/watch\?[^#]*v=([A-Za-z0-9_-]{6,})/i,
+            /youtube\.com\/embed\/([A-Za-z0-9_-]{6,})/i,
+            /youtube\.com\/shorts\/([A-Za-z0-9_-]{6,})/i,
+            /youtube\.com\/live\/([A-Za-z0-9_-]{6,})/i,
+        ];
+        for (const re of patterns) {
+            const m = url.match(re);
+            if (m === null || m === void 0 ? void 0 : m[1])
+                return m[1];
+        }
+        return undefined;
+    };
+    const getVimeoId = (url) => {
+        const patterns = [
+            /vimeo\.com\/(\d+)/i,
+            /player\.vimeo\.com\/video\/(\d+)/i,
+        ];
+        for (const re of patterns) {
+            const m = url.match(re);
+            if (m === null || m === void 0 ? void 0 : m[1])
+                return m[1];
+        }
+        return undefined;
+    };
+    const getDailymotionId = (url) => {
+        const patterns = [
+            /dailymotion\.com\/video\/([A-Za-z0-9]+)/i,
+            /dai\.ly\/([A-Za-z0-9]+)/i,
+        ];
+        for (const re of patterns) {
+            const m = url.match(re);
+            if (m === null || m === void 0 ? void 0 : m[1])
+                return m[1];
+        }
+        return undefined;
+    };
+    const isVideoUrl = (url) => /\.(mp4|webm|ogg)(\?|#|$)/i.test(url) ||
+        !!(getYouTubeId(url) || getVimeoId(url) || getDailymotionId(url));
+    const getThumbForItem = (url) => {
+        const yt = getYouTubeId(url);
+        if (yt)
+            return `https://img.youtube.com/vi/${yt}/hqdefault.jpg`;
+        const vm = getVimeoId(url);
+        if (vm)
+            return `https://vumbnail.com/${vm}.jpg`;
+        const dm = getDailymotionId(url);
+        if (dm)
+            return `https://www.dailymotion.com/thumbnail/video/${dm}`;
+        return undefined;
+    };
+    React.useEffect(() => {
+        setIsPlaying(false);
+    }, [activeIndex]);
+    const totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
+    const hasMultiple = totalThumbs > 1;
+    const visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
+    const canScrollUp = thumbStartIndex > 0;
+    const canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
+    const handleThumbScroll = (direction) => {
+        if (direction === "up" && canScrollUp) {
+            setThumbStartIndex((prev) => {
+                const newStart = Math.max(prev - 1, 0);
+                setActiveIndex(newStart);
+                return newStart;
+            });
+        }
+        else if (direction === "down" && canScrollDown) {
+            setThumbStartIndex((prev) => {
+                const newStart = Math.min(prev + 1, totalThumbs - thumbnailsToShow);
+                setActiveIndex(newStart);
+                return newStart;
+            });
+        }
+    };
+    const updateActiveIndex = (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 (_jsx(Flex, { maxW: "6xl", mx: "auto", gap: 4, direction: isMobile ? "column" : "row", children: isMobile ? (_jsxs(_Fragment, { children: [_jsxs(Box, { w: "full", 
+                    // h={`${imageSize}px`}
+                    position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: (e) => {
+                        if (isMobile)
+                            return;
+                        const bounds = e.currentTarget.getBoundingClientRect();
+                        const x = ((e.clientX - bounds.left) / bounds.width) * 100;
+                        const y = ((e.clientY - bounds.top) / bounds.height) * 100;
+                        setTransformOrigin(`${x}% ${y}%`);
+                    }, onMouseEnter: () => !isMobile && setIsHovered(true), onMouseLeave: () => {
+                        setIsHovered(false);
+                        setTransformOrigin("center center");
+                    }, children: [_jsx(Box, { position: "absolute", top: "2", left: "2", zIndex: "1", children: _jsx(Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid", children: batch === null || batch === void 0 ? void 0 : batch.label }) }), (() => {
+                            const item = images === null || images === void 0 ? void 0 : images[activeIndex];
+                            const url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
+                            const isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
+                            const yt = getYouTubeId(url);
+                            const vimeo = getVimeoId(url);
+                            const dm = getDailymotionId(url);
+                            const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
+                            if (isVideo) {
+                                if (!isPlaying) {
+                                    return (_jsxs(Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [_jsx(Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: _jsx(Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
+                                }
+                                return yt ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : (_jsx(Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
+                            }
+                            return (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }));
+                        })(), hasMultiple && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: () => {
+                                        var _a;
+                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
+                                        const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
+                                        updateActiveIndex(newIndex);
+                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: () => {
+                                        var _a;
+                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
+                                        const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
+                                        updateActiveIndex(newIndex);
+                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })] }))] }), hasMultiple && (_jsxs(HStack, { spacing: 2, align: "center", justify: "center", children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Left", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
+                            const actualIndex = thumbStartIndex + index;
+                            const url = src.imageUrl;
+                            const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
+                            const thumb = src.thumb || getThumbForItem(url);
+                            return (_jsx(Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
+                                    ? `0.125rem solid ${theme.colors.gray[500]}`
+                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : (_jsx(Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) }))) : (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
+                        }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Right", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm" })] }))] })) : (_jsxs(_Fragment, { children: [hasMultiple && (_jsxs(Box, { w: `${thumbHeight}px`, h: `${thumbHeight * thumbnailsToShow}px`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden", children: [_jsx(IconButton, { icon: _jsx(ChevronUp, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Up", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }), _jsx(VStack, { spacing: 2, flex: "1", overflow: "hidden", children: visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
+                                const actualIndex = thumbStartIndex + index;
+                                const url = src.imageUrl;
+                                const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
+                                const thumb = src.thumb || getThumbForItem(url);
+                                return (_jsx(Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
+                                        ? `0.125rem solid ${theme.colors.gray[500]}`
+                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : (_jsx(Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) }))) : (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` })) }, actualIndex));
+                            }) }), _jsx(IconButton, { icon: _jsx(ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })] })), _jsxs(Box, { w: `${imageSize}px`, h: `${imageSize}px`, position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: (e) => {
+                        const bounds = e.currentTarget.getBoundingClientRect();
+                        const x = ((e.clientX - bounds.left) / bounds.width) * 100;
+                        const y = ((e.clientY - bounds.top) / bounds.height) * 100;
+                        setTransformOrigin(`${x}% ${y}%`);
+                    }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
+                        setIsHovered(false);
+                        setTransformOrigin("center center");
+                    }, children: [_jsx(Box, { position: "absolute", top: "2", left: "2", zIndex: "1", children: _jsx(Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid", children: batch === null || batch === void 0 ? void 0 : batch.label }) }), (() => {
+                            const item = images === null || images === void 0 ? void 0 : images[activeIndex];
+                            const url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
+                            const isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
+                            const yt = getYouTubeId(url);
+                            const vimeo = getVimeoId(url);
+                            const dm = getDailymotionId(url);
+                            const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
+                            if (isVideo) {
+                                if (!isPlaying) {
+                                    return (_jsxs(Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [_jsx(Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: _jsx(Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
+                                }
+                                return yt ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : (_jsx(Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
+                            }
+                            return (_jsx(Image, { src: url, 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" }));
+                        })(), hasMultiple && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: () => {
+                                        var _a;
+                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
+                                        const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
+                                        updateActiveIndex(newIndex);
+                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: () => {
+                                        var _a;
+                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
+                                        const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
+                                        updateActiveIndex(newIndex);
+                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })] }))] })] })) }));
+}