payaza-storefront-layouts 1.0.0

package/dist/components/ui/image-with-fallback.js

@@ -0,0 +1,203 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { cn } from '../../lib/utils';
+import { ImageSkeleton } from './image-skeleton';
+export function ImageWithFallback({ src, alt, className, fallbackSrc, fallbackText, skeletonAspectRatio = 'square', showSkeletonOnError = true, ...props }) {
+    // Initialize loading state based on whether we have a valid src
+    const initialSrc = typeof src === 'string' && src.trim() ? src : undefined;
+    const [isLoading, setIsLoading] = useState(!!initialSrc); // Only loading if we have a src
+    const [error, setError] = useState(false);
+    const [currentSrc, setCurrentSrc] = useState(initialSrc);
+    const prevSrcRef = useRef(src);
+    const prevFallbackRef = useRef(fallbackSrc);
+    const hasTriedFallback = useRef(false);
+    const imageRef = useRef(null);
+    const mountedRef = useRef(false);
+    // Set mounted flag
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    // Reset when src or fallbackSrc changes
+    useEffect(() => {
+        const currentSrcValue = typeof src === 'string' && src.trim() ? src : undefined;
+        const hasChanged = currentSrcValue !== prevSrcRef.current || fallbackSrc !== prevFallbackRef.current;
+        if (hasChanged) {
+            const newSrc = currentSrcValue || (fallbackSrc && fallbackSrc.trim() ? fallbackSrc : undefined);
+            // Only set loading if we have a valid src to load
+            setIsLoading(!!newSrc);
+            setCurrentSrc(newSrc);
+            setError(false);
+            hasTriedFallback.current = false;
+            prevSrcRef.current = currentSrcValue;
+            prevFallbackRef.current = fallbackSrc;
+            // Reset image ref to force reload
+            if (imageRef.current) {
+                imageRef.current.src = '';
+            }
+            // Debug logging (only in development)
+            if (process.env.NODE_ENV === 'development') {
+                console.log('[ImageWithFallback] Source changed:', {
+                    src: currentSrcValue,
+                    fallbackSrc,
+                    newSrc,
+                    alt,
+                    willLoad: !!newSrc
+                });
+            }
+        }
+    }, [src, fallbackSrc, alt]);
+    // Helper function to check if image is loaded and update state
+    const checkAndUpdateImageState = (img, forceCheck = false) => {
+        if (!mountedRef.current || !img)
+            return;
+        // Check if image is already loaded (cached images)
+        // naturalHeight > 0 means image has loaded successfully
+        if (img.complete && img.naturalHeight !== 0) {
+            if (forceCheck || isLoading) {
+                setIsLoading(false);
+                setError(false);
+                return true; // Image is loaded
+            }
+        }
+        return false; // Image not loaded yet
+    };
+    // Aggressive check after currentSrc changes to handle cached images
+    useEffect(() => {
+        if (!mountedRef.current || !currentSrc)
+            return;
+        // Multiple checks at different intervals to catch cached images
+        const checkImage = () => {
+            if (imageRef.current && isLoading) {
+                const isLoaded = checkAndUpdateImageState(imageRef.current, true);
+                return isLoaded;
+            }
+            return false;
+        };
+        // Immediate check
+        if (checkImage())
+            return;
+        let timeout1 = null;
+        let timeout2 = null;
+        // Check after DOM update (requestAnimationFrame)
+        const rafId = requestAnimationFrame(() => {
+            if (checkImage())
+                return;
+            // If still not loaded, check again after small delays (covers various timing scenarios)
+            timeout1 = setTimeout(() => {
+                if (checkImage())
+                    return;
+                // Final check after a bit more time
+                timeout2 = setTimeout(() => {
+                    checkImage();
+                }, 100);
+            }, 50);
+        });
+        return () => {
+            cancelAnimationFrame(rafId);
+            if (timeout1)
+                clearTimeout(timeout1);
+            if (timeout2)
+                clearTimeout(timeout2);
+        };
+    }, [currentSrc, isLoading]);
+    const handleLoad = () => {
+        if (mountedRef.current) {
+            setIsLoading(false);
+            setError(false);
+        }
+    };
+    const handleError = () => {
+        console.warn('[ImageWithFallback] Image failed to load:', {
+            currentSrc,
+            originalSrc: src,
+            fallbackSrc,
+            hasTriedFallback: hasTriedFallback.current,
+            alt
+        });
+        // Try fallback first if we haven't already and it's provided
+        if (fallbackSrc && fallbackSrc.trim() && !hasTriedFallback.current && currentSrc !== fallbackSrc) {
+            hasTriedFallback.current = true;
+            setCurrentSrc(fallbackSrc);
+            setError(false);
+            setIsLoading(true);
+            return;
+        }
+        // All fallbacks failed - stop loading and show error state
+        setError(true);
+        setIsLoading(false);
+    };
+    // Determine what to render based on state
+    // Priority: 1) No src -> skeleton, 2) Loading -> skeleton, 3) Error -> skeleton or error div, 4) Success -> image
+    // Case 1: No src at all
+    if (!currentSrc) {
+        if (process.env.NODE_ENV === 'development') {
+            console.log('[ImageWithFallback] No src - showing skeleton:', { src, fallbackSrc, alt });
+        }
+        return _jsx(ImageSkeleton, { className: className, aspectRatio: skeletonAspectRatio });
+    }
+    // Case 2: Currently loading (have src but image hasn't loaded yet)
+    // Render the image hidden so it can load, but show skeleton overlay
+    if (isLoading && currentSrc) {
+        if (process.env.NODE_ENV === 'development') {
+            console.log('[ImageWithFallback] Loading - showing skeleton with hidden image:', { currentSrc, alt });
+        }
+        return (_jsxs("div", { className: cn("relative", className), children: [_jsx("img", { ref: (node) => {
+                        imageRef.current = node;
+                        // Check if image is already loaded (cached images) - this handles instant loads
+                        if (node) {
+                            // Immediate check for cached images
+                            if (node.complete && node.naturalHeight !== 0) {
+                                // Image is already loaded, update state immediately
+                                if (mountedRef.current) {
+                                    setIsLoading(false);
+                                    setError(false);
+                                }
+                            }
+                            else {
+                                // Use requestAnimationFrame for images that might load quickly
+                                requestAnimationFrame(() => {
+                                    checkAndUpdateImageState(node, true);
+                                });
+                            }
+                        }
+                    }, src: currentSrc, alt: alt || 'Product image', className: "absolute inset-0 w-full h-full opacity-0", onLoad: handleLoad, onError: handleError, loading: "lazy", ...props }), _jsx(ImageSkeleton, { className: className, aspectRatio: skeletonAspectRatio })] }));
+    }
+    // Case 3: Error occurred
+    if (error) {
+        if (showSkeletonOnError && !fallbackText) {
+            if (process.env.NODE_ENV === 'development') {
+                console.log('[ImageWithFallback] Error - showing skeleton:', { currentSrc, alt });
+            }
+            return _jsx(ImageSkeleton, { className: className, aspectRatio: skeletonAspectRatio });
+        }
+        else {
+            // Show placeholder div instead of skeleton
+            return (_jsxs("div", { className: cn("flex flex-col items-center justify-center bg-gray-100 text-gray-400 border border-gray-200", className), style: { minHeight: '100px' }, children: [_jsx("svg", { className: "w-1/4 h-1/4 max-w-[48px] max-h-[48px] opacity-20", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), fallbackText && _jsx("span", { className: "text-[10px] uppercase tracking-widest font-bold mt-2 opacity-40", children: fallbackText })] }));
+        }
+    }
+    // Case 4: Image loaded successfully - show the image
+    return (_jsx("img", { ref: (node) => {
+            imageRef.current = node;
+            // Check if image is already loaded (cached images) - this handles instant loads
+            if (node) {
+                // Immediate check for cached images
+                if (node.complete && node.naturalHeight !== 0) {
+                    // Image is already loaded, update state immediately
+                    if (mountedRef.current) {
+                        setIsLoading(false);
+                        setError(false);
+                    }
+                }
+                else {
+                    // Use requestAnimationFrame for images that might load quickly
+                    requestAnimationFrame(() => {
+                        checkAndUpdateImageState(node, true);
+                    });
+                }
+            }
+        }, src: currentSrc, alt: alt || 'Product image', className: className, onLoad: handleLoad, onError: handleError, loading: "lazy", ...props }));
+}

package/dist/components/ui/input.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,UACb,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;CAAI;AAE3D,QAAA,MAAM,KAAK,qFAcV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+    return (_jsx("input", { type: type, className: cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));
+});
+Input.displayName = "Input";
+export { Input };

