pixelize-design-library 2.4.2 → 3.0.0

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

@@ -1,8 +0,0 @@
-import { SizeType } from './ProductCardProps';
-type ProductTagsProps = {
-    tags: string[];
-    className?: string;
-    size: SizeType;
-};
-declare const ProductTags: ({ tags, className, size }: ProductTagsProps) => import("react/jsx-runtime").JSX.Element;
-export default ProductTags;

package/dist/Components/ProductCard/ProductTags.js

@@ -1,53 +0,0 @@
-"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 react_2 = require("@chakra-ui/react");
-const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-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 ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: "1", className: className, w: "full", children: getRows(tags).map((row, rowIndex) => ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: "1", children: row.map((tag, tagIndex) => ((0, jsx_runtime_1.jsx)(Tag, { fullWidth: row.length === 1, size: size, children: tag }, tagIndex))) }, rowIndex))) }));
-};
-const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const tagBorder = colors.semanticText.error;
-    const tagText = 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_1.default.useRef(null);
-    const [truncated, setTruncated] = react_1.default.useState(false);
-    react_1.default.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 = ((0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom', children: content })) : (content);
-};
-exports.default = ProductTags;

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

@@ -1,7 +0,0 @@
-import { options } from "../ProductCard/ProductCardProps";
-interface ProductDtlPriceProps {
-    price: options[];
-    onSelect?: (option: options) => void;
-}
-declare const ProductDtlPrice: ({ price, onSelect }: ProductDtlPriceProps) => import("react/jsx-runtime").JSX.Element;
-export default ProductDtlPrice;

package/dist/Components/ProductDetails/ProductDtlPrice.js

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

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

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

package/dist/Components/ProductDetails/ProductImageSlider.js

@@ -1,224 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ProductImageSlider;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const react_2 = __importStar(require("react"));
-const lucide_react_1 = require("lucide-react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbnailsToShow = 6, batch, }) {
-    const [activeIndex, setActiveIndex] = (0, react_2.useState)(0);
-    const [thumbStartIndex, setThumbStartIndex] = (0, react_2.useState)(0);
-    const [transformOrigin, setTransformOrigin] = (0, react_2.useState)("center center");
-    const [isHovered, setIsHovered] = (0, react_2.useState)(false);
-    const [isPlaying, setIsPlaying] = (0, react_2.useState)(false);
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const isMobile = (0, react_1.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_2.default.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 ((0, jsx_runtime_1.jsx)(react_1.Flex, { maxW: "6xl", mx: "auto", gap: 4, direction: isMobile ? "column" : "row", children: isMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1", children: (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
-                                }
-                                return yt ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
-                            }
-                            return ((0, jsx_runtime_1.jsx)(react_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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" }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 && ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 ((0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
-                        }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Right", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm" })] }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasMultiple && ((0, jsx_runtime_1.jsxs)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight * thumbnailsToShow}px`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Up", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }), (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` })) }, actualIndex));
-                            }) }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })] })), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1", children: (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
-                                }
-                                return yt ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
-                            }
-                            return ((0, jsx_runtime_1.jsx)(react_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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" }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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" })] }))] })] })) }));
-}

package/dist/Components/Table/hooks/useDebounce.d.ts

@@ -1,2 +0,0 @@
-declare const useDebounce: (callback: (...args: unknown[]) => void, delay: number) => (...args: unknown[]) => void;
-export default useDebounce;

package/dist/Components/Table/hooks/useDebounce.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-// First, create a custom debounce hook
-const useDebounce = (callback, delay) => {
-    const timeoutRef = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    const debouncedCallback = (0, react_1.useCallback)((...args) => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
-            callback(...args);
-        }, delay);
-    }, [callback, delay]);
-    return debouncedCallback;
-};
-exports.default = useDebounce;

package/dist/Components/Trail/EditableCell.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { Row, Column } from "./data";
-interface EditableCellProps {
-    row: Row;
-    column: Column;
-    isEditable: boolean;
-    handleCellClick: (rowId: number, columnId: number) => void;
-    handleCellChange: (rowId: number, columnLabel: string, value: string) => void;
-}
-export declare const EditableCell: React.FC<EditableCellProps>;
-export {};

package/dist/Components/Trail/EditableCell.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditableCell = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const lucide_react_1 = require("lucide-react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const cellRef = (0, react_1.useRef)(null);
-    (0, react_2.useOutsideClick)({
-        ref: cellRef,
-        handler: () => {
-            var _a;
-            return handleCellChange(row.id, column.label, String((_a = row[column.label]) !== null && _a !== void 0 ? _a : ""));
-        },
-    });
-    const value = row[column.label] || "-";
-    if (isEditable) {
-        if (column.label === "dueDate") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "50%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
-        }
-        else if (column.label === "priority") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: colors.teal[100] }, children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: colors.teal[100] }, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: colors.teal[100] }, children: "High" })] })] }) }));
-        }
-        else {
-            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
-        }
-    }
-    return ((0, jsx_runtime_1.jsx)("span", { onClick: () => handleCellClick(row.id, column.id), children: value }));
-};
-exports.EditableCell = EditableCell;

package/dist/Components/Trail/SelectAllCheckbox.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-interface SelectAllCheckboxProps {
-    isAllSelected: boolean;
-    isIndeterminate: boolean;
-    handleSelectAll: () => void;
-}
-export declare const SelectAllCheckbox: React.FC<SelectAllCheckboxProps>;
-export {};

