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

package/dist/components/primitives/VariantSelector.js

@@ -0,0 +1,162 @@
+/**
+ * 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 { clsx } from 'clsx';
+const COLOR_NAMES = {
+    black: '#000', white: '#fff', red: '#ef4444', blue: '#3b82f6',
+    green: '#22c55e', yellow: '#eab308', orange: '#f97316', purple: '#a855f7',
+    pink: '#ec4899', brown: '#92400e', grey: '#6b7280', gray: '#6b7280',
+    navy: '#1e3a5f', beige: '#d4c5a9', cream: '#fffdd0', ivory: '#fffff0',
+    teal: '#0d9488', coral: '#ff7f50', maroon: '#800000', charcoal: '#36454f',
+    sage: '#9caf88', lavender: '#e6e6fa', mint: '#98fb98', rust: '#b7410e',
+    plum: '#8e4585', slate: '#708090', indigo: '#4b0082', gold: '#ffd700',
+    silver: '#c0c0c0', rose: '#ff007f', raven: '#0a0a0a', natural: '#f5f0e1',
+    bone: '#e3dac9', sand: '#c2b280', olive: '#808000', khaki: '#c3b091',
+    burgundy: '#800020', wine: '#722f37', mauve: '#e0b0ff', tan: '#d2b48c',
+};
+const isColorOption = (name) => {
+    const lower = name.toLowerCase();
+    return lower === 'color' || lower === 'colour' || lower === 'colors' || lower === 'colours';
+};
+const resolveColor = (value, colorMap) => {
+    if (colorMap?.[value])
+        return colorMap[value];
+    const lower = value.toLowerCase();
+    if (colorMap?.[lower])
+        return colorMap[lower];
+    return COLOR_NAMES[lower] ?? null;
+};
+const getAvailability = (optionName, value, options, variants, selections) => {
+    const optionIndex = options.findIndex((o) => o.name === optionName);
+    if (optionIndex === -1)
+        return true;
+    const optionKey = `option${optionIndex + 1}`;
+    return variants.some((variant) => {
+        if (variant[optionKey] !== value)
+            return false;
+        if (variant.available === false)
+            return false;
+        for (const [selName, selValue] of Object.entries(selections)) {
+            if (selName === optionName)
+                continue;
+            const selIdx = options.findIndex((o) => o.name === selName);
+            if (selIdx === -1)
+                continue;
+            const selKey = `option${selIdx + 1}`;
+            if (variant[selKey] !== selValue)
+                return false;
+        }
+        return true;
+    });
+};
+export function VariantSelector({ options, variants, selections, onSelectionChange, optionRenderModes, dropdownThreshold = 8, colorMap, showAvailability = true, selectedVariant: _selectedVariant, className, style, }) {
+    if (!options || options.length === 0)
+        return null;
+    const getRenderMode = (option) => {
+        if (optionRenderModes?.[option.name])
+            return optionRenderModes[option.name];
+        if (isColorOption(option.name))
+            return 'swatch';
+        if (option.values.length > dropdownThreshold)
+            return 'dropdown';
+        return 'button';
+    };
+    return (React.createElement("div", { className: clsx('seekora-variant-selector', className), style: { display: 'flex', flexDirection: 'column', gap: 16, ...style } }, options.map((option) => {
+        const mode = getRenderMode(option);
+        const selected = selections[option.name];
+        return (React.createElement("div", { key: option.name, className: "seekora-variant-option-group" },
+            React.createElement("label", { className: "seekora-variant-option-label", style: {
+                    display: 'block',
+                    fontSize: '0.875rem',
+                    fontWeight: 600,
+                    marginBottom: 8,
+                    color: 'var(--seekora-text-primary, #111827)',
+                } },
+                option.name,
+                selected && (React.createElement("span", { style: { fontWeight: 400, marginLeft: 6, color: 'var(--seekora-text-secondary, #6b7280)' } }, selected))),
+            mode === 'dropdown' ? (React.createElement("select", { className: "seekora-variant-dropdown", value: selected ?? '', onChange: (e) => {
+                    e.stopPropagation();
+                    onSelectionChange(option.name, e.target.value);
+                }, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), style: {
+                    padding: '8px 12px',
+                    fontSize: '0.875rem',
+                    borderRadius: 6,
+                    border: '1px solid var(--seekora-border-color, #e5e7eb)',
+                    backgroundColor: 'var(--seekora-bg-surface, #fff)',
+                    color: 'var(--seekora-text-primary, #111827)',
+                    cursor: 'pointer',
+                    minWidth: 120,
+                } },
+                React.createElement("option", { value: "" },
+                    "Select ",
+                    option.name),
+                option.values.map((value) => {
+                    const available = showAvailability
+                        ? getAvailability(option.name, value, options, variants, selections)
+                        : true;
+                    return (React.createElement("option", { key: value, value: value, disabled: !available },
+                        value,
+                        !available ? ' (Unavailable)' : ''));
+                }))) : (React.createElement("div", { className: "seekora-variant-buttons", style: { display: 'flex', flexWrap: 'wrap', gap: 8 } }, option.values.map((value) => {
+                const isActive = selected === value;
+                const available = showAvailability
+                    ? getAvailability(option.name, value, options, variants, selections)
+                    : true;
+                const color = mode === 'swatch' ? resolveColor(value, colorMap) : null;
+                if (mode === 'swatch' && color) {
+                    return (React.createElement("button", { key: value, type: "button", className: clsx('seekora-variant-color-swatch', isActive && 'seekora-variant-button--active', !available && 'seekora-variant-button--unavailable'), title: value, onMouseDown: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            onSelectionChange(option.name, value);
+                        }, disabled: !available, style: {
+                            width: 32,
+                            height: 32,
+                            borderRadius: '50%',
+                            backgroundColor: color,
+                            border: isActive
+                                ? '2px solid var(--seekora-primary, #111827)'
+                                : '1px solid var(--seekora-border-color, #e5e7eb)',
+                            outline: isActive ? '2px solid var(--seekora-primary, #111827)' : 'none',
+                            outlineOffset: 2,
+                            cursor: available ? 'pointer' : 'not-allowed',
+                            opacity: available ? 1 : 0.4,
+                            position: 'relative',
+                            padding: 0,
+                        }, "aria-label": `${option.name}: ${value}`, "aria-pressed": isActive }));
+                }
+                return (React.createElement("button", { key: value, type: "button", className: clsx('seekora-variant-button', isActive && 'seekora-variant-button--active', !available && 'seekora-variant-button--unavailable'), onMouseDown: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        onSelectionChange(option.name, value);
+                    }, disabled: !available, style: {
+                        padding: '6px 16px',
+                        fontSize: '0.875rem',
+                        borderRadius: 6,
+                        border: isActive
+                            ? '2px solid var(--seekora-primary, #111827)'
+                            : '1px solid var(--seekora-border-color, #e5e7eb)',
+                        backgroundColor: isActive
+                            ? 'var(--seekora-primary, #111827)'
+                            : 'var(--seekora-bg-surface, #fff)',
+                        color: isActive
+                            ? '#fff'
+                            : 'var(--seekora-text-primary, #111827)',
+                        cursor: available ? 'pointer' : 'not-allowed',
+                        opacity: available ? 1 : 0.5,
+                        textDecoration: !available ? 'line-through' : 'none',
+                        fontWeight: isActive ? 600 : 400,
+                        transition: 'all 120ms ease',
+                    }, "aria-label": `${option.name}: ${value}`, "aria-pressed": isActive }, value));
+            })))));
+    })));
+}

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

@@ -0,0 +1,28 @@
+/**
+ * VariantSwatches – inline variant indicators for card display
+ *
+ * Shows color dots, size labels, and "+N more" overflow for compact card views.
+ */
+import React from 'react';
+import type { ProductOption, ProductVariant } from '@seekora-ai/ui-sdk-types';
+export interface VariantSwatchesProps {
+    options: ProductOption[];
+    /** Which option names to show (default: all) */
+    visibleOptions?: string[];
+    /** Max values per option before "+N more" (default: 5) */
+    maxValues?: number;
+    /** Map option value names to CSS color strings */
+    colorMap?: Record<string, string>;
+    /** Currently selected value per option (e.g., { Color: 'Black', Size: 'M' }) */
+    selectedValues?: Record<string, string>;
+    /** Product variants for availability checking */
+    variants?: ProductVariant[];
+    /** Show availability cross-out for unavailable combos (default: true) */
+    showAvailability?: boolean;
+    onSwatchHover?: (optionName: string, value: string) => void;
+    onSwatchClick?: (optionName: string, value: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function VariantSwatches({ options, visibleOptions, maxValues, colorMap, selectedValues, variants, showAvailability, onSwatchHover, onSwatchClick, className, style, }: VariantSwatchesProps): React.JSX.Element | null;
+//# sourceMappingURL=VariantSwatches.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariantSwatches.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/VariantSwatches.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE9E,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA4DD,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,cAAc,EACd,SAAa,EACb,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,gBAAuB,EACvB,aAAa,EACb,aAAa,EACb,SAAS,EACT,KAAK,GACN,EAAE,oBAAoB,4BAyKtB"}

package/dist/components/primitives/VariantSwatches.js

@@ -0,0 +1,173 @@
+/**
+ * VariantSwatches – inline variant indicators for card display
+ *
+ * Shows color dots, size labels, and "+N more" overflow for compact card views.
+ */
+import React, { useState } from 'react';
+import { clsx } from 'clsx';
+const COLOR_NAMES = {
+    black: '#000', white: '#fff', red: '#ef4444', blue: '#3b82f6',
+    green: '#22c55e', yellow: '#eab308', orange: '#f97316', purple: '#a855f7',
+    pink: '#ec4899', brown: '#92400e', grey: '#6b7280', gray: '#6b7280',
+    navy: '#1e3a5f', beige: '#d4c5a9', cream: '#fffdd0', ivory: '#fffff0',
+    khaki: '#c3b091', olive: '#808000', teal: '#0d9488', coral: '#ff7f50',
+    maroon: '#800000', tan: '#d2b48c', charcoal: '#36454f', burgundy: '#800020',
+    sage: '#9caf88', lavender: '#e6e6fa', mint: '#98fb98', rust: '#b7410e',
+    plum: '#8e4585', slate: '#708090', indigo: '#4b0082', gold: '#ffd700',
+    silver: '#c0c0c0', rose: '#ff007f', mauve: '#e0b0ff', wine: '#722f37',
+    raven: '#0a0a0a', natural: '#f5f0e1', bone: '#e3dac9', sand: '#c2b280',
+};
+const isColorOption = (name) => {
+    const lower = name.toLowerCase();
+    return lower === 'color' || lower === 'colour' || lower === 'colors' || lower === 'colours';
+};
+const resolveColor = (value, colorMap) => {
+    if (colorMap?.[value])
+        return colorMap[value];
+    const lower = value.toLowerCase();
+    if (colorMap?.[lower])
+        return colorMap[lower];
+    return COLOR_NAMES[lower] ?? null;
+};
+const getAvailability = (optionName, value, options, variants, selectedValues) => {
+    if (!variants || variants.length === 0)
+        return true;
+    const optionIndex = options.findIndex((o) => o.name === optionName);
+    if (optionIndex === -1)
+        return true;
+    const optionKey = `option${optionIndex + 1}`;
+    return variants.some((variant) => {
+        // Must match the current option value
+        if (variant[optionKey] !== value)
+            return false;
+        // Must be available
+        if (variant.available === false)
+            return false;
+        // Must match all other selected values
+        if (selectedValues) {
+            for (const [selName, selValue] of Object.entries(selectedValues)) {
+                if (selName === optionName)
+                    continue; // Skip current option
+                const selIdx = options.findIndex((o) => o.name === selName);
+                if (selIdx === -1)
+                    continue;
+                const selKey = `option${selIdx + 1}`;
+                if (variant[selKey] !== selValue)
+                    return false;
+            }
+        }
+        return true;
+    });
+};
+export function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, selectedValues, variants, showAvailability = true, onSwatchHover, onSwatchClick, className, style, }) {
+    const [expandedOptions, setExpandedOptions] = useState(new Set());
+    if (!options || options.length === 0)
+        return null;
+    const filtered = visibleOptions
+        ? options.filter((o) => visibleOptions.includes(o.name))
+        : options;
+    if (filtered.length === 0)
+        return null;
+    const toggleExpanded = (optionName, e) => {
+        e.stopPropagation();
+        setExpandedOptions((prev) => {
+            const next = new Set(prev);
+            if (next.has(optionName)) {
+                next.delete(optionName);
+            }
+            else {
+                next.add(optionName);
+            }
+            return next;
+        });
+    };
+    return (React.createElement("div", { className: clsx('seekora-variant-swatches', className), style: { display: 'flex', flexDirection: 'column', gap: 4, ...style } }, filtered.map((option) => {
+        const isColor = isColorOption(option.name);
+        const isExpanded = expandedOptions.has(option.name);
+        const visible = isExpanded ? option.values : option.values.slice(0, maxValues);
+        const overflow = option.values.length - maxValues;
+        const hasOverflow = overflow > 0;
+        const selectedValue = selectedValues?.[option.name];
+        return (React.createElement("div", { key: option.name, className: "seekora-variant-swatch-group", style: { display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' } },
+            visible.map((value) => {
+                const color = isColor ? resolveColor(value, colorMap) : null;
+                const isSelected = selectedValue === value;
+                const isAvailable = showAvailability
+                    ? getAvailability(option.name, value, options, variants, selectedValues)
+                    : true;
+                if (color) {
+                    return (React.createElement("span", { key: value, className: clsx('seekora-variant-swatch', 'seekora-variant-swatch--color', isSelected && 'seekora-variant-swatch--selected', !isAvailable && 'seekora-variant-swatch--unavailable'), title: `${value}${!isAvailable ? ' (Unavailable)' : ''}`, style: {
+                            display: 'inline-block',
+                            width: 14,
+                            height: 14,
+                            borderRadius: '50%',
+                            backgroundColor: color,
+                            border: isSelected
+                                ? '2px solid var(--seekora-primary, #111827)'
+                                : '1px solid var(--seekora-border-color, #e5e7eb)',
+                            outline: isSelected ? '2px solid var(--seekora-primary, #111827)' : 'none',
+                            outlineOffset: 2,
+                            cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
+                            flexShrink: 0,
+                            boxShadow: isSelected ? '0 0 0 1px #fff' : 'none',
+                            opacity: isAvailable ? 1 : 0.3,
+                            position: 'relative',
+                        }, onMouseEnter: () => isAvailable && onSwatchHover?.(option.name, value), onMouseDown: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            if (isAvailable) {
+                                onSwatchClick?.(option.name, value);
+                            }
+                        } }, !isAvailable && (React.createElement("span", { style: {
+                            position: 'absolute',
+                            top: '50%',
+                            left: '-2px',
+                            right: '-2px',
+                            height: 1,
+                            backgroundColor: '#ef4444',
+                            transform: 'translateY(-50%) rotate(-45deg)',
+                        } }))));
+                }
+                return (React.createElement("span", { key: value, className: clsx('seekora-variant-swatch', 'seekora-variant-swatch--text', isSelected && 'seekora-variant-swatch--selected', !isAvailable && 'seekora-variant-swatch--unavailable'), style: {
+                        display: 'inline-block',
+                        padding: '1px 6px',
+                        fontSize: '0.6875rem',
+                        borderRadius: 3,
+                        border: isSelected
+                            ? '1px solid var(--seekora-primary, #111827)'
+                            : '1px solid var(--seekora-border-color, #e5e7eb)',
+                        backgroundColor: isSelected
+                            ? 'var(--seekora-primary, #111827)'
+                            : 'transparent',
+                        color: isSelected
+                            ? '#fff'
+                            : 'var(--seekora-text-secondary, #6b7280)',
+                        cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
+                        whiteSpace: 'nowrap',
+                        fontWeight: isSelected ? 600 : 400,
+                        opacity: isAvailable ? 1 : 0.4,
+                        textDecoration: !isAvailable ? 'line-through' : 'none',
+                    }, onMouseEnter: () => isAvailable && onSwatchHover?.(option.name, value), onMouseDown: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        if (isAvailable) {
+                            onSwatchClick?.(option.name, value);
+                        }
+                    } }, value));
+            }),
+            hasOverflow && (React.createElement("button", { type: "button", className: "seekora-variant-swatch--overflow", onClick: (e) => toggleExpanded(option.name, e), style: {
+                    fontSize: '0.6875rem',
+                    color: 'var(--seekora-primary, #2563eb)',
+                    background: 'none',
+                    border: 'none',
+                    padding: 0,
+                    cursor: 'pointer',
+                    textDecoration: 'underline',
+                    fontWeight: 500,
+                } }, isExpanded ? 'Show less' : `+${overflow} more`))));
+    })));
+}

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