package/dist/components/ui/loading-skeleton-wrapper.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Client component wrapper for Next.js loading.tsx files
+ * Uses pathname to determine which skeleton to show
+ */
+export declare function LoadingSkeletonWrapper(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=loading-skeleton-wrapper.d.ts.map

package/dist/components/ui/loading-skeleton-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-skeleton-wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/ui/loading-skeleton-wrapper.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,sBAAsB,4CAErC"}

package/dist/components/ui/loading-skeleton-wrapper.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RouteSkeletonLoader } from './route-skeleton-loader';
+/**
+ * Client component wrapper for Next.js loading.tsx files
+ * Uses pathname to determine which skeleton to show
+ */
+export function LoadingSkeletonWrapper() {
+    return _jsx(RouteSkeletonLoader, {});
+}

package/dist/components/ui/modal.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Modal({ isOpen, onClose, title, children, className }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/ui/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,UAAU;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,UAAU,2CAkDhF"}

package/dist/components/ui/modal.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+export function Modal({ isOpen, onClose, title, children, className }) {
+    const overlayRef = React.useRef(null);
+    React.useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [_jsx("div", { ref: overlayRef, className: "absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity", onClick: onClose }), _jsxs("div", { className: cn("relative bg-white rounded-lg shadow-xl w-full max-w-lg overflow-hidden animate-in fade-in zoom-in-95 duration-200", className), children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [_jsx("h3", { className: "text-lg font-semibold", children: title }), _jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, className: "rounded-full", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "p-4", children: children })] })] }));
+}

