@seekora-ai/ui-sdk-react 0.0.0-stage-20260517092419

package/dist/components/primitives/ImageZoom.js

@@ -0,0 +1,433 @@
+/**
+ * ImageZoom – zoom on hover and click (Amazon-style magnifier + lightbox)
+ *
+ * Supports three zoom modes:
+ * - hover: Magnified view in a separate panel on the right (Amazon style)
+ * - lens: Magnifying glass that follows cursor
+ * - click: Full-screen lightbox modal
+ */
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { clsx } from 'clsx';
+export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, style, showZoomIndicator = true, lensSize = 150, zoomPanelSize = { width: 400, height: 400 }, images, currentIndex = 0, }) {
+    const [isHovering, setIsHovering] = useState(false);
+    const [isLightboxOpen, setIsLightboxOpen] = useState(false);
+    const [lightboxIndex, setLightboxIndex] = useState(currentIndex);
+    const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [touchStart, setTouchStart] = useState(null);
+    const [touchEnd, setTouchEnd] = useState(null);
+    const imageRef = useRef(null);
+    const containerRef = useRef(null);
+    const allImages = images && images.length > 0 ? images : [src];
+    const hasMultipleImages = allImages.length > 1;
+    // Minimum swipe distance (in px) to trigger navigation
+    const minSwipeDistance = 50;
+    const supportsHover = mode === 'hover' || mode === 'both';
+    const supportsClick = mode === 'click' || mode === 'both';
+    const supportsLens = mode === 'lens';
+    const handleMouseMove = useCallback((e) => {
+        if (!containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        setCursorPos({ x, y });
+    }, []);
+    const handleMouseEnter = useCallback(() => {
+        setIsHovering(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        setIsHovering(false);
+    }, []);
+    const handleClick = useCallback((e) => {
+        if (supportsClick) {
+            e?.stopPropagation();
+            setLightboxIndex(currentIndex);
+            setIsLightboxOpen(true);
+        }
+    }, [supportsClick, currentIndex]);
+    const closeLightbox = useCallback((e) => {
+        e?.stopPropagation();
+        setIsLightboxOpen(false);
+    }, []);
+    const goToNext = useCallback(() => {
+        setLightboxIndex((i) => (i + 1) % allImages.length);
+    }, [allImages.length]);
+    const goToPrev = useCallback(() => {
+        setLightboxIndex((i) => (i - 1 + allImages.length) % allImages.length);
+    }, [allImages.length]);
+    // Touch event handlers for swipe
+    const handleTouchStart = useCallback((e) => {
+        setTouchEnd(null);
+        setTouchStart(e.targetTouches[0].clientX);
+    }, []);
+    const handleTouchMove = useCallback((e) => {
+        setTouchEnd(e.targetTouches[0].clientX);
+    }, []);
+    const handleTouchEnd = useCallback(() => {
+        if (!touchStart || !touchEnd)
+            return;
+        const distance = touchStart - touchEnd;
+        const isLeftSwipe = distance > minSwipeDistance;
+        const isRightSwipe = distance < -minSwipeDistance;
+        if (isLeftSwipe) {
+            goToNext();
+        }
+        else if (isRightSwipe) {
+            goToPrev();
+        }
+    }, [touchStart, touchEnd, minSwipeDistance, goToNext, goToPrev]);
+    // Close lightbox on Escape key, navigate with arrow keys
+    useEffect(() => {
+        if (!isLightboxOpen)
+            return;
+        const handleKeyboard = (e) => {
+            if (e.key === 'Escape')
+                closeLightbox();
+            if (hasMultipleImages) {
+                if (e.key === 'ArrowRight')
+                    goToNext();
+                if (e.key === 'ArrowLeft')
+                    goToPrev();
+            }
+        };
+        window.addEventListener('keydown', handleKeyboard);
+        return () => window.removeEventListener('keydown', handleKeyboard);
+    }, [isLightboxOpen, closeLightbox, hasMultipleImages, goToNext, goToPrev]);
+    const containerStyle = {
+        position: 'relative',
+        display: 'inline-block',
+        cursor: supportsClick ? 'zoom-in' : supportsHover || supportsLens ? 'crosshair' : 'default',
+        overflow: 'hidden',
+        ...style,
+    };
+    const imageStyle = {
+        width: '100%',
+        height: '100%',
+        objectFit: style?.objectFit ?? 'cover',
+        display: 'block',
+    };
+    // Compute the indicator rectangle (what portion of the image the zoom panel shows).
+    // indW / containerW = 1 / zoomLevel (the panel shows 1/zoomLevel of the image width).
+    // indH is derived from the zoom panel's aspect ratio so it's consistent with what the
+    // panel actually renders — no need for the image's natural dimensions.
+    const getIndicatorRect = useCallback(() => {
+        if (!containerRef.current)
+            return { indL: 0, indT: 0, indW: 0, indH: 0 };
+        const rect = containerRef.current.getBoundingClientRect();
+        const indW = rect.width / zoomLevel;
+        const indH = (zoomPanelSize.height / zoomPanelSize.width) * rect.width / zoomLevel;
+        const indL = Math.max(0, Math.min(rect.width - indW, cursorPos.x - indW / 2));
+        const indT = Math.max(0, Math.min(rect.height - indH, cursorPos.y - indH / 2));
+        return { indL, indT, indW, indH };
+    }, [cursorPos, zoomLevel, zoomPanelSize]);
+    // Calculate zoom panel background position (Amazon-style)
+    const getZoomPanelStyle = () => {
+        if (!containerRef.current || !imageLoaded)
+            return { display: 'none' };
+        const rect = containerRef.current.getBoundingClientRect();
+        const { indL, indT, indW, indH } = getIndicatorRect();
+        // bgPos is derived from the clamped indicator position, not the raw cursor.
+        // At indL=0 → bgPosX=0% (show left), at indL=containerW-indW → bgPosX=100% (show right).
+        const bgPosX = (rect.width - indW) > 0 ? (indL / (rect.width - indW)) * 100 : 0;
+        const bgPosY = (rect.height - indH) > 0 ? (indT / (rect.height - indH)) * 100 : 0;
+        // Calculate available space in all directions
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const gap = 16;
+        const mouseBuffer = 50; // Minimum distance from mouse cursor
+        // Calculate mouse position in viewport
+        const mouseX = rect.left + cursorPos.x;
+        const mouseY = rect.top + cursorPos.y;
+        // Calculate space available in each direction
+        const spaceRight = viewportWidth - rect.right - gap;
+        const spaceLeft = rect.left - gap;
+        // Determine optimal horizontal position
+        let left;
+        let top = rect.top;
+        // Try right side first (default Amazon-style)
+        if (spaceRight >= zoomPanelSize.width) {
+            left = rect.right + gap;
+        }
+        // Try left side
+        else if (spaceLeft >= zoomPanelSize.width) {
+            left = rect.left - zoomPanelSize.width - gap;
+        }
+        // Not enough space on either side - center on the side with more space
+        else if (spaceRight > spaceLeft) {
+            left = rect.right + gap;
+        }
+        else {
+            left = Math.max(gap, rect.left - zoomPanelSize.width - gap);
+        }
+        // Adjust vertical position to keep within viewport
+        // Try to align with image top by default
+        if (rect.top + zoomPanelSize.height > viewportHeight - gap) {
+            // Panel would overflow bottom - adjust upward
+            top = Math.max(gap, viewportHeight - zoomPanelSize.height - gap);
+        }
+        // Ensure panel doesn't overlap with mouse cursor
+        const panelRight = left + zoomPanelSize.width;
+        const panelBottom = top + zoomPanelSize.height;
+        // Check if mouse is inside the panel area
+        if (mouseX >= left - mouseBuffer &&
+            mouseX <= panelRight + mouseBuffer &&
+            mouseY >= top - mouseBuffer &&
+            mouseY <= panelBottom + mouseBuffer) {
+            // Mouse is too close - try to reposition
+            // If on right side and there's space on left, flip to left
+            if (left > rect.right && spaceLeft >= zoomPanelSize.width) {
+                left = rect.left - zoomPanelSize.width - gap;
+            }
+            // If on left side and there's space on right, flip to right
+            else if (left < rect.left && spaceRight >= zoomPanelSize.width) {
+                left = rect.right + gap;
+            }
+        }
+        // Clamp to viewport boundaries
+        left = Math.max(gap, Math.min(left, viewportWidth - zoomPanelSize.width - gap));
+        top = Math.max(gap, Math.min(top, viewportHeight - zoomPanelSize.height - gap));
+        return {
+            position: 'fixed',
+            top,
+            left,
+            width: zoomPanelSize.width,
+            height: zoomPanelSize.height,
+            backgroundImage: `url(${src})`,
+            backgroundSize: `${zoomLevel * 100}%`,
+            backgroundPosition: `${bgPosX}% ${bgPosY}%`,
+            backgroundRepeat: 'no-repeat',
+            border: '2px solid var(--seekora-border-color, #e5e7eb)',
+            borderRadius: 8,
+            boxShadow: 'var(--seekora-zoom-panel-shadow, 0 8px 24px rgba(0,0,0,0.2))',
+            backgroundColor: 'var(--seekora-zoom-panel-bg, #fff)',
+            pointerEvents: 'none',
+            zIndex: 9998,
+        };
+    };
+    // Calculate lens position and zoom
+    const getLensStyle = () => {
+        if (!containerRef.current)
+            return { display: 'none' };
+        return {
+            position: 'absolute',
+            width: lensSize,
+            height: lensSize,
+            left: cursorPos.x - lensSize / 2,
+            top: cursorPos.y - lensSize / 2,
+            border: 'var(--seekora-lens-border, 2px solid rgba(255,255,255,0.8))',
+            borderRadius: '50%',
+            boxShadow: 'var(--seekora-lens-shadow, 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.3))',
+            pointerEvents: 'none',
+            overflow: 'hidden',
+            zIndex: 100,
+        };
+    };
+    const getLensImageStyle = () => {
+        if (!containerRef.current || !imageRef.current)
+            return {};
+        const rect = containerRef.current.getBoundingClientRect();
+        return {
+            position: 'absolute',
+            width: rect.width * zoomLevel,
+            height: rect.height * zoomLevel,
+            left: -(cursorPos.x * zoomLevel - lensSize / 2),
+            top: -(cursorPos.y * zoomLevel - lensSize / 2),
+            objectFit: 'cover',
+        };
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: containerRef, className: clsx('seekora-image-zoom', className), style: containerStyle, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick },
+            React.createElement("img", { ref: imageRef, src: src, alt: alt, style: imageStyle, onLoad: () => setImageLoaded(true) }),
+            showZoomIndicator && supportsClick && (React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: 8,
+                    right: 8,
+                    width: 32,
+                    height: 32,
+                    borderRadius: '50%',
+                    backgroundColor: 'var(--seekora-zoom-indicator-bg, rgba(0,0,0,0.6))',
+                    color: 'var(--seekora-zoom-indicator-text, #fff)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '1.25rem',
+                    pointerEvents: 'none',
+                    opacity: isHovering ? 1 : 0.7,
+                    transition: 'opacity 150ms',
+                } }, "\uD83D\uDD0D")),
+            supportsLens && isHovering && imageLoaded && (React.createElement("div", { style: getLensStyle() },
+                React.createElement("img", { src: src, alt: "", style: getLensImageStyle() }))),
+            supportsHover && isHovering && imageLoaded && containerRef.current && (() => {
+                const { indL, indT, indW, indH } = getIndicatorRect();
+                return (React.createElement("div", { style: {
+                        position: 'absolute',
+                        left: indL,
+                        top: indT,
+                        width: indW,
+                        height: indH,
+                        border: 'var(--seekora-hover-area-border, 2px solid rgba(0,0,0,0.3))',
+                        backgroundColor: 'var(--seekora-hover-area-bg, rgba(255,255,255,0.1))',
+                        pointerEvents: 'none',
+                        zIndex: 50,
+                    } }));
+            })()),
+        supportsHover && isHovering && imageLoaded && typeof document !== 'undefined' && createPortal(React.createElement("div", { style: getZoomPanelStyle() }), document.body),
+        isLightboxOpen && typeof document !== 'undefined' && createPortal(React.createElement("div", { className: "seekora-image-zoom-lightbox", style: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: 'var(--seekora-lightbox-bg, rgba(0,0,0,0.95))',
+                zIndex: 9999,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'zoom-out',
+                padding: 20,
+            }, onClick: closeLightbox, onTouchStart: hasMultipleImages ? handleTouchStart : undefined, onTouchMove: hasMultipleImages ? handleTouchMove : undefined, onTouchEnd: hasMultipleImages ? handleTouchEnd : undefined },
+            React.createElement("button", { type: "button", "aria-label": "Close zoom", style: {
+                    position: 'absolute',
+                    top: 20,
+                    right: 20,
+                    width: 44,
+                    height: 44,
+                    borderRadius: '50%',
+                    border: 'none',
+                    backgroundColor: 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))',
+                    color: 'var(--seekora-lightbox-btn-text, #fff)',
+                    fontSize: '1.5rem',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    transition: 'background-color 150ms',
+                    zIndex: 10001,
+                }, onClick: (e) => {
+                    e.stopPropagation();
+                    closeLightbox();
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg-hover, rgba(255,255,255,0.3))';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))';
+                } }, "\u2715"),
+            hasMultipleImages && (React.createElement(React.Fragment, null,
+                React.createElement("button", { type: "button", "aria-label": "Previous image", style: {
+                        position: 'absolute',
+                        left: 20,
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        width: 56,
+                        height: 56,
+                        borderRadius: '50%',
+                        border: 'none',
+                        backgroundColor: 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))',
+                        color: 'var(--seekora-lightbox-btn-text, #fff)',
+                        fontSize: '2rem',
+                        fontWeight: 'bold',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        transition: 'background-color 150ms',
+                        zIndex: 10001,
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        goToPrev();
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg-hover, rgba(255,255,255,0.3))';
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))';
+                    } }, "\u2039"),
+                React.createElement("button", { type: "button", "aria-label": "Next image", style: {
+                        position: 'absolute',
+                        right: 20,
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        width: 56,
+                        height: 56,
+                        borderRadius: '50%',
+                        border: 'none',
+                        backgroundColor: 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))',
+                        color: 'var(--seekora-lightbox-btn-text, #fff)',
+                        fontSize: '2rem',
+                        fontWeight: 'bold',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        transition: 'background-color 150ms',
+                        zIndex: 10001,
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        goToNext();
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg-hover, rgba(255,255,255,0.3))';
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))';
+                    } }, "\u203A"))),
+            React.createElement("img", { src: allImages[lightboxIndex], alt: alt, style: {
+                    maxWidth: '90%',
+                    maxHeight: '90%',
+                    objectFit: 'contain',
+                    borderRadius: 4,
+                    cursor: 'default',
+                }, onClick: (e) => e.stopPropagation() }),
+            hasMultipleImages && (React.createElement("div", { style: {
+                    position: 'absolute',
+                    bottom: 20,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 12,
+                }, onClick: (e) => e.stopPropagation() },
+                React.createElement("div", { style: { display: 'flex', gap: 8, overflowX: 'auto', maxWidth: '80vw', padding: '8px 0' } }, allImages.map((img, i) => (React.createElement("button", { key: i, type: "button", onClick: (e) => {
+                        e.stopPropagation();
+                        setLightboxIndex(i);
+                    }, style: {
+                        width: 60,
+                        height: 60,
+                        padding: 0,
+                        border: i === lightboxIndex ? 'var(--seekora-lightbox-thumb-border-active, 3px solid #fff)' : 'var(--seekora-lightbox-thumb-border, 2px solid rgba(255,255,255,0.3))',
+                        borderRadius: 4,
+                        overflow: 'hidden',
+                        cursor: 'pointer',
+                        opacity: i === lightboxIndex ? 1 : 0.6,
+                        transition: 'all 150ms ease',
+                        flexShrink: 0,
+                        background: 'none',
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.opacity = '1';
+                    }, onMouseLeave: (e) => {
+                        if (i !== lightboxIndex)
+                            e.currentTarget.style.opacity = '0.6';
+                    } },
+                    React.createElement("img", { src: img, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } }))))),
+                React.createElement("div", { style: {
+                        color: 'var(--seekora-lightbox-counter-text, rgba(255,255,255,0.9))',
+                        fontSize: '0.875rem',
+                        textAlign: 'center',
+                        backgroundColor: 'var(--seekora-lightbox-counter-bg, rgba(0,0,0,0.5))',
+                        padding: '4px 12px',
+                        borderRadius: 12,
+                    } },
+                    lightboxIndex + 1,
+                    " / ",
+                    allImages.length))),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: 20,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    color: 'var(--seekora-lightbox-instructions-text, rgba(255,255,255,0.7))',
+                    fontSize: '0.875rem',
+                    textAlign: 'center',
+                    backgroundColor: 'var(--seekora-lightbox-instructions-bg, rgba(0,0,0,0.5))',
+                    padding: '8px 16px',
+                    borderRadius: 12,
+                } }, hasMultipleImages ? 'Use arrow keys or click thumbnails to navigate • ESC to close' : 'Click outside or press ESC to close')), document.body)));
+}

