@seekora-ai/ui-sdk-react 0.2.4 → 0.2.7

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

@@ -0,0 +1,105 @@
+/**
+ * SectionSearchProvider – preset query + filter section
+ *
+ * Runs client.search(query, { refinements, hitsPerPage, sortBy }) on mount and when
+ * query/filters change. Does not use global SearchStateManager. Use for menus,
+ * sidebar, front-page blocks (e.g. "New arrivals", "On sale").
+ */
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useSearchContext } from '../SearchProvider';
+import { SectionSearchContext } from './SectionSearchContext';
+function extractItems(response) {
+    if (!response)
+        return [];
+    if (Array.isArray(response.results))
+        return response.results;
+    if (Array.isArray(response.hits))
+        return response.hits;
+    const data = response.data;
+    if (data && Array.isArray(data.results))
+        return data.results;
+    if (data && Array.isArray(data.data))
+        return data.data;
+    return [];
+}
+function extractTotal(response) {
+    if (!response)
+        return 0;
+    const n = response.totalResults ?? response.total ?? response.total_results;
+    if (typeof n === 'number')
+        return n;
+    const data = response.data;
+    if (data?.total_results != null)
+        return Number(data.total_results);
+    if (data?.data?.total_results != null)
+        return Number(data.data.total_results);
+    return 0;
+}
+export function SectionSearchProvider({ children, query, refinements = [], maxItems = 12, sortBy, enabled = true, sectionId, }) {
+    const { client } = useSearchContext();
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [totalCount, setTotalCount] = useState(0);
+    useEffect(() => {
+        if (!enabled || !client?.search) {
+            setItems([]);
+            setLoading(false);
+            setError(null);
+            setTotalCount(0);
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        const options = {
+            per_page: maxItems,
+            page: 1,
+        };
+        if (sortBy)
+            options.sort_by = sortBy;
+        if (refinements.length > 0) {
+            options.filter_by = refinements.map((r) => `${r.field}:${r.value}`).join(',');
+        }
+        client
+            .search(query, options)
+            .then((response) => {
+            if (cancelled)
+                return;
+            setItems(extractItems(response));
+            setTotalCount(extractTotal(response));
+            setLoading(false);
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setError(err instanceof Error ? err : new Error(String(err)));
+            setItems([]);
+            setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, enabled, query, maxItems, sortBy, refinements]);
+    const trackClick = useCallback((item, position) => {
+        if (!client?.trackEvent)
+            return;
+        const id = item?.id ?? item?.objectID;
+        client.trackEvent({
+            event_name: 'section_result_click',
+            clicked_item_id: id,
+            position,
+            section: sectionId,
+            metadata: { section_id: sectionId },
+        }, undefined);
+    }, [client, sectionId]);
+    const value = useMemo(() => ({
+        items,
+        loading,
+        error,
+        totalCount,
+        sectionId,
+        trackClick,
+    }), [items, loading, error, totalCount, sectionId, trackClick]);
+    return React.createElement(SectionSearchContext.Provider, { value: value }, children);
+}

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

@@ -0,0 +1,6 @@
+export { SectionSearchProvider, type RefinementInput, type SectionSearchProviderProps } from './SectionSearchProvider';
+export { SectionSearchContext, useSectionSearchContext, type SectionSearchContextValue } from './SectionSearchContext';
+export { SectionItemGrid, type SectionItemGridProps } from './SectionItemGrid';
+export { SectionLoading, type SectionLoadingProps } from './SectionLoading';
+export { SectionError, type SectionErrorProps } from './SectionError';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/section-primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,KAAK,eAAe,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACvH,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACvH,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1,5 @@
+export { SectionSearchProvider } from './SectionSearchProvider';
+export { SectionSearchContext, useSectionSearchContext } from './SectionSearchContext';
+export { SectionItemGrid } from './SectionItemGrid';
+export { SectionLoading } from './SectionLoading';
+export { SectionError } from './SectionError';

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

@@ -0,0 +1,13 @@
+/**
+ * CategoriesTabs – horizontal tabs (e.g. filtered tabs) (primitive)
+ *
+ * Active tab from context; on select updates context and tracks analytics.
+ */
+import React from 'react';
+export interface CategoriesTabsProps {
+    className?: string;
+    style?: React.CSSProperties;
+    tabClassName?: string;
+}
+export declare function CategoriesTabs({ className, style, tabClassName }: CategoriesTabsProps): React.JSX.Element | null;
+//# sourceMappingURL=CategoriesTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesTabs.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/CategoriesTabs.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,mBAAmB,4BA+CrF"}

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)' : 'var(--seekora-text-primary, #111827)',
+                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;AAI9D,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,MAAa,EACb,SAAS,EACT,KAAK,EACL,mBAA0B,EAC1B,aAAoB,GACrB,EAAE,kBAAkB,4BAqDpB"}

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

@@ -0,0 +1,54 @@
+/**
+ * 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';
+export function DropdownPanel({ children, position = 'absolute', top = '100%', left = 0, right, width = '100%', maxHeight = '80vh', zIndex = 1000, 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, 6px)',
+        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,39 @@
+/**
+ * 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';
+/** 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;
+}
+export declare function ItemCard({ item, position, onSelect, className, style, asLink, imageVariant, }: 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,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;CACpC;AAwBD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAa,EACb,YAAuB,GACxB,EAAE,aAAa,qBA6Cf"}

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

@@ -0,0 +1,52 @@
+/**
+ * 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';
+const cardStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: 8,
+    cursor: 'pointer',
+    border: 'none',
+    borderRadius: 'var(--seekora-border-radius, 6px)',
+    backgroundColor: 'transparent',
+    textAlign: 'left',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    transition: 'background-color 120ms ease',
+};
+const imgStyle = {
+    width: '100%',
+    aspectRatio: '1',
+    objectFit: 'cover',
+    borderRadius: 4,
+    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+};
+export function ItemCard({ item, position, onSelect, className, style, asLink = true, imageVariant = 'single', }) {
+    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 content = (React.createElement(React.Fragment, null,
+        images.length > 0 ? (React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: String(title), className: "seekora-item-card-image" })) : (React.createElement("div", { className: "seekora-item-card-placeholder", style: imgStyle, "aria-hidden": true })),
+        React.createElement("span", { className: "seekora-item-card-title", style: { fontSize: '0.875rem', fontWeight: 500 } }, String(title)),
+        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: '0.8125rem', color: 'var(--seekora-text-secondary, #6b7280)', lineHeight: 1.3 } }, String(description))) : null));
+    const commonProps = {
+        className: clsx('seekora-item-card', className),
+        style: { ...cardStyle, ...style },
+        'data-position': position,
+        onClick: onSelect,
+        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;AAExD,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;AA2BD,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,4BA2BlB"}

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

@@ -0,0 +1,42 @@
+/**
+ * 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';
+const defaultGridStyle = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(var(--seekora-grid-cols, 4), minmax(0, 1fr))',
+    gap: 12,
+    padding: 12,
+};
+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, }) {
+    const slice = items.slice(0, maxItems);
+    if (slice.length === 0)
+        return null;
+    const gridStyle = {
+        ...defaultGridStyle,
+        gridTemplateColumns: `repeat(${columns}, 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,21 @@
+/**
+ * ProductCard – one product tile (primitive)
+ *
+ * Minimal layout: image (via ImageDisplay when imageVariant set), title, price.
+ * onClick calls context selectProduct. Overridable via className/style.
+ */
+import React from 'react';
+import type { ProductItem } from '@seekora-ai/ui-sdk-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;
+}
+export declare function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant, }: 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,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,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;CACxC;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAuB,GACxB,EAAE,gBAAgB,qBAqClB"}

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

@@ -0,0 +1,46 @@
+/**
+ * ProductCard – one product tile (primitive)
+ *
+ * Minimal layout: image (via ImageDisplay when imageVariant set), title, price.
+ * onClick calls context selectProduct. Overridable via className/style.
+ */
+import React from 'react';
+import { clsx } from 'clsx';
+import { ImageDisplay } from '../primitives/ImageDisplay';
+const cardStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: 8,
+    cursor: 'pointer',
+    border: 'none',
+    borderRadius: 'var(--seekora-border-radius, 6px)',
+    backgroundColor: 'transparent',
+    textAlign: 'left',
+    transition: 'background-color 120ms ease',
+};
+const imgStyle = {
+    width: '100%',
+    aspectRatio: '1',
+    objectFit: 'cover',
+    borderRadius: 4,
+    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+};
+export function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant = 'single', }) {
+    const images = product.images?.length
+        ? product.images
+        : product.image ?? product.imageUrl
+            ? [String(product.image ?? product.imageUrl)]
+            : [];
+    const title = product.title ?? product.name ?? '';
+    const price = product.price != null ? (typeof product.price === 'number' ? product.price : Number(product.price)) : null;
+    return (React.createElement("button", { type: "button", className: clsx('seekora-suggestions-product-card', className), style: { ...cardStyle, ...style }, onMouseDown: (e) => {
+            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" })) : (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: 'var(--seekora-text-secondary, #6b7280)' } },
+            product.currency ?? '$',
+            price.toFixed(2))) : null));
+}

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

