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

package/dist/components/suggestions-primitives/CategoriesTabs.js

@@ -0,0 +1,35 @@
+/**
+ * CategoriesTabs – horizontal tabs (e.g. filtered tabs) (primitive)
+ *
+ * Active tab from context; on select updates context and tracks analytics.
+ */
+import React from 'react';
+import { useSuggestionsContext } from './SuggestionsContext';
+import { clsx } from 'clsx';
+export function CategoriesTabs({ className, style, tabClassName }) {
+    const { filteredTabs, activeTabId, setActiveTab } = useSuggestionsContext();
+    if (filteredTabs.length === 0)
+        return null;
+    return (React.createElement("div", { className: clsx('seekora-suggestions-categories-tabs', className), style: {
+            display: 'flex',
+            gap: 4,
+            padding: '8px 12px',
+            borderBottom: '1px solid var(--seekora-border-color, #e5e7eb)',
+            overflowX: 'auto',
+            ...style,
+        }, role: "tablist" }, filteredTabs.map((tab) => {
+        const isActive = activeTabId === tab.id;
+        return (React.createElement("button", { key: tab.id, type: "button", role: "tab", "aria-selected": isActive, className: clsx('seekora-suggestions-tab', isActive && 'seekora-suggestions-tab--active', tabClassName), style: {
+                padding: '8px 12px',
+                border: 'none',
+                borderRadius: 'var(--seekora-border-radius, 6px)',
+                backgroundColor: isActive ? 'var(--seekora-primary-light, rgba(59, 130, 246, 0.1))' : 'transparent',
+                color: isActive ? 'var(--seekora-primary, #3b82f6)' : 'inherit',
+                cursor: 'pointer',
+                fontSize: '0.875rem',
+                fontWeight: isActive ? 600 : 400,
+                whiteSpace: 'nowrap',
+                transition: 'background-color 120ms ease',
+            }, onClick: () => setActiveTab(tab) }, tab.label));
+    })));
+}

package/dist/components/suggestions-primitives/DropdownPanel.d.ts

@@ -0,0 +1,24 @@
+/**
+ * DropdownPanel – floating panel for suggestions (primitive)
+ *
+ * Shows when isOpen; handles click-outside and Escape to close. Children = any composition
+ * of SuggestionList, ProductGrid, etc. Position and z-index configurable.
+ */
+import React from 'react';
+export interface DropdownPanelProps {
+    children: React.ReactNode;
+    position?: 'absolute' | 'fixed';
+    /** CSS top offset (e.g. '100%', '4px') */
+    top?: string | number;
+    left?: string | number;
+    right?: string | number;
+    width?: string | number;
+    maxHeight?: string | number;
+    zIndex?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+}
+export declare function DropdownPanel({ children, position, top, left, right, width, maxHeight, zIndex, className, style, closeOnClickOutside, closeOnEscape, }: DropdownPanelProps): React.JSX.Element | null;
+//# sourceMappingURL=DropdownPanel.d.ts.map

package/dist/components/suggestions-primitives/DropdownPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownPanel.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/DropdownPanel.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAmB9D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAqB,EACrB,GAAY,EACZ,IAAQ,EACR,KAAK,EACL,KAAc,EACd,SAAkB,EAClB,MAAyB,EACzB,SAAS,EACT,KAAK,EACL,mBAA0B,EAC1B,aAAoB,GACrB,EAAE,kBAAkB,4BAqDpB"}

package/dist/components/suggestions-primitives/DropdownPanel.js