package/dist/components/ui/otp-input.d.ts

@@ -0,0 +1,10 @@
+interface OtpInputProps {
+    length?: number;
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function OtpInput({ length, value, onChange, disabled, className, }: OtpInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=otp-input.d.ts.map

package/dist/components/ui/otp-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/otp-input.tsx"],"names":[],"mappings":"AAGA,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,QAAQ,CAAC,EACvB,MAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,GACV,EAAE,aAAa,2CAkFf"}

package/dist/components/ui/otp-input.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+export function OtpInput({ length = 6, value, onChange, disabled = false, className, }) {
+    const inputRefs = React.useRef([]);
+    const handleChange = (index, e) => {
+        const newValue = e.target.value;
+        if (isNaN(Number(newValue)))
+            return;
+        const newOtp = value.split('');
+        // Handle case where user types multiple characters (some browsers/mobile)
+        const lastChar = newValue.substring(newValue.length - 1);
+        newOtp[index] = lastChar;
+        const result = newOtp.join('').substring(0, length);
+        onChange(result);
+        // Move to next input if value is entered
+        if (newValue && index < length - 1) {
+            inputRefs.current[index + 1]?.focus();
+        }
+    };
+    const handleKeyDown = (index, e) => {
+        if (e.key === 'Backspace') {
+            if (!value[index] && index > 0) {
+                // If empty and backspace pressed, move to previous and delete
+                const newOtp = value.split('');
+                newOtp[index - 1] = '';
+                onChange(newOtp.join(''));
+                inputRefs.current[index - 1]?.focus();
+            }
+            else {
+                // Just delete current
+                const newOtp = value.split('');
+                newOtp[index] = '';
+                onChange(newOtp.join(''));
+            }
+        }
+        else if (e.key === 'ArrowLeft' && index > 0) {
+            inputRefs.current[index - 1]?.focus();
+        }
+        else if (e.key === 'ArrowRight' && index < length - 1) {
+            inputRefs.current[index + 1]?.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData('text/plain').replace(/\D/g, '').slice(0, length);
+        onChange(pastedData);
+        // Focus the last filled input or the first empty one
+        const nextIndex = Math.min(pastedData.length, length - 1);
+        inputRefs.current[nextIndex]?.focus();
+    };
+    return (_jsx("div", { className: cn("flex gap-2 sm:gap-4 justify-center", className), children: Array.from({ length }).map((_, index) => (_jsx("input", { ref: (el) => {
+                inputRefs.current[index] = el;
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: value[index] || '', onChange: (e) => handleChange(index, e), onKeyDown: (e) => handleKeyDown(index, e), onPaste: handlePaste, disabled: disabled, className: cn("w-10 h-12 sm:w-12 sm:h-14 text-center text-2xl font-bold border-2 rounded-lg transition-all bg-background", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary focus:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", value[index]
+                ? "border-primary text-foreground"
+                : "border-gray-200 text-muted-foreground"), "aria-label": `Digit ${index + 1}`, autoComplete: "one-time-code" }, index))) }));
+}

package/dist/components/ui/out-of-stock-overlay.d.ts

@@ -0,0 +1,8 @@
+interface OutOfStockOverlayProps {
+    className?: string;
+    showBadge?: boolean;
+    badgePosition?: 'top-left' | 'top-right' | 'center' | 'bottom-center';
+}
+export declare function OutOfStockOverlay({ className, showBadge, badgePosition }: OutOfStockOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=out-of-stock-overlay.d.ts.map

package/dist/components/ui/out-of-stock-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"out-of-stock-overlay.d.ts","sourceRoot":"","sources":["../../../src/components/ui/out-of-stock-overlay.tsx"],"names":[],"mappings":"AAIA,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,eAAe,CAAC;CACvE;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,SAAgB,EAChB,aAAwB,EACzB,EAAE,sBAAsB,2CA8BxB"}

package/dist/components/ui/out-of-stock-overlay.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+export function OutOfStockOverlay({ className, showBadge = true, badgePosition = 'center' }) {
+    const badgePositions = {
+        'top-left': 'top-4 left-4',
+        'top-right': 'top-4 right-4',
+        'center': 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+        'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    };
+    return (_jsx("div", { className: cn("absolute inset-0 bg-black/40 backdrop-blur-[1px] z-10 flex items-center justify-center", className), "aria-label": "Out of stock", children: showBadge && (_jsx("div", { className: cn("absolute z-20", badgePositions[badgePosition]), children: _jsx("span", { className: "inline-flex items-center px-4 py-2 rounded-full text-sm font-bold bg-red-600 text-white shadow-lg border-2 border-white/50", children: "Out of Stock" }) })) }));
+}

package/dist/components/ui/page-animate-wrapper.d.ts

@@ -0,0 +1,7 @@
+interface PageAnimateWrapperProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function PageAnimateWrapper({ children, className }: PageAnimateWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=page-animate-wrapper.d.ts.map

package/dist/components/ui/page-animate-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-animate-wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/ui/page-animate-wrapper.tsx"],"names":[],"mappings":"AAMA,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,uBAAuB,2CAsBlF"}

package/dist/components/ui/page-animate-wrapper.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { cn } from '../../lib/utils';
+export function PageAnimateWrapper({ children, className }) {
+    const pathname = usePathname();
+    const [shouldAnimate, setShouldAnimate] = useState(false);
+    useEffect(() => {
+        setShouldAnimate(false);
+        // Small timeout to reset animation state and trigger reflow
+        const timer = setTimeout(() => setShouldAnimate(true), 10);
+        return () => clearTimeout(timer);
+    }, [pathname]);
+    return (_jsx("div", { className: cn("animate-fade-in", className), children: children }, pathname));
+}

package/dist/components/ui/page-content-loader.d.ts

@@ -0,0 +1,13 @@
+interface PageContentLoaderProps {
+    className?: string;
+    minHeight?: number;
+    text?: string;
+}
+/**
+ * PageContentLoader component that displays a spinner loader
+ * with minimum height for proper user feedback during backend operations.
+ * Uses fixed positioning to center spinner on viewport regardless of scroll position.
+ */
+export declare function PageContentLoader({ className, minHeight, text }: PageContentLoaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=page-content-loader.d.ts.map

package/dist/components/ui/page-content-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-content-loader.d.ts","sourceRoot":"","sources":["../../../src/components/ui/page-content-loader.tsx"],"names":[],"mappings":"AAKA,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,SAAe,EACf,IAAI,EACL,EAAE,sBAAsB,2CAYxB"}

package/dist/components/ui/page-content-loader.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { PageLoader } from './page-loader';
+/**
+ * PageContentLoader component that displays a spinner loader
+ * with minimum height for proper user feedback during backend operations.
+ * Uses fixed positioning to center spinner on viewport regardless of scroll position.
+ */
+export function PageContentLoader({ className, minHeight = 500, text }) {
+    return (_jsx("div", { className: cn('fixed inset-0 flex items-center justify-center w-full h-full bg-white/95 backdrop-blur-sm z-40', className), style: { minHeight: `${minHeight}px` }, children: _jsx(PageLoader, { size: "lg", text: text }) }));
+}

package/dist/components/ui/page-loader.d.ts

@@ -0,0 +1,20 @@
+interface PageLoaderProps {
+    fullPage?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    text?: string;
+}
+export declare function PageLoader({ fullPage, size, className, text }: PageLoaderProps): import("react/jsx-runtime").JSX.Element;
+interface InlineLoaderProps {
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    color?: string;
+}
+export declare function InlineLoader({ size, className, color }: InlineLoaderProps): import("react/jsx-runtime").JSX.Element;
+interface ButtonLoaderProps {
+    className?: string;
+    color?: string;
+}
+export declare function ButtonLoader({ className, color }: ButtonLoaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=page-loader.d.ts.map

package/dist/components/ui/page-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-loader.d.ts","sourceRoot":"","sources":["../../../src/components/ui/page-loader.tsx"],"names":[],"mappings":"AAyCA,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAgB,EAChB,IAAW,EACX,SAAS,EACT,IAAI,EACL,EAAE,eAAe,2CAmBjB;AAED,UAAU,iBAAiB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,iBAAiB,2CAQhF;AAED,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,iBAAiB,2CAQnE"}

package/dist/components/ui/page-loader.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+function Spinner({ size = 'md', className, color = 'text-gray-900' }) {
+    const sizeClasses = {
+        sm: 'w-4 h-4',
+        md: 'w-8 h-8',
+        lg: 'w-12 h-12',
+    };
+    const borderClasses = {
+        sm: 'border-2',
+        md: 'border-[3px]',
+        lg: 'border-4',
+    };
+    return (_jsx("div", { className: cn('rounded-full border-solid border-t-transparent border-r-transparent', 'animate-spin', sizeClasses[size], borderClasses[size], color, 'border-l-current border-b-current', className), style: {
+            animationTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        } }));
+}
+export function PageLoader({ fullPage = false, size = 'md', className, text }) {
+    const spinner = (_jsxs("div", { className: cn('flex flex-col items-center justify-center gap-3', className), children: [_jsx(Spinner, { size: size, color: "text-gray-900" }), text && (_jsx("p", { className: "text-sm text-gray-600 font-medium animate-pulse", children: text }))] }));
+    if (fullPage) {
+        return (_jsx("div", { className: "fixed inset-0 bg-white/90 backdrop-blur-sm z-50 flex items-center justify-center", children: spinner }));
+    }
+    return spinner;
+}
+export function InlineLoader({ size = 'sm', className, color }) {
+    return (_jsx(Spinner, { size: size, className: className, color: color || 'text-gray-600' }));
+}
+export function ButtonLoader({ className, color }) {
+    return (_jsx(Spinner, { size: "sm", className: className, color: color || 'text-current' }));
+}

package/dist/components/ui/product-card.d.ts

@@ -0,0 +1,11 @@
+import { StoreProduct } from '../../lib/store-types';
+interface ProductCardProps {
+    product: StoreProduct;
+    storeSlug: string;
+    onAddToCart: (product: StoreProduct) => void;
+    onQuickView: (product: StoreProduct) => void;
+    className?: string;
+}
+export declare function ProductCard({ product, storeSlug, onAddToCart, onQuickView, className }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-card.d.ts.map

package/dist/components/ui/product-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAajD,UAAU,gBAAgB;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAgNxG"}

package/dist/components/ui/product-card.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../components/ui/button';
+import { ImageWithFallback } from '../../components/ui/image-with-fallback';
+import { ProductRating } from '../../components/ui/product-rating';
+import { ShoppingCart, Heart, Eye } from 'lucide-react';
+import Link from 'next/link';
+import { cn, formatCurrency } from '../../lib/utils';
+import { useStore } from '../../lib/store-context';
+import { useToast } from '../../components/ui/toast';
+import { ButtonLoader } from '../../components/ui/page-loader';
+import { useLoading } from '../../lib/loading-context';
+import { OutOfStockOverlay } from '../../components/ui/out-of-stock-overlay';
+export function ProductCard({ product, storeSlug, onAddToCart, onQuickView, className }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const { toggleWishlist, isInWishlist, isWishlistLoading } = useStore();
+    const { addToast } = useToast();
+    const { startPageLoading } = useLoading();
+    const [localWishlistLoading, setLocalWishlistLoading] = useState(false);
+    const handleProductClick = () => {
+        startPageLoading();
+    };
+    const handleWishlistClick = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // REMOVE IN PRODUCTION: Log wishlist click
+        console.log('[ProductCard] Wishlist button clicked:', {
+            productId: product.id,
+            productName: product.name,
+            isInWishlist: isInWishlist(product.id),
+            isLoading: localWishlistLoading || isWishlistLoading
+        });
+        if (localWishlistLoading || isWishlistLoading) {
+            console.warn('[ProductCard] Wishlist action already in progress, ignoring click');
+            return;
+        }
+        setLocalWishlistLoading(true);
+        try {
+            const wasInWishlist = isInWishlist(product.id);
+            console.log('[ProductCard] Toggling wishlist:', { productId: product.id, wasInWishlist });
+            await toggleWishlist(product.id);
+            console.log('[ProductCard] Wishlist toggled successfully');
+            addToast(wasInWishlist
+                ? `${product.name} removed from wishlist`
+                : `${product.name} added to wishlist`, 'success');
+        }
+        catch (error) {
+            console.error('[ProductCard] Failed to toggle wishlist:', error);
+            addToast('Failed to update wishlist', 'error');
+        }
+        finally {
+            setLocalWishlistLoading(false);
+        }
+    };
+    const inWishlist = isInWishlist(product.id);
+    const isLoading = localWishlistLoading || isWishlistLoading;
+    const isOutOfStock = !product.inStock;
+    // Validate and extract image URLs
+    // Ensure images is an array of valid string URLs
+    const validImages = Array.isArray(product.images)
+        ? product.images.filter((img) => typeof img === 'string' && img.trim().length > 0)
+        : [];
+    // Determine which image to show
+    const hasSecondImage = validImages.length > 1;
+    const currentImage = isHovered && hasSecondImage && validImages[1]
+        ? validImages[1]
+        : validImages[0] || undefined;
+    // Debug logging for images (can be removed in production)
+    if (process.env.NODE_ENV === 'development') {
+        if (validImages.length === 0) {
+            console.warn(`[ProductCard] Product "${product.name}" (${product.id}) has no valid images:`, {
+                productId: product.id,
+                productName: product.name,
+                originalImages: product.images,
+                validImagesCount: validImages.length
+            });
+        }
+        else {
+            console.log(`[ProductCard] Product "${product.name}" (${product.id}) images:`, {
+                productId: product.id,
+                validImagesCount: validImages.length,
+                firstImage: validImages[0],
+                currentImage: currentImage,
+                hasSecondImage: hasSecondImage
+            });
+        }
+    }
+    return (_jsxs("div", { "data-product-card": true, className: cn("group relative flex flex-col h-full bg-white rounded-lg overflow-hidden border border-gray-100 hover:border-gray-300 transition-all duration-300 hover:shadow-md", className), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs("div", { className: "relative aspect-[3/4] bg-gray-50 overflow-hidden", children: [_jsx(Link, { href: `/${storeSlug}/products/${product.slug}`, onClick: handleProductClick, className: "block w-full h-full", children: _jsx(ImageWithFallback, { src: currentImage, alt: product.name, className: cn("w-full h-full object-cover transition-all duration-700 ease-in-out", isHovered && !hasSecondImage ? "scale-110" : "scale-100", isOutOfStock && "grayscale"), skeletonAspectRatio: "3/4" }) }), isOutOfStock && (_jsx(OutOfStockOverlay, { badgePosition: "center" })), (product.compareAtPrice || (product.rating && product.rating >= 4.8)) && (_jsxs("div", { className: "absolute top-3 left-3 flex flex-col gap-2 z-10", children: [product.compareAtPrice && (_jsx("span", { className: "bg-red-500 text-white text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm", children: "Sale" })), !product.compareAtPrice && product.rating && product.rating >= 4.8 && (_jsx("span", { className: "bg-white/90 backdrop-blur-sm text-slate-900 text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm border border-gray-100", children: "Top Rated" }))] })), _jsx("button", { onClick: handleWishlistClick, disabled: isLoading, className: cn("absolute top-3 right-3 p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-all duration-300 shadow-sm opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0 disabled:opacity-50 disabled:cursor-not-allowed z-30", inWishlist ? "text-red-500" : "text-slate-600 hover:text-red-500"), title: inWishlist ? "Remove from wishlist" : "Add to wishlist", children: isLoading ? (_jsx(ButtonLoader, { className: "text-red-500" })) : (_jsx(Heart, { className: cn("h-4 w-4", inWishlist && "fill-current") })) }), _jsxs("div", { className: "absolute bottom-4 inset-x-4 flex items-center gap-2 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 ease-out z-20", children: [_jsx(Link, { href: `/${storeSlug}/products/${product.slug}`, className: "h-10 w-10 flex items-center justify-center rounded-full bg-white text-slate-900 hover:bg-slate-900 hover:text-white border border-transparent shadow-lg transition-colors duration-200", title: "View Details", children: _jsx(Eye, { className: "h-4 w-4" }) }), _jsxs(Button, { onClick: async (e) => {
+                                    e.preventDefault();
+                                    if (!isOutOfStock) {
+                                        await onAddToCart(product);
+                                    }
+                                }, disabled: isOutOfStock, className: cn("flex-1 h-10 bg-white text-slate-900 hover:bg-slate-900 hover:text-white font-bold border border-transparent shadow-lg rounded-full transition-colors duration-200", isOutOfStock && "opacity-50 cursor-not-allowed"), children: [_jsx(ShoppingCart, { className: "h-4 w-4 mr-2" }), " Add"] })] })] }), _jsxs("div", { className: "p-4 flex flex-col flex-1 space-y-2", children: [_jsx(Link, { href: `/${storeSlug}/products/${product.slug}`, className: "group-hover:text-blue-600 transition-colors duration-300", onClick: () => startPageLoading(`/${storeSlug}/products/${product.slug}`), children: _jsx("h3", { className: "font-bold text-slate-900 text-base leading-tight line-clamp-1", children: product.name }) }), product.description && (_jsx("p", { className: "text-xs text-slate-500 line-clamp-1", children: product.description })), _jsxs("div", { className: "mt-auto pt-2 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-lg font-bold text-slate-900", children: formatCurrency(product.price, product.currency || 'USD') }), product.compareAtPrice && (_jsx("span", { className: "text-sm text-slate-400 line-through font-medium", children: formatCurrency(product.compareAtPrice, product.currency || 'USD') }))] }), _jsx(ProductRating, { rating: product.rating, reviewCount: product.reviewCount, size: "sm", showReviewCount: false, className: "shrink-0" })] })] })] }));
+}