package/dist/components/primitives/PriceDisplay.d.ts

@@ -0,0 +1,21 @@
+/**
+ * PriceDisplay – reusable price display primitive
+ *
+ * Handles single price, compare price with strikethrough, discount percentage,
+ * and price range display.
+ */
+import React from 'react';
+import type { PriceRange } from '@seekora-ai/ui-sdk-types';
+export interface PriceDisplayProps {
+    price?: number;
+    comparePrice?: number;
+    priceRange?: PriceRange | null;
+    currency?: string;
+    currencyPosition?: 'before' | 'after';
+    priceDecimals?: number;
+    showDiscount?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function PriceDisplay({ price, comparePrice, priceRange, currency, currencyPosition, priceDecimals, showDiscount, className, style, }: PriceDisplayProps): React.JSX.Element | null;
+//# sourceMappingURL=PriceDisplay.d.ts.map

package/dist/components/primitives/PriceDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/PriceDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAeD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,YAAY,EACZ,UAAU,EACV,QAAc,EACd,gBAA2B,EAC3B,aAAiB,EACjB,YAAmB,EACnB,SAAS,EACT,KAAK,GACN,EAAE,iBAAiB,4BAgDnB"}

package/dist/components/primitives/PriceDisplay.js

@@ -0,0 +1,44 @@
+/**
+ * PriceDisplay – reusable price display primitive
+ *
+ * Handles single price, compare price with strikethrough, discount percentage,
+ * and price range display.
+ */
+import React from 'react';
+import { clsx } from 'clsx';
+const formatNum = (value, currency, position, decimals) => {
+    const formatted = value.toLocaleString(undefined, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+    });
+    return position === 'before' ? `${currency}${formatted}` : `${formatted}${currency}`;
+};
+export function PriceDisplay({ price, comparePrice, priceRange, currency = '$', currencyPosition = 'before', priceDecimals = 2, showDiscount = true, className, style, }) {
+    const fmt = (v) => formatNum(v, currency, currencyPosition, priceDecimals);
+    // Price range mode
+    if (priceRange) {
+        return (React.createElement("span", { className: clsx('seekora-price-display', 'seekora-price-range', className), style: style },
+            fmt(priceRange.min),
+            " \u2013 ",
+            fmt(priceRange.max)));
+    }
+    if (price == null)
+        return null;
+    const hasCompare = comparePrice != null && comparePrice > price;
+    const discount = hasCompare ? Math.round(((comparePrice - price) / comparePrice) * 100) : 0;
+    return (React.createElement("span", { className: clsx('seekora-price-display', className), style: { display: 'inline-flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', ...style } },
+        React.createElement("span", { className: "seekora-price-current", style: { fontWeight: 600 } }, fmt(price)),
+        hasCompare && (React.createElement("span", { className: "seekora-price-compare", style: {
+                textDecoration: 'line-through',
+                color: 'var(--seekora-text-secondary, #6b7280)',
+                fontSize: '0.875em',
+            } }, fmt(comparePrice))),
+        hasCompare && showDiscount && discount > 0 && (React.createElement("span", { className: "seekora-price-discount", style: {
+                color: 'var(--seekora-error, #ef4444)',
+                fontSize: '0.8125em',
+                fontWeight: 600,
+            } },
+            "-",
+            discount,
+            "%"))));
+}