@@ -1,2 +1,11 @@
 export { ImageDisplay, type ImageDisplayVariant, type ImageDisplayProps } from './ImageDisplay';
+export { ImageZoom, type ImageZoomProps, type ImageZoomMode } from './ImageZoom';
+export { PriceDisplay, type PriceDisplayProps } from './PriceDisplay';
+export { BadgeList, type BadgeListProps } from './BadgeList';
+export { RatingDisplay, type RatingDisplayProps, type RatingVariant, type RatingSize } from './RatingDisplay';
+export { VariantSwatches, type VariantSwatchesProps } from './VariantSwatches';
+export { VariantSelector, type VariantSelectorProps } from './VariantSelector';
+export { ActionButtons, type ActionButtonsProps, type ActionButton, type ActionButtonType } from './ActionButtons';
+export { withAnalytics, type WithAnalyticsConfig, type WithAnalyticsInjectedProps } from './withAnalytics';
+export { AnalyticsProvider, useAnalyticsProvider, type AnalyticsProviderProps } from './AnalyticsProvider';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAChG,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC9G,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnH,OAAO,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,KAAK,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAC3G,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/primitives/index.js

@@ -1 +1,10 @@
 export { ImageDisplay } from './ImageDisplay';
+export { ImageZoom } from './ImageZoom';
+export { PriceDisplay } from './PriceDisplay';
+export { BadgeList } from './BadgeList';
+export { RatingDisplay } from './RatingDisplay';
+export { VariantSwatches } from './VariantSwatches';
+export { VariantSelector } from './VariantSelector';
+export { ActionButtons } from './ActionButtons';
+export { withAnalytics } from './withAnalytics';
+export { AnalyticsProvider, useAnalyticsProvider } from './AnalyticsProvider';

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