@@ -0,0 +1,17 @@
+/**
+ * ProductGrid – grid of product cards from context (primitive)
+ *
+ * Uses trendingProducts or active tab products; each click calls context selectProduct.
+ */
+import React from 'react';
+export interface ProductGridProps {
+    maxItems?: number;
+    /** 'trending' | tab id for filtered tab products */
+    source?: 'trending' | string;
+    columns?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    gridClassName?: string;
+}
+export declare function ProductGrid({ maxItems, source, columns, className, style, gridClassName, }: ProductGridProps): React.JSX.Element | null;
+//# sourceMappingURL=ProductGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGrid.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductGrid.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oDAAoD;IACpD,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC7B,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;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAY,EACZ,MAAmB,EACnB,OAAW,EACX,SAAS,EACT,KAAK,EACL,aAAa,GACd,EAAE,gBAAgB,4BAiDlB"}

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

@@ -0,0 +1,36 @@
+/**
+ * ProductGrid – grid of product cards from context (primitive)
+ *
+ * Uses trendingProducts or active tab products; each click calls context selectProduct.
+ */
+import React, { useMemo } from 'react';
+import { useSuggestionsContext } from './SuggestionsContext';
+import { ProductCard } from './ProductCard';
+import { clsx } from 'clsx';
+export function ProductGrid({ maxItems = 8, source = 'trending', columns = 4, className, style, gridClassName, }) {
+    const { trendingProducts, filteredTabs, activeTabId, selectProduct, getAllNavigableItems, } = useSuggestionsContext();
+    const products = useMemo(() => {
+        if (source === 'trending')
+            return trendingProducts;
+        const tab = filteredTabs.find((t) => t.id === (source === 'tab' ? activeTabId : source));
+        return tab?.products ?? [];
+    }, [source, activeTabId, trendingProducts, filteredTabs]);
+    const items = products.slice(0, maxItems);
+    const navigableItems = getAllNavigableItems();
+    const productStartIndex = navigableItems.findIndex((n) => n.type === 'product');
+    if (items.length === 0)
+        return null;
+    const gridStyle = {
+        display: 'grid',
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gap: 12,
+        padding: 12,
+    };
+    return (React.createElement("div", { className: clsx('seekora-suggestions-product-grid', className), style: style },
+        React.createElement("div", { className: clsx('seekora-suggestions-product-grid-inner', gridClassName), style: gridStyle }, items.map((product, i) => {
+            const globalIndex = productStartIndex >= 0 ? productStartIndex + i : i;
+            const section = source === 'trending' ? 'products' : 'filtered_tab';
+            const tabId = source !== 'trending' ? (source === 'tab' ? activeTabId : source) : undefined;
+            return (React.createElement(ProductCard, { key: product.id ?? product.objectID ?? i, product: product, position: globalIndex, section: section, tabId: tabId, onSelect: () => selectProduct(product, globalIndex, section, tabId) }));
+        }))));
+}

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

