@seekora-ai/ui-sdk-react 0.2.11 → 0.2.13

package/dist/components/primitives/ImageZoom.js

@@ -0,0 +1,357 @@
+/**
+ * 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 { 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: 'cover',
+        display: 'block',
+    };
+    // Calculate zoom panel background position (Amazon-style)
+    const getZoomPanelStyle = () => {
+        if (!containerRef.current || !imageLoaded)
+            return { display: 'none' };
+        const rect = containerRef.current.getBoundingClientRect();
+        const bgPosX = (cursorPos.x / rect.width) * 100;
+        const bgPosY = (cursorPos.y / rect.height) * 100;
+        return {
+            position: 'fixed', // Changed from absolute to fixed for better positioning
+            top: rect.top,
+            left: rect.right + 16, // 16px gap from the image
+            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: '0 8px 24px rgba(0,0,0,0.2)',
+            backgroundColor: '#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: '2px solid rgba(255,255,255,0.8)',
+            borderRadius: '50%',
+            boxShadow: '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();
+        const imgRect = imageRef.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: 'rgba(0,0,0,0.6)',
+                    color: '#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 && (React.createElement("div", { style: {
+                    position: 'absolute',
+                    left: cursorPos.x - 75,
+                    top: cursorPos.y - 75,
+                    width: 150,
+                    height: 150,
+                    border: '2px solid rgba(0,0,0,0.3)',
+                    backgroundColor: 'rgba(255,255,255,0.1)',
+                    pointerEvents: 'none',
+                    zIndex: 50,
+                } })),
+            supportsHover && isHovering && imageLoaded && (React.createElement("div", { style: getZoomPanelStyle() }))),
+        isLightboxOpen && (React.createElement("div", { className: "seekora-image-zoom-lightbox", style: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: '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: 'rgba(255,255,255,0.2)',
+                    color: '#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 = 'rgba(255,255,255,0.3)';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = '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: 'rgba(255,255,255,0.2)',
+                        color: '#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 = 'rgba(255,255,255,0.3)';
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = '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: 'rgba(255,255,255,0.2)',
+                        color: '#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 = 'rgba(255,255,255,0.3)';
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = '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 ? '3px solid #fff' : '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: 'rgba(255,255,255,0.9)',
+                        fontSize: '0.875rem',
+                        textAlign: 'center',
+                        backgroundColor: '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: 'rgba(255,255,255,0.7)',
+                    fontSize: '0.875rem',
+                    textAlign: 'center',
+                    backgroundColor: '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')))));
+}

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"}

package/dist/components/primitives/RatingDisplay.js

@@ -0,0 +1,114 @@
+/**
+ * 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, { useState } from 'react';
+import { clsx } from 'clsx';
+const sizeMap = {
+    small: 14,
+    medium: 18,
+    large: 24,
+};
+const fontSizeMap = {
+    small: '0.75rem',
+    medium: '0.875rem',
+    large: '1rem',
+};
+function StarIcon({ filled, half, size, color, emptyColor, interactive, onHover, onClick, }) {
+    if (half) {
+        return (React.createElement("span", { className: clsx('seekora-rating-star', 'seekora-rating-star--half', interactive && 'seekora-rating-star--interactive'), style: {
+                position: 'relative',
+                display: 'inline-block',
+                width: size,
+                height: size,
+                cursor: interactive ? 'pointer' : 'default',
+            }, onMouseEnter: onHover, onClick: onClick },
+            React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { position: 'absolute', top: 0, left: 0 } },
+                React.createElement("defs", null,
+                    React.createElement("linearGradient", { id: "half-fill" },
+                        React.createElement("stop", { offset: "50%", stopColor: color }),
+                        React.createElement("stop", { offset: "50%", stopColor: emptyColor }))),
+                React.createElement("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z", fill: "url(#half-fill)", stroke: color, strokeWidth: "1" }))));
+    }
+    return (React.createElement("span", { className: clsx('seekora-rating-star', filled ? 'seekora-rating-star--filled' : 'seekora-rating-star--empty', interactive && 'seekora-rating-star--interactive'), style: {
+            display: 'inline-block',
+            width: size,
+            height: size,
+            cursor: interactive ? 'pointer' : 'default',
+        }, onMouseEnter: onHover, onClick: onClick },
+        React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: filled ? color : 'none', xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z", stroke: filled ? color : emptyColor, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))));
+}
+export function RatingDisplay({ rating, reviewCount, variant = 'compact', size = 'medium', maxRating = 5, showNumeric = false, showHalfStars = true, interactive = false, onRatingChange, starColor = '#f59e0b', emptyStarColor = '#d1d5db', textColor = 'var(--seekora-text-secondary, #6b7280)', showReviewCount = true, reviewCountFormat, className, style, }) {
+    const [hoverRating, setHoverRating] = useState(null);
+    const clampedRating = Math.max(0, Math.min(maxRating, rating));
+    const displayRating = interactive && hoverRating !== null ? hoverRating : clampedRating;
+    const starSize = sizeMap[size];
+    const fontSize = fontSizeMap[size];
+    const formatReviewCount = (count) => {
+        if (reviewCountFormat)
+            return reviewCountFormat(count);
+        if (count >= 1000000)
+            return `${(count / 1000000).toFixed(1)}M`;
+        if (count >= 1000)
+            return `${(count / 1000).toFixed(1)}K`;
+        return count.toString();
+    };
+    const renderStars = () => {
+        const stars = [];
+        for (let i = 1; i <= maxRating; i++) {
+            const filled = i <= Math.floor(displayRating);
+            const half = showHalfStars && i === Math.ceil(displayRating) && displayRating % 1 >= 0.25 && displayRating % 1 < 0.75;
+            stars.push(React.createElement(StarIcon, { key: i, filled: filled, half: half, size: starSize, color: starColor, emptyColor: emptyStarColor, interactive: interactive, onHover: interactive ? () => setHoverRating(i) : undefined, onClick: interactive
+                    ? () => {
+                        setHoverRating(null);
+                        onRatingChange?.(i);
+                    }
+                    : undefined }));
+        }
+        return stars;
+    };
+    const handleMouseLeave = () => {
+        if (interactive) {
+            setHoverRating(null);
+        }
+    };
+    if (variant === 'stars-only') {
+        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--stars-only', className), style: { display: 'inline-flex', alignItems: 'center', gap: 2, ...style }, onMouseLeave: handleMouseLeave }, renderStars()));
+    }
+    if (variant === 'compact') {
+        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--compact', className), style: { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize, ...style }, onMouseLeave: handleMouseLeave },
+            React.createElement("div", { style: { display: 'inline-flex', alignItems: 'center', gap: 2 } }, renderStars()),
+            showNumeric && (React.createElement("span", { className: "seekora-rating-numeric", style: { fontWeight: 600, color: textColor } }, clampedRating.toFixed(1))),
+            showReviewCount && reviewCount != null && reviewCount > 0 && (React.createElement("span", { className: "seekora-rating-review-count", style: { color: textColor } },
+                "(",
+                formatReviewCount(reviewCount),
+                ")"))));
+    }
+    if (variant === 'full') {
+        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--full', className), style: { display: 'flex', flexDirection: 'column', gap: 4, fontSize, ...style }, onMouseLeave: handleMouseLeave },
+            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
+                React.createElement("div", { style: { display: 'inline-flex', alignItems: 'center', gap: 2 } }, renderStars()),
+                React.createElement("span", { className: "seekora-rating-numeric", style: { fontWeight: 600, color: 'var(--seekora-text-primary, #111827)' } }, clampedRating.toFixed(1)),
+                React.createElement("span", { className: "seekora-rating-max", style: { color: textColor } },
+                    "/ ",
+                    maxRating)),
+            showReviewCount && reviewCount != null && reviewCount > 0 && (React.createElement("span", { className: "seekora-rating-review-text", style: { fontSize: '0.875em', color: textColor } },
+                "Based on ",
+                formatReviewCount(reviewCount),
+                " ",
+                reviewCount === 1 ? 'review' : 'reviews'))));
+    }
+    if (variant === 'inline') {
+        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--inline', className), style: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize, ...style }, onMouseLeave: handleMouseLeave },
+            React.createElement("span", { className: "seekora-rating-numeric", style: { fontWeight: 600, color: 'var(--seekora-text-primary, #111827)' } }, clampedRating.toFixed(1)),
+            React.createElement("div", { style: { display: 'inline-flex', alignItems: 'center', gap: 2 } }, renderStars()),
+            showReviewCount && reviewCount != null && reviewCount > 0 && (React.createElement("span", { className: "seekora-rating-review-count", style: { color: textColor } },
+                "(",
+                formatReviewCount(reviewCount),
+                ")"))));
+    }
+    return null;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * VariantSelector – full variant selector for product detail pages
+ *
+ * Three render modes per option:
+ * - swatch: color circles (auto-detected for "Color" option or when colorMap provided)
+ * - button: rectangular buttons (default for most options)
+ * - dropdown: <select> for options with many values
+ */
+import React from 'react';
+import type { ProductOption, ProductVariant } from '@seekora-ai/ui-sdk-types';
+export interface VariantSelectorProps {
+    options: ProductOption[];
+    variants: ProductVariant[];
+    selections: Record<string, string>;
+    onSelectionChange: (optionName: string, value: string) => void;
+    /** Override render mode per option name */
+    optionRenderModes?: Record<string, 'swatch' | 'button' | 'dropdown'>;
+    /** Auto-switch to dropdown when values exceed this count (default: 8) */
+    dropdownThreshold?: number;
+    /** Map value names to CSS colors */
+    colorMap?: Record<string, string>;
+    /** Show availability cross-out for unavailable combos */
+    showAvailability?: boolean;
+    /** Currently matched variant (for display) */
+    selectedVariant?: ProductVariant | null;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function VariantSelector({ options, variants, selections, onSelectionChange, optionRenderModes, dropdownThreshold, colorMap, showAvailability, selectedVariant: _selectedVariant, className, style, }: VariantSelectorProps): React.JSX.Element | null;
+//# sourceMappingURL=VariantSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariantSelector.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/VariantSelector.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE9E,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;IACrE,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,8CAA8C;IAC9C,eAAe,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAqDD,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,iBAAqB,EACrB,QAAQ,EACR,gBAAuB,EACvB,eAAe,EAAE,gBAAgB,EACjC,SAAS,EACT,KAAK,GACN,EAAE,oBAAoB,4BA0KtB"}