@@ -0,0 +1,24 @@
+/**
+ * withAnalytics – HOC that wraps any React component to inject analytics tracking
+ */
+import React from 'react';
+import type { SeekoraClient, SearchContext } from '@seekora-ai/search-sdk';
+import type { ProductItem } from '@seekora-ai/ui-sdk-types';
+export interface WithAnalyticsConfig {
+    /** Track clicks on the component */
+    trackClick?: boolean;
+    /** Track impressions (visibility) */
+    trackImpression?: boolean;
+    /** Custom event name for click */
+    clickEventName?: string;
+    /** Extract product/item data from props */
+    getProductFromProps?: (props: any) => ProductItem | null;
+    /** Extract position from props */
+    getPositionFromProps?: (props: any) => number;
+}
+export interface WithAnalyticsInjectedProps {
+    seekoraClient?: SeekoraClient;
+    seekoraContext?: SearchContext | Partial<SearchContext>;
+}
+export declare function withAnalytics<P extends object>(Component: React.ComponentType<P>, config?: WithAnalyticsConfig): React.ComponentType<P & WithAnalyticsInjectedProps>;
+//# sourceMappingURL=withAnalytics.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"withAnalytics.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/withAnalytics.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAG5D,MAAM,WAAW,mBAAmB;IAClC,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2CAA2C;IAC3C,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,WAAW,GAAG,IAAI,CAAC;IACzD,kCAAkC;IAClC,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;CAC/C;AAED,MAAM,WAAW,0BAA0B;IACzC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,cAAc,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;CACzD;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAC5C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,MAAM,GAAE,mBAAwB,GAC/B,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,0BAA0B,CAAC,CAmGrD"}