@@ -0,0 +1,67 @@
+/**
+ * DropdownPanel – floating panel for suggestions (primitive)
+ *
+ * Shows when isOpen; handles click-outside and Escape to close. Children = any composition
+ * of SuggestionList, ProductGrid, etc. Position and z-index configurable.
+ */
+import React, { useRef, useEffect, useCallback } from 'react';
+import { useSuggestionsContext } from './SuggestionsContext';
+import { clsx } from 'clsx';
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
+// Z-index scale for consistent layering
+const Z_INDEX = {
+    dropdown: 100,
+    modal: 200,
+    overlay: 300,
+    tooltip: 50,
+};
+export function DropdownPanel({ children, position = 'absolute', top = '100%', left = 0, right, width = '100%', maxHeight = '80vh', zIndex = Z_INDEX.dropdown, className, style, closeOnClickOutside = true, closeOnEscape = true, }) {
+    const { isOpen, close } = useSuggestionsContext();
+    const panelRef = useRef(null);
+    useEffect(() => {
+        if (!closeOnEscape || !isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                close();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [closeOnEscape, isOpen, close]);
+    const handleClickOutside = useCallback((e) => {
+        if (!closeOnClickOutside || !panelRef.current)
+            return;
+        const target = e.target;
+        if (!panelRef.current.contains(target))
+            close();
+    }, [closeOnClickOutside, close]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, handleClickOutside]);
+    if (!isOpen)
+        return null;
+    const panelStyle = {
+        position,
+        top,
+        left,
+        right,
+        width,
+        maxHeight,
+        zIndex,
+        overflow: 'auto',
+        backgroundColor: 'var(--seekora-bg-surface, #fff)',
+        border: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
+        boxShadow: 'var(--seekora-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05))',
+        marginTop: 4,
+    };
+    return (React.createElement("div", { ref: panelRef, role: "listbox", className: clsx('seekora-suggestions-dropdown-panel', className), style: { ...panelStyle, ...style } }, children));
+}

package/dist/components/suggestions-primitives/ItemCard.d.ts

@@ -0,0 +1,48 @@
+/**
+ * ItemCard – generic item tile (primitive)
+ *
+ * Domain-agnostic: works for docs, articles, products, or any hit with id, title,
+ * optional description, image, url. Overridable via className/style. Use for
+ * search results, section blocks, or any list; for e-commerce products use ProductCard.
+ */
+import React from 'react';
+import type { ActionButton } from '../primitives/ActionButtons';
+/** Generic item shape for ItemCard – compatible with ResultItem and most hit types */
+export interface GenericItem {
+    id: string;
+    title: string;
+    description?: string;
+    image?: string;
+    /** Multiple images for carousel/hover/thumbStrip */
+    images?: string[];
+    url?: string;
+    /** Widget/display fields */
+    primaryText?: string;
+    secondaryText?: string;
+    tertiaryText?: string;
+    imageUrl?: string;
+    [key: string]: unknown;
+}
+export type ImageDisplayVariant = 'single' | 'carousel' | 'hover' | 'thumbStrip' | 'thumbList';
+export interface ItemCardProps {
+    item: GenericItem;
+    /** Position in list (for analytics) */
+    position?: number;
+    onSelect?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Render as link (anchor) when item.url is set; otherwise button */
+    asLink?: boolean;
+    /** When multiple images, use ImageDisplay with this variant */
+    imageVariant?: ImageDisplayVariant;
+    /** Layout direction: vertical (default) or horizontal (image left, content right) */
+    layout?: 'vertical' | 'horizontal';
+    /** Action buttons (add to cart, wishlist, etc.) */
+    actionButtons?: ActionButton[];
+    /** Action buttons position */
+    actionButtonsPosition?: 'overlay-top-right' | 'overlay-bottom' | 'inline';
+    /** Show action button labels */
+    showActionLabels?: boolean;
+}
+export declare function ItemCard({ item, position, onSelect, className, style, asLink, imageVariant, layout, actionButtons, actionButtonsPosition, showActionLabels, }: ItemCardProps): React.JSX.Element;
+//# sourceMappingURL=ItemCard.d.ts.map

package/dist/components/suggestions-primitives/ItemCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemCard.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ItemCard.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAgBhE,sFAAsF;AACtF,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;AAE/F,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,qFAAqF;IACrF,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACnC,mDAAmD;IACnD,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;IAC1E,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA0BD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAa,EACb,YAAuB,EACvB,MAAmB,EACnB,aAAa,EACb,qBAA2C,EAC3C,gBAAwB,GACzB,EAAE,aAAa,qBAmHf"}

package/dist/components/suggestions-primitives/ItemCard.js

@@ -0,0 +1,103 @@
+/**
+ * ItemCard – generic item tile (primitive)
+ *
+ * Domain-agnostic: works for docs, articles, products, or any hit with id, title,
+ * optional description, image, url. Overridable via className/style. Use for
+ * search results, section blocks, or any list; for e-commerce products use ProductCard.
+ */
+import React from 'react';
+import { clsx } from 'clsx';
+import { ImageDisplay } from '../primitives/ImageDisplay';
+import { ActionButtons } from '../primitives/ActionButtons';
+import { useIsMobile, useResponsiveGap } from '../../utils/responsive';
+const TRANSITIONS = {
+    fast: '150ms ease-in-out',
+    normal: '200ms ease-in-out',
+    slow: '300ms ease-in-out',
+};
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
+const cardStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: 8,
+    cursor: 'pointer',
+    border: 'none',
+    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
+    backgroundColor: 'transparent',
+    textAlign: 'left',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    transition: `background-color ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
+};
+const imgStyle = {
+    width: '100%',
+    aspectRatio: 'var(--seekora-card-aspect-ratio, 1)',
+    objectFit: 'cover',
+    borderRadius: BORDER_RADIUS.sm,
+    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
+    display: 'block',
+    overflow: 'hidden',
+};
+export function ItemCard({ item, position, onSelect, className, style, asLink = true, imageVariant = 'single', layout = 'vertical', actionButtons, actionButtonsPosition = 'overlay-top-right', showActionLabels = false, }) {
+    const images = item.images?.length ? item.images : item.image ?? item.imageUrl ? [String(item.image ?? item.imageUrl)] : [];
+    const title = item.title ?? item.primaryText ?? '';
+    const description = item.description ?? item.secondaryText;
+    const href = item.url;
+    const isMobile = useIsMobile();
+    const horizontalGap = useResponsiveGap(12);
+    const isHorizontal = layout === 'horizontal';
+    const [isHovered, setIsHovered] = React.useState(false);
+    // Responsive dimensions for horizontal layout
+    const imageMinWidth = isMobile ? 60 : 80;
+    const imageMaxWidth = isMobile ? 100 : 120;
+    const imageFlex = isMobile ? '20%' : '20%';
+    const imageHeight = isMobile ? 60 : 80;
+    // Responsive font sizes
+    const titleFontSize = isMobile ? '0.9375rem' : '0.875rem';
+    const descriptionFontSize = isMobile ? '0.875rem' : '0.8125rem';
+    const textGap = isMobile ? 6 : 4;
+    const lineClamp = isMobile ? 3 : 2; // More lines on mobile
+    // Hover style
+    const cardHoverStyle = isHovered
+        ? {
+            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, rgba(0,0,0,0.03)))',
+            boxShadow: 'var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08))',
+        }
+        : {};
+    const imageBlock = images.length > 0 ? (React.createElement("div", { style: { position: 'relative', overflow: 'hidden', borderRadius: 4, ...(isHorizontal ? { minWidth: imageMinWidth, flexBasis: imageFlex, maxWidth: imageMaxWidth, flexShrink: 0 } : {}) } },
+        React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: String(title), className: "seekora-item-card-image" }),
+        actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" })))) : (React.createElement("div", { className: "seekora-item-card-placeholder", style: { ...imgStyle, ...(isHorizontal ? { minWidth: imageMinWidth, flexBasis: imageFlex, maxWidth: imageMaxWidth, height: imageHeight, flexShrink: 0 } : {}) }, "aria-hidden": true }));
+    const textBlock = (React.createElement("div", { style: isHorizontal ? { display: 'flex', flexDirection: 'column', gap: textGap, flex: 1, minWidth: 0 } : undefined },
+        React.createElement("span", { className: "seekora-item-card-title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: isHorizontal ? 2 : 3, WebkitBoxOrient: 'vertical' } }, String(title)),
+        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: descriptionFontSize, color: 'inherit', opacity: 0.6, lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: lineClamp, WebkitBoxOrient: 'vertical', overflow: 'hidden' } }, String(description))) : null,
+        actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" }))));
+    const content = isHorizontal ? (React.createElement("div", { style: { display: 'flex', gap: horizontalGap, alignItems: 'flex-start' } },
+        imageBlock,
+        textBlock)) : (React.createElement(React.Fragment, null,
+        imageBlock,
+        textBlock));
+    const commonProps = {
+        className: clsx('seekora-item-card', isHorizontal && 'seekora-item-card--horizontal', isHovered && 'seekora-item-card--hover', className),
+        style: {
+            ...cardStyle,
+            ...(isHorizontal ? { flexDirection: 'row' } : {}),
+            ...cardHoverStyle,
+            ...style,
+        },
+        'data-position': position,
+        onClick: onSelect,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onMouseDown: onSelect ? (e) => { e.preventDefault(); onSelect(); } : undefined,
+    };
+    if (asLink && href) {
+        return (React.createElement("a", { href: href, ...commonProps, "data-item-id": item.id }, content));
+    }
+    return (React.createElement("button", { type: "button", ...commonProps, "data-item-id": item.id }, content));
+}

package/dist/components/suggestions-primitives/ItemGrid.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ItemGrid – generic grid of items (primitive)
+ *
+ * Domain-agnostic: accepts any items[] and onItemClick. Renders ItemCard by default
+ * or custom renderItem. Use for search hits, section blocks, docs, articles; for
+ * product-only lists use ProductGrid.
+ */
+import React from 'react';
+import { type GenericItem } from './ItemCard';
+export interface ItemGridProps<T = GenericItem> {
+    items: T[];
+    onItemClick?: (item: T, index: number) => void;
+    /** Map item to GenericItem for default ItemCard rendering */
+    getItemId?: (item: T) => string;
+    getItemTitle?: (item: T) => string;
+    getItemImage?: (item: T) => string | undefined;
+    getItemDescription?: (item: T) => string | undefined;
+    getItemUrl?: (item: T) => string | undefined;
+    /** Custom render for each item; overrides default ItemCard */
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    maxItems?: number;
+    columns?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    gridClassName?: string;
+}
+export declare function ItemGrid<T = GenericItem>({ items, onItemClick, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl, renderItem, maxItems, columns, className, style, gridClassName, }: ItemGridProps<T>): React.JSX.Element | null;
+//# sourceMappingURL=ItemGrid.d.ts.map

package/dist/components/suggestions-primitives/ItemGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemGrid.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ItemGrid.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAWxD,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,WAAW;IAC5C,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,6DAA6D;IAC7D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAC/C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAC7C,8DAA8D;IAC9D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0BD,wBAAgB,QAAQ,CAAC,CAAC,GAAG,WAAW,EAAE,EACxC,KAAK,EACL,WAAW,EACX,SAA2C,EAC3C,YAAiD,EACjD,YAAiD,EACjD,kBAA6D,EAC7D,UAA6C,EAC7C,UAAU,EACV,QAAa,EACb,OAAW,EACX,SAAS,EACT,KAAK,EACL,aAAa,GACd,EAAE,aAAa,CAAC,CAAC,CAAC,4BAkClB"}

package/dist/components/suggestions-primitives/ItemGrid.js

@@ -0,0 +1,55 @@
+/**
+ * ItemGrid – generic grid of items (primitive)
+ *
+ * Domain-agnostic: accepts any items[] and onItemClick. Renders ItemCard by default
+ * or custom renderItem. Use for search hits, section blocks, docs, articles; for
+ * product-only lists use ProductGrid.
+ */
+import React from 'react';
+import { clsx } from 'clsx';
+import { ItemCard } from './ItemCard';
+import { useResponsiveColumns, useResponsiveGap, useResponsivePadding } from '../../utils/responsive';
+const SPACING = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+};
+const defaultGridStyle = {
+    display: 'grid',
+    gap: SPACING.md,
+    padding: SPACING.md,
+};
+function toGenericItem(item, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl) {
+    return {
+        id: getItemId(item),
+        title: getItemTitle(item),
+        image: getItemImage?.(item),
+        description: getItemDescription?.(item),
+        url: getItemUrl?.(item),
+        ...(typeof item === 'object' && item !== null ? item : {}),
+    };
+}
+export function ItemGrid({ items, onItemClick, getItemId = (i) => i.id, getItemTitle = (i) => i.title, getItemImage = (i) => i.image, getItemDescription = (i) => i.description, getItemUrl = (i) => i.url, renderItem, maxItems = 24, columns = 4, className, style, gridClassName, }) {
+    // Responsive columns and spacing
+    const responsiveColumns = useResponsiveColumns(columns);
+    const responsiveGap = useResponsiveGap(SPACING.md);
+    const responsivePadding = useResponsivePadding(SPACING.md);
+    const slice = items.slice(0, maxItems);
+    if (slice.length === 0)
+        return null;
+    const gridStyle = {
+        display: 'grid',
+        gap: responsiveGap,
+        padding: responsivePadding,
+        gridTemplateColumns: `repeat(${responsiveColumns}, minmax(0, 1fr))`,
+    };
+    return (React.createElement("div", { className: clsx('seekora-item-grid', className), style: style },
+        React.createElement("div", { className: clsx('seekora-item-grid-inner', gridClassName), style: gridStyle }, slice.map((item, i) => {
+            if (renderItem)
+                return React.createElement(React.Fragment, { key: getItemId(item) }, renderItem(item, i));
+            const generic = toGenericItem(item, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl);
+            return (React.createElement(ItemCard, { key: generic.id, item: generic, position: i, onSelect: onItemClick ? () => onItemClick(item, i) : undefined }));
+        }))));
+}

package/dist/components/suggestions-primitives/ProductCard.d.ts

@@ -0,0 +1,45 @@
+/**
+ * ProductCard – one product tile (primitive)
+ *
+ * Without displayConfig: renders the original minimal layout (image, title, price).
+ * With displayConfig: renders layout variants (minimal, standard, detailed, compact, horizontal).
+ */
+import React from 'react';
+import type { ActionButton } from '../primitives/ActionButtons';
+import type { ProductItem } from '@seekora-ai/ui-sdk-types';
+import type { ProductDisplayConfig } from '../suggestions/types';
+export type ProductCardImageVariant = 'single' | 'carousel' | 'hover' | 'thumbStrip' | 'thumbList';
+export interface ProductCardProps {
+    product: ProductItem;
+    position: number;
+    section?: string;
+    tabId?: string;
+    onSelect: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    imageVariant?: ProductCardImageVariant;
+    /** Product display configuration for layout variants */
+    displayConfig?: ProductDisplayConfig;
+    /** Callback when a variant swatch is hovered (e.g., to swap card image) */
+    onVariantHover?: (optionName: string, value: string) => void;
+    /** Callback when a variant swatch is clicked (e.g., to swap card image permanently) */
+    onVariantClick?: (optionName: string, value: string) => void;
+    /** Currently selected variant values (e.g., { Color: 'Black', Size: 'M' }) */
+    selectedVariants?: Record<string, string>;
+    /** Render as link when true and product.url exists */
+    asLink?: boolean;
+    /** Action buttons (add to cart, wishlist, etc.) */
+    actionButtons?: ActionButton[];
+    /** Action buttons position */
+    actionButtonsPosition?: 'overlay-top-right' | 'overlay-bottom' | 'inline';
+    /** Show action button labels */
+    showActionLabels?: boolean;
+    /** Enable image zoom functionality */
+    enableImageZoom?: boolean;
+    /** Image zoom mode: 'hover' (Amazon-style), 'lens', 'click' (lightbox), 'both' (hover + click) */
+    imageZoomMode?: 'hover' | 'lens' | 'click' | 'both';
+    /** Image zoom magnification level (2 = 200%, 3 = 300%) */
+    imageZoomLevel?: number;
+}
+export declare function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }: ProductCardProps): React.JSX.Element;
+//# sourceMappingURL=ProductCard.d.ts.map

package/dist/components/suggestions-primitives/ProductCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductCard.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAA2C,MAAM,0BAA0B,CAAC;AACrG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAwBjE,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;AAEnG,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,wDAAwD;IACxD,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,2EAA2E;IAC3E,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,uFAAuF;IACvF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;IAC1E,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kGAAkG;IAClG,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACpD,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAuB,EACvB,aAAa,EACb,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,aAAa,EACb,qBAAgC,EAChC,gBAAwB,EACxB,eAAuB,EACvB,aAAsB,EACtB,cAAoB,GACrB,EAAE,gBAAgB,qBAkNlB"}

package/dist/components/suggestions-primitives/ProductCard.js

@@ -0,0 +1,177 @@
+/**
+ * ProductCard – one product tile (primitive)
+ *
+ * Without displayConfig: renders the original minimal layout (image, title, price).
+ * With displayConfig: renders layout variants (minimal, standard, detailed, compact, horizontal).
+ */
+import React, { useMemo } from 'react';
+import { clsx } from 'clsx';
+import { ImageDisplay } from '../primitives/ImageDisplay';
+import { extractBadges, getPriceRange, findVariantBySelections } from '../suggestions/utils';
+const TRANSITIONS = {
+    fast: '150ms ease-in-out',
+    normal: '200ms ease-in-out',
+    slow: '300ms ease-in-out',
+};
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
+import { MinimalLayout, StandardLayout, DetailedLayout, CompactLayout, HorizontalLayout, } from './ProductCardLayouts';
+const cardStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: 8,
+    cursor: 'pointer',
+    border: 'none',
+    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
+    backgroundColor: 'transparent',
+    textAlign: 'left',
+    transition: `background-color ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
+};
+const imgStyle = {
+    width: '100%',
+    aspectRatio: '1',
+    objectFit: 'cover',
+    borderRadius: BORDER_RADIUS.sm,
+    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
+};
+export function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant = 'single', displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition = 'inline', showActionLabels = false, enableImageZoom = false, imageZoomMode = 'both', imageZoomLevel = 2.5, }) {
+    // Find selected variant if selections are provided
+    const selectedVariant = useMemo(() => {
+        if (!selectedVariants || !product.options || !product.variants)
+            return null;
+        return findVariantBySelections(product.options, product.variants, selectedVariants);
+    }, [selectedVariants, product.options, product.variants]);
+    // Compute effective display data (use selected variant if available, otherwise product defaults)
+    const effectiveImages = useMemo(() => {
+        // Priority: selected variant image > product images > product image
+        if (selectedVariant?.image)
+            return [selectedVariant.image];
+        if (product.images?.length)
+            return product.images;
+        if (product.image ?? product.imageUrl)
+            return [String(product.image ?? product.imageUrl)];
+        return [];
+    }, [selectedVariant, product]);
+    const effectiveTitle = useMemo(() => {
+        // Show variant title if available (e.g., "T-Shirt - Black / M")
+        if (selectedVariant?.title && selectedVariant.title !== product.title) {
+            return `${product.title ?? product.name ?? ''} - ${selectedVariant.title}`;
+        }
+        return product.title ?? product.name ?? '';
+    }, [selectedVariant, product]);
+    const effectivePrice = useMemo(() => {
+        const variantPrice = selectedVariant?.price;
+        if (variantPrice != null)
+            return typeof variantPrice === 'number' ? variantPrice : Number(variantPrice);
+        const productPrice = product.price;
+        return productPrice != null ? (typeof productPrice === 'number' ? productPrice : Number(productPrice)) : null;
+    }, [selectedVariant, product.price]);
+    const effectiveComparePrice = useMemo(() => {
+        const variantCompare = selectedVariant?.comparePrice;
+        if (variantCompare != null)
+            return typeof variantCompare === 'number' ? variantCompare : Number(variantCompare);
+        const productCompare = product.original_price ?? product.compare_at_price;
+        return productCompare != null ? (typeof productCompare === 'number' ? productCompare : Number(productCompare)) : null;
+    }, [selectedVariant, product]);
+    // Legacy vars for backwards compat
+    const images = effectiveImages;
+    const title = effectiveTitle;
+    const price = effectivePrice;
+    // Hover state for card
+    const [isHovered, setIsHovered] = React.useState(false);
+    const cardHoverStyle = isHovered
+        ? {
+            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, rgba(0,0,0,0.03)))',
+            boxShadow: 'var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08))',
+        }
+        : {};
+    // If no displayConfig, render original minimal layout (backwards compat)
+    if (!displayConfig) {
+        return (React.createElement("div", { role: "button", tabIndex: 0, className: clsx('seekora-suggestions-product-card', isHovered && 'seekora-suggestions-product-card--hover', className), style: { ...cardStyle, ...cardHoverStyle, ...style }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(), onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onSelect();
+                }
+            }, "data-position": position, "data-section": section, "data-tab-id": tabId },
+            images.length > 0 ? (React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: title, className: "seekora-suggestions-product-card-image", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel })) : (React.createElement("div", { className: "seekora-suggestions-product-card-placeholder", style: imgStyle, "aria-hidden": true })),
+            React.createElement("span", { className: "seekora-suggestions-product-card-title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
+            price != null && !Number.isNaN(price) ? (React.createElement("span", { className: "seekora-suggestions-product-card-price", style: { fontSize: '0.875rem', color: 'inherit', opacity: 0.6 } },
+                product.currency ?? '$',
+                price.toFixed(2))) : null));
+    }
+    // Enhanced layout with displayConfig
+    const layoutStyle = displayConfig.style ?? 'minimal';
+    const comparePrice = effectiveComparePrice;
+    const brand = product.brand ?? null;
+    const options = product.options ?? [];
+    const variants = product.variants ?? [];
+    const badges = useMemo(() => {
+        if (displayConfig.showBadges === false)
+            return [];
+        if (displayConfig.badgeExtractor)
+            return displayConfig.badgeExtractor(product.tags, product);
+        return extractBadges(product.tags, product);
+    }, [displayConfig, product]);
+    const priceRange = useMemo(() => {
+        if (!displayConfig.showPriceRange)
+            return null;
+        return getPriceRange(product.variants);
+    }, [displayConfig.showPriceRange, product.variants]);
+    const layoutProps = {
+        product,
+        images,
+        title,
+        price,
+        comparePrice,
+        brand,
+        badges,
+        priceRange,
+        options,
+        variants,
+        displayConfig,
+        imageVariant,
+        onVariantHover,
+        onVariantClick,
+        selectedVariants,
+        actionButtons,
+        actionButtonsPosition,
+        showActionLabels,
+        enableImageZoom,
+        imageZoomMode,
+        imageZoomLevel,
+    };
+    const layoutMap = {
+        minimal: MinimalLayout,
+        standard: StandardLayout,
+        detailed: DetailedLayout,
+        compact: CompactLayout,
+        horizontal: HorizontalLayout,
+    };
+    const LayoutComponent = layoutMap[layoutStyle] ?? MinimalLayout;
+    const rootClassName = clsx('seekora-product-card', `seekora-product-card--${layoutStyle}`, 'seekora-suggestions-product-card', isHovered && 'seekora-product-card--hover', className);
+    const rootStyle = {
+        ...cardStyle,
+        ...(layoutStyle === 'horizontal' ? { flexDirection: 'row' } : {}),
+        ...cardHoverStyle,
+        ...style,
+    };
+    if (asLink && product.url) {
+        return (React.createElement("a", { href: product.url, className: rootClassName, style: { ...rootStyle, textDecoration: 'none', color: 'inherit' }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: (e) => {
+                e.preventDefault();
+                onSelect();
+            }, "data-position": position, "data-section": section, "data-tab-id": tabId },
+            React.createElement(LayoutComponent, { ...layoutProps })));
+    }
+    return (React.createElement("div", { role: "button", tabIndex: 0, className: rootClassName, style: rootStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(), onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onSelect();
+            }
+        }, "data-position": position, "data-section": section, "data-tab-id": tabId },
+        React.createElement(LayoutComponent, { ...layoutProps })));
+}