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

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;AAG9E,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,4BAsKtB"}

package/dist/components/primitives/VariantSelector.js

@@ -0,0 +1,155 @@
+/**
+ * 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';
+import { CustomSelect } from './CustomSelect';
+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, inherit)',
+                } },
+                option.name,
+                selected && (React.createElement("span", { style: { fontWeight: 400, marginLeft: 6, color: 'var(--seekora-text-secondary, inherit)' } }, selected))),
+            mode === 'dropdown' ? (React.createElement("div", { onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() },
+                React.createElement(CustomSelect, { className: "seekora-variant-dropdown", value: selected ?? '', onChange: (val) => onSelectionChange(option.name, val), placeholder: `Select ${option.name}`, "aria-label": `Select ${option.name}`, options: option.values.map((val) => {
+                        const available = showAvailability
+                            ? getAvailability(option.name, val, options, variants, selections)
+                            : true;
+                        return {
+                            value: val,
+                            label: available ? val : `${val} (Unavailable)`,
+                            disabled: !available,
+                        };
+                    }), style: {
+                        minWidth: 120,
+                        '--seekora-select-border': 'var(--seekora-border-color, rgba(128,128,128,0.2))',
+                        '--seekora-select-bg': 'var(--seekora-bg-surface, transparent)',
+                        '--seekora-select-color': 'var(--seekora-text-primary, inherit)',
+                    } }))) : (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, rgba(128,128,128,0.2))',
+                            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, rgba(128,128,128,0.2))',
+                        backgroundColor: isActive
+                            ? 'var(--seekora-primary, #111827)'
+                            : 'var(--seekora-bg-surface, transparent)',
+                        color: isActive
+                            ? 'transparent'
+                            : 'var(--seekora-text-primary, inherit)',
+                        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;AAG9E,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,4BAwLtB"}

package/dist/components/primitives/VariantSwatches.js

@@ -0,0 +1,188 @@
+/**
+ * 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';
+import { useIsMobile } from '../../utils/responsive';
+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());
+    const isMobile = useIsMobile();
+    // Responsive sizing
+    const colorSwatchSize = isMobile ? 20 : 14; // Larger on mobile for touch
+    const textSwatchPadding = isMobile ? '4px 10px' : '1px 6px';
+    const textSwatchFontSize = isMobile ? '0.75rem' : '0.6875rem';
+    const gap = isMobile ? 6 : 4;
+    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, ...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, 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-flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: colorSwatchSize,
+                            height: colorSwatchSize,
+                            minWidth: colorSwatchSize,
+                            minHeight: colorSwatchSize,
+                            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 ? 'var(--seekora-swatch-ring, 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: 'var(--seekora-unavailable-line, #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-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        padding: textSwatchPadding,
+                        minHeight: isMobile ? 32 : 24, // Minimum touch target on mobile
+                        fontSize: textSwatchFontSize,
+                        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
+                            ? 'var(--seekora-primary-text, #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: textSwatchFontSize,
+                    color: 'var(--seekora-primary, #2563eb)',
+                    background: 'none',
+                    border: 'none',
+                    padding: isMobile ? '4px 8px' : 0,
+                    minHeight: isMobile ? 32 : 'auto', // Touch target on mobile
+                    cursor: 'pointer',
+                    textDecoration: 'underline',
+                    fontWeight: 500,
+                } }, isExpanded ? 'Show less' : `+${overflow} more`))));
+    })));
+}

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

@@ -0,0 +1,12 @@
+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';
+export { CustomSelect, type CustomSelectProps, type CustomSelectOption, type CustomSelectTheme } from './CustomSelect';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;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;AAC3G,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/primitives/index.js

@@ -0,0 +1,11 @@
+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';
+export { CustomSelect } from './CustomSelect';

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