package/dist/components/primitives/withAnalytics.js

@@ -0,0 +1,73 @@
+/**
+ * withAnalytics – HOC that wraps any React component to inject analytics tracking
+ */
+import React, { useRef, useEffect, useCallback } from 'react';
+import { log } from '@seekora-ai/ui-sdk-core';
+export function withAnalytics(Component, config = {}) {
+    const { trackClick = true, trackImpression = false, clickEventName = 'product.click', getProductFromProps = () => null, getPositionFromProps = () => 0, } = config;
+    const displayName = Component.displayName || Component.name || 'Component';
+    const Wrapped = React.forwardRef((props, ref) => {
+        const { seekoraClient, seekoraContext, ...rest } = props;
+        const containerRef = useRef(null);
+        const impressionTrackedRef = useRef(false);
+        const product = getProductFromProps(rest);
+        const position = getPositionFromProps(rest);
+        const sendEvent = useCallback(async (eventName, metadata) => {
+            if (!seekoraClient)
+                return;
+            try {
+                await seekoraClient.trackEvent?.({
+                    event_name: eventName,
+                    metadata: {
+                        product_id: product?.id || product?.objectID,
+                        product_title: product?.title || product?.name,
+                        product_price: product?.price,
+                        position,
+                        timestamp: Date.now(),
+                        source: 'with_analytics_hoc',
+                        ...metadata,
+                    },
+                }, seekoraContext);
+            }
+            catch (error) {
+                log.warn(`withAnalytics: Failed to track ${eventName}`, { error });
+            }
+        }, [seekoraClient, seekoraContext, product, position]);
+        const handleClick = useCallback(() => {
+            if (!trackClick || !product)
+                return;
+            sendEvent(clickEventName, {});
+            if (seekoraClient?.trackClick && product) {
+                Promise.resolve(seekoraClient.trackClick(product.id || product.objectID || '', position + 1, seekoraContext)).catch(() => { });
+            }
+        }, [trackClick, product, sendEvent, seekoraClient, seekoraContext, position]);
+        // Impression tracking
+        useEffect(() => {
+            if (!trackImpression || !seekoraClient || !containerRef.current || impressionTrackedRef.current)
+                return;
+            if (typeof IntersectionObserver === 'undefined')
+                return;
+            const observer = new IntersectionObserver((entries) => {
+                for (const entry of entries) {
+                    if (entry.isIntersecting && !impressionTrackedRef.current) {
+                        impressionTrackedRef.current = true;
+                        sendEvent('product.impression', {});
+                        observer.disconnect();
+                    }
+                }
+            }, { threshold: 0.5 });
+            observer.observe(containerRef.current);
+            return () => observer.disconnect();
+        }, [trackImpression, seekoraClient, sendEvent]);
+        return (React.createElement("div", { ref: (node) => {
+                containerRef.current = node;
+                if (typeof ref === 'function')
+                    ref(node);
+                else if (ref)
+                    ref.current = node;
+            }, onClick: handleClick, style: { display: 'contents' } },
+            React.createElement(Component, { ...rest })));
+    });
+    Wrapped.displayName = `withAnalytics(${displayName})`;
+    return Wrapped;
+}