package/dist/components/primitives/RatingDisplay.d.ts

@@ -0,0 +1,43 @@
+/**
+ * RatingDisplay – star rating display with review count
+ *
+ * Supports multiple variants: stars-only, compact, full, inline.
+ * Can be read-only (display) or interactive (for reviews).
+ */
+import React from 'react';
+export type RatingVariant = 'stars-only' | 'compact' | 'full' | 'inline';
+export type RatingSize = 'small' | 'medium' | 'large';
+export interface RatingDisplayProps {
+    /** Rating value (0-5) */
+    rating: number;
+    /** Total number of reviews */
+    reviewCount?: number;
+    /** Display variant */
+    variant?: RatingVariant;
+    /** Size of stars */
+    size?: RatingSize;
+    /** Maximum rating (default: 5) */
+    maxRating?: number;
+    /** Show decimal rating number */
+    showNumeric?: boolean;
+    /** Show half stars */
+    showHalfStars?: boolean;
+    /** Interactive mode (for leaving reviews) */
+    interactive?: boolean;
+    /** Callback when rating is clicked (interactive mode) */
+    onRatingChange?: (rating: number) => void;
+    /** Custom star color */
+    starColor?: string;
+    /** Custom empty star color */
+    emptyStarColor?: string;
+    /** Custom text color */
+    textColor?: string;
+    /** Show review count in parentheses */
+    showReviewCount?: boolean;
+    /** Custom review count format */
+    reviewCountFormat?: (count: number) => string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function RatingDisplay({ rating, reviewCount, variant, size, maxRating, showNumeric, showHalfStars, interactive, onRatingChange, starColor, emptyStarColor, textColor, showReviewCount, reviewCountFormat, className, style, }: RatingDisplayProps): React.JSX.Element | null;
+//# sourceMappingURL=RatingDisplay.d.ts.map

package/dist/components/primitives/RatingDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/RatingDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,kBAAkB;IACjC,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yDAAyD;IACzD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA2GD,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,WAAW,EACX,OAAmB,EACnB,IAAe,EACf,SAAa,EACb,WAAmB,EACnB,aAAoB,EACpB,WAAmB,EACnB,cAAc,EACd,SAAqB,EACrB,cAA0B,EAC1B,SAAoD,EACpD,eAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,4BA0IpB"}