@@ -0,0 +1,17 @@
+/**
+ * RecentSearchesList – list of recent queries (primitive)
+ *
+ * Reads recentSearches from context; each click calls selectRecentSearch. Optional title/render.
+ */
+import React from 'react';
+import type { RecentSearch } from '@seekora-ai/ui-sdk-types';
+export interface RecentSearchesListProps {
+    title?: string;
+    maxItems?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    listClassName?: string;
+    renderItem?: (search: RecentSearch, index: number, onSelect: () => void) => React.ReactNode;
+}
+export declare function RecentSearchesList({ title, maxItems, className, style, listClassName, renderItem, }: RecentSearchesListProps): React.JSX.Element | null;
+//# sourceMappingURL=RecentSearchesList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecentSearchesList.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/RecentSearchesList.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7F;AAeD,wBAAgB,kBAAkB,CAAC,EACjC,KAAgB,EAChB,QAAY,EACZ,SAAS,EACT,KAAK,EACL,aAAa,EACb,UAAU,GACX,EAAE,uBAAuB,4BAyCzB"}

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

@@ -0,0 +1,39 @@
+/**
+ * RecentSearchesList – list of recent queries (primitive)
+ *
+ * Reads recentSearches from context; each click calls selectRecentSearch. Optional title/render.
+ */
+import React from 'react';
+import { useSuggestionsContext } from './SuggestionsContext';
+import { clsx } from 'clsx';
+const itemStyle = {
+    padding: '10px 12px',
+    cursor: 'pointer',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    backgroundColor: 'transparent',
+    color: 'var(--seekora-text-primary, #111827)',
+    transition: 'background-color 120ms ease',
+};
+export function RecentSearchesList({ title = 'Recent', maxItems = 8, className, style, listClassName, renderItem, }) {
+    const { recentSearches, query, selectRecentSearch } = useSuggestionsContext();
+    const items = recentSearches.slice(0, maxItems);
+    if (items.length === 0)
+        return null;
+    return (React.createElement("div", { className: clsx('seekora-suggestions-recent-list', className), style: style },
+        title ? (React.createElement("div", { className: "seekora-suggestions-recent-title", style: { padding: '8px 12px', fontSize: '0.75rem', fontWeight: 600, color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase' } }, title)) : null,
+        React.createElement("ul", { className: clsx('seekora-suggestions-recent-ul', listClassName), style: { margin: 0, padding: 0, listStyle: 'none' } }, items.map((search, i) => {
+            const onSelect = () => selectRecentSearch(search);
+            if (renderItem) {
+                return React.createElement("li", { key: `${search.query}-${search.timestamp}` }, renderItem(search, i, onSelect));
+            }
+            return (React.createElement("li", { key: `${search.query}-${search.timestamp}` },
+                React.createElement("button", { type: "button", className: "seekora-suggestions-recent-item", style: itemStyle, onMouseDown: (e) => {
+                        e.preventDefault();
+                        onSelect();
+                    } }, search.query)));
+        }))));
+}