package/dist/components/product-page/ProductInfo.d.ts

@@ -3,19 +3,42 @@
  *
  * Title, description, price, optional variant selector and CTA. Minimal layout;
  * override with className/style. For use on individual product page.
+ *
+ * When options/variants/selections/onSelectionChange are provided and
+ * renderVariantSelector is NOT provided, renders the built-in VariantSelector.
+ * renderVariantSelector still takes priority as an override.
  */
 import React from 'react';
+import type { ProductBadge, ProductOption, ProductVariant } from '@seekora-ai/ui-sdk-types';
 export interface ProductInfoProps {
     title: string;
     description?: string;
     price?: number | string;
     currency?: string;
-    /** Optional variant selector (e.g. size/color) */
+    /** Compare/original price for strikethrough display */
+    comparePrice?: number | string;
+    /** Product brand */
+    brand?: string;
+    /** Whether product is available */
+    available?: boolean;
+    /** Badges to display */
+    badges?: ProductBadge[];
+    /** Product option axes (Color, Size, etc.) */
+    options?: ProductOption[];
+    /** Product variants */
+    variants?: ProductVariant[];
+    /** Currently selected variant */
+    selectedVariant?: ProductVariant | null;
+    /** Current option selections */
+    selections?: Record<string, string>;
+    /** Called when an option value is selected */
+    onSelectionChange?: (optionName: string, value: string) => void;
+    /** Optional variant selector override (takes priority over built-in) */
     renderVariantSelector?: () => React.ReactNode;
     /** Optional CTA (e.g. Add to cart) */
     renderCTA?: () => React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
 }