package/dist/Components/Trail/SelectAllCheckbox.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectAllCheckbox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const SelectAllCheckbox = ({ isAllSelected, isIndeterminate, handleSelectAll, }) => {
-    return ((0, jsx_runtime_1.jsx)(react_1.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
-};
-exports.SelectAllCheckbox = SelectAllCheckbox;

package/dist/Components/Trail/TrailWorks.d.ts

@@ -1,2 +0,0 @@
-declare const TrailWorks: () => import("react/jsx-runtime").JSX.Element;
-export default TrailWorks;

package/dist/Components/Trail/TrailWorks.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const TrailWorks = () => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const cellBorder = colors.boxborder[200];
-    const data = [
-        {
-            contact: "John Doe",
-            type: "Customer",
-            deals: 5,
-            phone: "555-555-5555",
-            email: "hhhhh@gmail.com",
-        },
-        {
-            contact: "John Doe",
-            type: "Customer",
-            deals: 5,
-            phone: "555-555-5555",
-            email: "hhhhh@gmail.com",
-        },
-    ];
-    const columns = [
-        {
-            Header: "Contact",
-            accessor: "contact",
-        },
-        {
-            Header: "Type",
-            accessor: "type",
-        },
-        {
-            Header: "Deals",
-            accessor: "deals",
-        },
-        {
-            Header: "Phone",
-            accessor: "phone",
-        },
-        {
-            Header: "Email",
-            accessor: "email",
-        },
-    ];
-    const renderRow = (row, index) => {
-        return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { border: "1px solid", borderColor: cellBorder, children: [(0, jsx_runtime_1.jsx)(react_1.Td, { border: "1px solid", borderColor: cellBorder, padding: "5px", children: (0, jsx_runtime_1.jsx)(react_1.Checkbox, {}) }), columns.map((column, colIndex) => {
-                    return ((0, jsx_runtime_1.jsx)(react_1.Td, { border: "1px solid", borderColor: cellBorder, children: row[column.accessor] }, colIndex));
-                })] }, index));
-    };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { width: "100%", overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_1.Table, { variant: "simple", size: "md", border: "1px solid", borderColor: cellBorder, children: [(0, jsx_runtime_1.jsx)(react_1.Thead, { border: "1px solid", borderColor: cellBorder, children: (0, jsx_runtime_1.jsxs)(react_1.Tr, { border: "1px solid", borderColor: cellBorder, children: [(0, jsx_runtime_1.jsx)(react_1.Th, { border: "1px solid", borderColor: cellBorder, padding: "5px", children: (0, jsx_runtime_1.jsx)(react_1.Checkbox, {}) }), columns.map((column, index) => {
-                                return ((0, jsx_runtime_1.jsx)(react_1.Th, { border: "1px solid", borderColor: cellBorder, children: column.Header }, index));
-                            })] }) }), (0, jsx_runtime_1.jsx)(react_1.Tbody, { border: "1px solid", borderColor: cellBorder, children: data.map((row, index) => renderRow(row, index)) })] }) }));
-};
-exports.default = TrailWorks;

package/dist/Components/Trail/data.d.ts

@@ -1,15 +0,0 @@
-export type Row = {
-    id: number;
-    project: string;
-    owner: string;
-    status: string;
-    priority: string;
-    dueDate: string;
-    [key: string]: string | number | undefined;
-};
-export type Column = {
-    id: number;
-    label: keyof Row | string;
-};
-export declare const initialColumns: Column[];
-export declare const initialRows: Row[];

package/dist/Components/Trail/data.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.initialRows = exports.initialColumns = void 0;
-exports.initialColumns = [
-    { id: 1, label: "project" },
-    { id: 2, label: "owner" },
-    { id: 3, label: "status" },
-    { id: 4, label: "priority" },
-    { id: 5, label: "dueDate" },
-];
-exports.initialRows = [
-    {
-        id: 1,
-        project: "Project A",
-        owner: "Owner A",
-        status: "In Progress",
-        priority: "High",
-        dueDate: "2023-12-31",
-    },
-    {
-        id: 2,
-        project: "Project B",
-        owner: "Owner B",
-        status: "Completed",
-        priority: "Medium",
-        dueDate: "2023-11-30",
-    },
-    // Add more initial rows as needed
-];

package/dist/Theme/chakra/Avatar.styles.d.ts

@@ -1,32 +0,0 @@
-import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $badgeBorder: {
-    variable: string;
-    reference: string;
-};
-export declare const Avatar: {
-    baseStyle?: (({ theme }: StyleFunctionProps) => {
-        badge: {
-            [$badgeBorder.variable]: string;
-        };
-        container: {
-            [$badgeBorder.variable]: string;
-        };
-    }) | undefined;
-    sizes?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
-        }>;
-    } | undefined;
-    variants?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
-        }>;
-    } | undefined;
-    defaultProps?: {
-        size?: string | number | undefined;
-        variant?: string | number | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("group" | "label" | "container" | "badge" | "excessLabel")[];
-};
-export {};

package/dist/Theme/chakra/Avatar.styles.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-const paletteFromTheme_1 = require("./paletteFromTheme");
-const react_1 = require("@chakra-ui/react");
-const anatomy_1 = require("@chakra-ui/anatomy");
-const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.avatarAnatomy.keys);
-const $badgeBorder = (0, react_1.cssVar)("avatar-border-color");
-/**
- * Same bug class as Menu/Modal/Popover: Chakra's own Avatar baseStyle hardcodes the badge/
- * container border color to `colors.white` outside `_dark` (it's a cutout ring meant to match
- * the surface the avatar sits on), gated behind `_dark`, which this theme-swap app never
- * triggers. Every bare `<Avatar>`/`<AvatarBadge>` renders a white ring on the dark canvas.
- */
-const baseStyle = definePartsStyle(({ theme }) => {
-    const border = (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light;
-    return {
-        badge: {
-            [$badgeBorder.variable]: border,
-        },
-        container: {
-            [$badgeBorder.variable]: border,
-        },
-    };
-});
-exports.Avatar = defineMultiStyleConfig({
-    baseStyle,
-});