-export declare function ProductInfo({ title, description, price, currency, renderVariantSelector, renderCTA, className, style, }: ProductInfoProps): React.JSX.Element;
+export declare function ProductInfo({ title, description, price, currency, comparePrice, brand, available, badges, options, variants, selectedVariant: _selectedVariant, selections, onSelectionChange, renderVariantSelector, renderCTA, className, style, }: ProductInfoProps): React.JSX.Element;
 //# sourceMappingURL=ProductInfo.d.ts.map

package/dist/components/product-page/ProductInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductInfo.d.ts","sourceRoot":"","sources":["../../../src/components/product-page/ProductInfo.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,qBAAqB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC9C,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAc,EACd,qBAAqB,EACrB,SAAS,EACT,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,qBAsBlB"}
+{"version":3,"file":"ProductInfo.d.ts","sourceRoot":"","sources":["../../../src/components/product-page/ProductInfo.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE5F,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,iCAAiC;IACjC,eAAe,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACxC,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,wEAAwE;IACxE,qBAAqB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC9C,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAc,EACd,YAAY,EACZ,KAAK,EACL,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,EACR,eAAe,EAAE,gBAAgB,EACjC,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EACrB,SAAS,EACT,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,qBA2DlB"}

package/dist/components/product-page/ProductInfo.js

@@ -3,17 +3,32 @@
  *
  * Title, description, price, optional variant selector and CTA. Minimal layout;
  * override with className/style. For use on individual product page.
+ *
+ * When options/variants/selections/onSelectionChange are provided and
+ * renderVariantSelector is NOT provided, renders the built-in VariantSelector.
+ * renderVariantSelector still takes priority as an override.
  */
 import React from 'react';
 import { clsx } from 'clsx';
-export function ProductInfo({ title, description, price, currency = '$', renderVariantSelector, renderCTA, className, style, }) {
+import { PriceDisplay } from '../primitives/PriceDisplay';
+import { BadgeList } from '../primitives/BadgeList';
+import { VariantSelector } from '../primitives/VariantSelector';
+export function ProductInfo({ title, description, price, currency = '$', comparePrice, brand, available, badges, options, variants, selectedVariant: _selectedVariant, selections, onSelectionChange, renderVariantSelector, renderCTA, className, style, }) {
     const priceNum = price != null ? (typeof price === 'number' ? price : parseFloat(String(price))) : null;
+    const comparePriceNum = comparePrice != null ? (typeof comparePrice === 'number' ? comparePrice : parseFloat(String(comparePrice))) : null;
+    const showBuiltInVariantSelector = !renderVariantSelector && options && options.length > 0 && variants && selections && onSelectionChange;
     return (React.createElement("div", { className: clsx('seekora-product-info', className), style: { display: 'flex', flexDirection: 'column', gap: 12, ...style } },
+        badges && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "inline" })),
+        brand && (React.createElement("span", { className: "seekora-product-info-brand", style: { fontSize: '0.8125rem', color: 'var(--seekora-text-secondary)', textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
         React.createElement("h1", { className: "seekora-product-info-title", style: { fontSize: '1.25rem', fontWeight: 600, margin: 0 } }, title),
-        priceNum != null && !Number.isNaN(priceNum) ? (React.createElement("span", { className: "seekora-product-info-price", style: { fontSize: '1.125rem', fontWeight: 600 } },
-            currency,
-            priceNum.toFixed(2))) : null,
+        (priceNum != null && !Number.isNaN(priceNum)) && (React.createElement("div", { className: "seekora-product-info-price" },
+            React.createElement(PriceDisplay, { price: priceNum, comparePrice: comparePriceNum ?? undefined, currency: currency, style: { fontSize: '1.125rem' } }))),
+        available != null && (React.createElement("span", { className: "seekora-product-info-availability", style: {
+                fontSize: '0.875rem',
+                color: available ? 'var(--seekora-success, #22c55e)' : 'var(--seekora-error, #ef4444)',
+            } }, available ? 'In Stock' : 'Out of Stock')),
         description ? (React.createElement("p", { className: "seekora-product-info-description", style: { fontSize: '0.875rem', color: 'var(--seekora-text-secondary)', margin: 0, lineHeight: 1.5 } }, description)) : null,
-        renderVariantSelector?.(),
+        renderVariantSelector ? renderVariantSelector() : null,
+        showBuiltInVariantSelector && (React.createElement(VariantSelector, { options: options, variants: variants, selections: selections, onSelectionChange: onSelectionChange, showAvailability: true })),
         renderCTA?.()));
 }

package/dist/components/section-primitives/SectionItemGrid.d.ts

@@ -7,6 +7,8 @@ export interface SectionItemGridProps {
     maxItems?: number;
     className?: string;
     style?: React.CSSProperties;
+    /** Show loading state when fetching and no previous items (default false: show previous results until new render) */
+    showLoadingState?: boolean;
     getItemId?: (item: unknown) => string;
     getItemTitle?: (item: unknown) => string;
     getItemImage?: (item: unknown) => string | undefined;
@@ -14,5 +16,5 @@ export interface SectionItemGridProps {
     getItemUrl?: (item: unknown) => string | undefined;
     renderItem?: (item: unknown, index: number) => React.ReactNode;
 }
-export declare function SectionItemGrid({ columns, maxItems, className, style, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl, renderItem, }: SectionItemGridProps): React.JSX.Element;
+export declare function SectionItemGrid({ columns, maxItems, className, style, showLoadingState, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl, renderItem, }: SectionItemGridProps): React.JSX.Element;
 //# sourceMappingURL=SectionItemGrid.d.ts.map

package/dist/components/section-primitives/SectionItemGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionItemGrid.d.ts","sourceRoot":"","sources":["../../../src/components/section-primitives/SectionItemGrid.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAChE;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAW,EACX,QAAa,EACb,SAAS,EACT,KAAK,EACL,SAA8E,EAC9E,YAAyE,EACzE,YAAmE,EACnE,kBAAqF,EACrF,UAA6D,EAC7D,UAAU,GACX,EAAE,oBAAoB,qBAsBtB"}
+{"version":3,"file":"SectionItemGrid.d.ts","sourceRoot":"","sources":["../../../src/components/section-primitives/SectionItemGrid.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,qHAAqH;IACrH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAChE;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAW,EACX,QAAa,EACb,SAAS,EACT,KAAK,EACL,gBAAwB,EACxB,SAA8E,EAC9E,YAAyE,EACzE,YAAmE,EACnE,kBAAqF,EACrF,UAA6D,EAC7D,UAAU,GACX,EAAE,oBAAoB,qBAuBtB"}

package/dist/components/section-primitives/SectionItemGrid.js

@@ -6,11 +6,12 @@ import { useSectionSearchContext } from './SectionSearchContext';
 import { ItemGrid } from '../suggestions-primitives/ItemGrid';
 import { SectionLoading } from './SectionLoading';
 import { SectionError } from './SectionError';
-export function SectionItemGrid({ columns = 4, maxItems = 12, className, style, getItemId = (i) => i.id ?? String(i?.objectID ?? ''), getItemTitle = (i) => i.title ?? i?.title ?? '', getItemImage = (i) => i.image ?? i?.image, getItemDescription = (i) => i.description ?? i?.description, getItemUrl = (i) => i.url ?? i?.url, renderItem, }) {
+export function SectionItemGrid({ columns = 4, maxItems = 12, className, style, showLoadingState = false, getItemId = (i) => i.id ?? String(i?.objectID ?? ''), getItemTitle = (i) => i.title ?? i?.title ?? '', getItemImage = (i) => i.image ?? i?.image, getItemDescription = (i) => i.description ?? i?.description, getItemUrl = (i) => i.url ?? i?.url, renderItem, }) {
     const { items, loading, error, trackClick } = useSectionSearchContext();
-    if (loading)
+    if (loading && items.length === 0 && showLoadingState)
         return React.createElement(SectionLoading, { className: className, style: style });
     if (error)
         return React.createElement(SectionError, { className: className, style: style });
+    // When loading with previous items, show them (no loading screen)
     return (React.createElement(ItemGrid, { items: items, maxItems: maxItems, columns: columns, className: className, style: style, getItemId: getItemId, getItemTitle: getItemTitle, getItemImage: getItemImage, getItemDescription: getItemDescription, getItemUrl: getItemUrl, renderItem: renderItem, onItemClick: (item, index) => trackClick(item, index) }));
 }