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

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

@@ -0,0 +1,44 @@
+/**
+ * ProductCardLayouts – internal layout sub-components for ProductCard
+ *
+ * Not exported from the package. Each layout renders the same product data
+ * with different visual emphasis.
+ */
+import React from 'react';
+import type { ActionButton } from '../primitives/ActionButtons';
+import type { ProductItem, ProductBadge, PriceRange, ProductOption, ProductVariant } from '@seekora-ai/ui-sdk-types';
+import type { ProductDisplayConfig } from '../suggestions/types';
+export interface LayoutProps {
+    product: ProductItem;
+    images: string[];
+    title: string;
+    price: number | null;
+    comparePrice: number | null;
+    brand: string | null;
+    badges: ProductBadge[];
+    priceRange: PriceRange | null;
+    options: ProductOption[];
+    variants: ProductVariant[];
+    displayConfig: ProductDisplayConfig;
+    imageVariant: 'single' | 'carousel' | 'hover' | 'thumbStrip' | 'thumbList';
+    onVariantHover?: (optionName: string, value: string) => void;
+    onVariantClick?: (optionName: string, value: string) => void;
+    selectedVariants?: Record<string, string>;
+    actionButtons?: ActionButton[];
+    actionButtonsPosition?: 'overlay-top-right' | 'overlay-bottom' | 'inline';
+    showActionLabels?: boolean;
+    enableImageZoom?: boolean;
+    imageZoomMode?: 'hover' | 'lens' | 'click' | 'both';
+    imageZoomLevel?: number;
+}
+/** minimal: image, title, price (current default behavior) */
+export declare function MinimalLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }: LayoutProps): React.JSX.Element;
+/** standard: image, badges, brand, title, price + compare price, color swatches */
+export declare function StandardLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }: LayoutProps): React.JSX.Element;
+/** detailed: image, badges, brand, title, price + compare + discount, rating, all swatches, stock */
+export declare function DetailedLayout({ images, title, price, comparePrice, brand, badges, priceRange, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }: LayoutProps): React.JSX.Element;
+/** compact: smaller image, 1-line title, price */
+export declare function CompactLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }: LayoutProps): React.JSX.Element;
+/** horizontal: image left + content right (title, brand, price, swatches) */
+export declare function HorizontalLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }: LayoutProps): React.JSX.Element;
+//# sourceMappingURL=ProductCardLayouts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCardLayouts.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductCardLayouts.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,137 @@
+/**
+ * ProductCardLayouts – internal layout sub-components for ProductCard
+ *
+ * Not exported from the package. Each layout renders the same product data
+ * with different visual emphasis.
+ */
+import React from 'react';
+import { ImageDisplay } from '../primitives/ImageDisplay';
+import { PriceDisplay } from '../primitives/PriceDisplay';
+import { BadgeList } from '../primitives/BadgeList';
+import { RatingDisplay } from '../primitives/RatingDisplay';
+import { VariantSwatches } from '../primitives/VariantSwatches';
+import { ActionButtons } from '../primitives/ActionButtons';
+import { useIsMobile, useResponsiveGap } from '../../utils/responsive';
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
+const imgPlaceholderStyle = {
+    width: '100%',
+    aspectRatio: '1',
+    objectFit: 'cover',
+    borderRadius: BORDER_RADIUS.sm,
+    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
+};
+function ImageBlock({ images, title, imageVariant, aspectRatio, objectFit, enableZoom, zoomMode, zoomLevel }) {
+    const ar = aspectRatio
+        ? (aspectRatio.includes(':') ? aspectRatio.replace(':', '/') : aspectRatio)
+        : '1';
+    if (images.length > 0) {
+        return (React.createElement("div", { className: "seekora-product-card__image", style: { position: 'relative', overflow: 'hidden', borderRadius: BORDER_RADIUS.sm } },
+            React.createElement(ImageDisplay, { images: images, variant: images.length > 1 ? imageVariant : 'single', alt: title, className: "seekora-suggestions-product-card-image", style: { aspectRatio: ar, ...(objectFit ? { objectFit } : {}) }, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
+    }
+    return React.createElement("div", { className: "seekora-product-card__image seekora-suggestions-product-card-placeholder", style: { ...imgPlaceholderStyle, aspectRatio: ar, ...(objectFit ? { objectFit } : {}) }, "aria-hidden": true });
+}
+/** minimal: image, title, price (current default behavior) */
+export function MinimalLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }) {
+    const isMobile = useIsMobile();
+    const titleFontSize = isMobile ? '0.9375rem' : '0.875rem'; // Slightly larger on mobile
+    const priceFontSize = isMobile ? '0.9375rem' : '0.875rem';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio, objectFit: displayConfig.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+        React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' } }, title),
+        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price", style: { fontSize: priceFontSize, color: 'inherit', opacity: 0.6 } },
+            product.currency ?? '$',
+            price.toFixed(2)))));
+}
+/** standard: image, badges, brand, title, price + compare price, color swatches */
+export function StandardLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
+    const cfg = displayConfig;
+    const isMobile = useIsMobile();
+    const bodyGap = isMobile ? 6 : 4; // More gap on mobile
+    const titleFontSize = isMobile ? '0.9375rem' : '0.875rem';
+    const brandFontSize = isMobile ? '0.8125rem' : '0.75rem';
+    const priceFontSize = isMobile ? '0.9375rem' : '0.875rem';
+    // Normalize position: 'overlay-*' positions render over image, everything else renders inline
+    const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { position: 'relative' } },
+            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, objectFit: cfg.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+            cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 2 })),
+            actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
+        React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: bodyGap } },
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: brandFontSize, color: 'inherit', opacity: 0.6, textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' } }, title),
+            React.createElement("div", { className: "seekora-product-card__price" },
+                React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: priceFontSize } })),
+            cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
+            actionButtons && actionButtons.length > 0 && !isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
+}
+/** detailed: image, badges, brand, title, price + compare + discount, rating, all swatches, stock */
+export function DetailedLayout({ images, title, price, comparePrice, brand, badges, priceRange, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
+    const cfg = displayConfig;
+    const available = product.available;
+    // Normalize position: 'overlay-*' positions render over image, everything else renders inline
+    const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { position: 'relative' } },
+            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, objectFit: cfg.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+            cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left" })),
+            actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
+        React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4 } },
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'inherit', opacity: 0.6, textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, title),
+            cfg.showRating !== false && product.rating != null && (React.createElement(RatingDisplay, { rating: product.rating, reviewCount: product.reviewCount, variant: "compact", size: "small", showNumeric: false, showReviewCount: true, className: "seekora-product-card__rating" })),
+            React.createElement("div", { className: "seekora-product-card__price" }, cfg.showPriceRange && priceRange ? (React.createElement(PriceDisplay, { priceRange: priceRange, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, style: { fontSize: '0.875rem' } })) : (React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: '0.875rem' } }))),
+            cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
+            cfg.showStock !== false && available != null && (React.createElement("span", { className: "seekora-product-card__stock", style: {
+                    fontSize: '0.75rem',
+                    color: available ? 'var(--seekora-success, #22c55e)' : 'var(--seekora-error, #ef4444)',
+                } }, available ? 'In Stock' : 'Out of Stock')),
+            actionButtons && actionButtons.length > 0 && !isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
+}
+/** compact: smaller image, 1-line title, price */
+export function CompactLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio ?? '1:1', enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+        React.createElement("span", { className: "seekora-product-card__title", style: {
+                fontSize: '0.8125rem',
+                fontWeight: 500,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            } }, title),
+        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price", style: { fontSize: '0.8125rem', color: 'inherit', opacity: 0.6 } },
+            product.currency ?? '$',
+            price.toFixed(2)))));
+}
+/** horizontal: image left + content right (title, brand, price, swatches) */
+export function HorizontalLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
+    const cfg = displayConfig;
+    const isMobile = useIsMobile();
+    const containerGap = useResponsiveGap(12);
+    const bodyGap = isMobile ? 6 : 4;
+    // Responsive image dimensions
+    const imageMinWidth = isMobile ? 60 : 80;
+    const imageMaxWidth = isMobile ? 100 : 120;
+    const imageFlex = isMobile ? '20%' : '25%';
+    // Responsive font sizes
+    const brandFontSize = isMobile ? '0.6875rem' : '0.75rem';
+    const titleFontSize = isMobile ? '0.875rem' : '0.875rem';
+    const priceFontSize = isMobile ? '0.875rem' : '0.875rem';
+    return (React.createElement("div", { style: { display: 'flex', gap: containerGap, alignItems: 'flex-start' } },
+        React.createElement("div", { style: { position: 'relative', minWidth: imageMinWidth, flexBasis: imageFlex, maxWidth: imageMaxWidth, flexShrink: 0 } },
+            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: "1:1", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+            cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 1 })),
+            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-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: bodyGap, flex: 1, minWidth: 0 } },
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: brandFontSize, color: 'inherit', opacity: 0.6, textTransform: 'uppercase' } }, brand)),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: isMobile ? 3 : 2, WebkitBoxOrient: 'vertical' } }, title),
+            React.createElement("div", { className: "seekora-product-card__price" },
+                React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: priceFontSize } })),
+            cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues ?? 3, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
+            actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
+}

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

@@ -0,0 +1,22 @@
+/**
+ * ProductGrid – grid of product cards from context (primitive)
+ *
+ * Uses trendingProducts or active tab products; each click calls context selectProduct.
+ */
+import React from 'react';
+import type { ProductDisplayConfig } from '../suggestions/types';
+export interface ProductGridProps {
+    maxItems?: number;
+    /** 'trending' | tab id for filtered tab products */
+    source?: 'trending' | string;
+    columns?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    gridClassName?: string;
+    /** Product display configuration passed through to each ProductCard */
+    displayConfig?: ProductDisplayConfig;
+    /** Callback when a variant swatch is hovered on a card */
+    onVariantHover?: (optionName: string, value: string) => void;
+}
+export declare function ProductGrid({ maxItems, source, columns, className, style, gridClassName, displayConfig, onVariantHover, }: 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;AAKvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGjE,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;IACvB,uEAAuE;IACvE,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,0DAA0D;IAC1D,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9D;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAY,EACZ,MAAmB,EACnB,OAAW,EACX,SAAS,EACT,KAAK,EACL,aAAa,EACb,aAAa,EACb,cAAc,GACf,EAAE,gBAAgB,4BAwDlB"}

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

@@ -0,0 +1,41 @@
+/**
+ * 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';
+import { useResponsiveColumns, useResponsiveGap, useResponsivePadding } from '../../utils/responsive';
+export function ProductGrid({ maxItems = 8, source = 'trending', columns = 4, className, style, gridClassName, displayConfig, onVariantHover, }) {
+    const { trendingProducts, filteredTabs, activeTabId, selectProduct, getAllNavigableItems, } = useSuggestionsContext();
+    // Responsive columns and spacing
+    const responsiveColumns = useResponsiveColumns(columns);
+    const responsiveGap = useResponsiveGap(12);
+    const responsivePadding = useResponsivePadding(12);
+    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(${responsiveColumns}, minmax(0, 1fr))`,
+        gap: responsiveGap,
+        padding: responsivePadding,
+    };
+    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), displayConfig: displayConfig, onVariantHover: onVariantHover }));
+        }))));
+}

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;AAwCD,wBAAgB,kBAAkB,CAAC,EACjC,KAAgB,EAChB,QAAY,EACZ,SAAS,EACT,KAAK,EACL,aAAa,EACb,UAAU,GACX,EAAE,uBAAuB,4BAiCzB"}

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

@@ -0,0 +1,46 @@
+/**
+ * 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: 'inherit',
+    transition: 'background-color 120ms ease',
+};
+function RecentSearchItem({ search, onSelect }) {
+    const [isHovered, setIsHovered] = React.useState(false);
+    return (React.createElement("li", null,
+        React.createElement("button", { type: "button", className: clsx('seekora-suggestions-recent-item', isHovered && 'seekora-suggestions-recent-item--hover'), style: {
+                ...itemStyle,
+                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
+                e.preventDefault();
+                onSelect();
+            } }, search.query)));
+}
+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: 'inherit', opacity: 0.6, 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(RecentSearchItem, { key: `${search.query}-${search.timestamp}`, search: search, onSelect: onSelect }));
+        }))));
+}

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

@@ -0,0 +1,23 @@
+/**
+ * SearchInput – suggestion-scoped search input (primitive)
+ *
+ * Single input bound to suggestions context: query, setQuery, focus opens dropdown,
+ * keydown ArrowUp/Down/Enter/Escape delegates to context. Overridable via className/style.
+ */
+import React from 'react';
+export interface SearchInputProps {
+    placeholder?: string;
+    autoFocus?: boolean;
+    showClearButton?: boolean;
+    /** When false, blur does not close the dropdown (e.g. for overlay mode). Default true. */
+    closeOnBlur?: boolean;
+    /** Optional icon (e.g. magnifying glass) rendered to the left of the input */
+    leftIcon?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    inputClassName?: string;
+    inputStyle?: React.CSSProperties;
+    ariaLabel?: string;
+}
+export declare function SearchInput({ placeholder, autoFocus, showClearButton, closeOnBlur, leftIcon, className, style, inputClassName, inputStyle, ariaLabel, }: SearchInputProps): React.JSX.Element;
+//# sourceMappingURL=SearchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SearchInput.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAyBnD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0FAA0F;IAC1F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,wBAAgB,WAAW,CAAC,EAC1B,WAAkC,EAClC,SAAiB,EACjB,eAAsB,EACtB,WAAkB,EAClB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,cAAc,EACd,UAAU,EACV,SAAoB,GACrB,EAAE,gBAAgB,qBA+GlB"}

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

@@ -0,0 +1,114 @@
+/**
+ * SearchInput – suggestion-scoped search input (primitive)
+ *
+ * Single input bound to suggestions context: query, setQuery, focus opens dropdown,
+ * keydown ArrowUp/Down/Enter/Escape delegates to context. Overridable via className/style.
+ */
+import React, { useRef, useCallback } from 'react';
+import { useSuggestionsContext } from './SuggestionsContext';
+import { clsx } from 'clsx';
+const SPACING = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+};
+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 defaultStyles = {
+    position: 'relative',
+    width: '100%',
+};
+const inputWrapperStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: `${SPACING.sm}px`,
+    padding: `${SPACING.sm}px ${SPACING.md}px`,
+    border: '1px solid var(--seekora-border-color, rgba(0,0,0,0.1))',
+    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
+    backgroundColor: 'var(--seekora-bg-surface, transparent)',
+    transition: `border-color ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
+    boxSizing: 'border-box',
+};
+const inputStyles = {
+    flex: 1,
+    minWidth: 0,
+    padding: `${SPACING.sm}px 0`,
+    border: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    fontSize: 'inherit',
+    color: 'var(--seekora-text-primary, inherit)',
+    fontFamily: 'inherit',
+};
+export function SearchInput({ placeholder = 'Powered by Seekora', autoFocus = false, showClearButton = true, closeOnBlur = true, leftIcon, className, style, inputClassName, inputStyle, ariaLabel = 'Search', }) {
+    const { query, setQuery, isOpen, setIsOpen, navigateNext, navigatePrev, selectActive, close, } = useSuggestionsContext();
+    const inputRef = useRef(null);
+    const handleFocus = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const handleBlur = useCallback(() => {
+        if (!closeOnBlur)
+            return;
+        setTimeout(() => close(), 200);
+    }, [close, closeOnBlur]);
+    const handleChange = useCallback((e) => {
+        setQuery(e.target.value);
+    }, [setQuery]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            navigateNext();
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            navigatePrev();
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            selectActive();
+            return;
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            close();
+            inputRef.current?.blur();
+            return;
+        }
+    }, [navigateNext, navigatePrev, selectActive, close]);
+    const handleClear = useCallback(() => {
+        setQuery('');
+        inputRef.current?.focus();
+    }, [setQuery]);
+    return (React.createElement("div", { className: clsx('seekora-suggestions-search-input-wrapper', className), style: { ...defaultStyles, ...style } },
+        React.createElement("div", { className: "seekora-suggestions-input-wrapper", style: inputWrapperStyles },
+            leftIcon ? (React.createElement("span", { className: "seekora-suggestions-input-left-icon", style: { display: 'flex', flexShrink: 0, color: 'inherit', opacity: 0.5 } }, leftIcon)) : null,
+            React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-autocomplete": "list", role: "combobox", className: clsx('seekora-suggestions-input', inputClassName), style: { ...inputStyles, ...inputStyle } }),
+            showClearButton && query ? (React.createElement("button", { type: "button", onClick: handleClear, className: "seekora-suggestions-input-clear", "aria-label": "Clear search", style: {
+                    padding: 8,
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    color: 'inherit', opacity: 0.5,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                } },
+                React.createElement(ClearIcon, null))) : null)));
+}
+function ClearIcon() {
+    return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": true },
+        React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })));
+}

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

@@ -0,0 +1,31 @@
+/**
+ * SuggestionItem – single text suggestion row (primitive)
+ *
+ * Highlights when isActive; onClick calls context selectSuggestion.
+ * When enableHighlightMarkup is true (default), parses <mark>...</mark> in
+ * suggestion text and renders as highlighted <mark> elements. Overridable via
+ * renderHighlight, className/style.
+ */
+import React from 'react';
+import type { SuggestionItem as SuggestionItemType } from '@seekora-ai/ui-sdk-types';
+import type { HighlightMarkupOptions } from './highlightMarkup';
+export interface SuggestionItemProps {
+    suggestion: SuggestionItemType;
+    index: number;
+    isActive: boolean;
+    onSelect: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * When true (default), text containing <mark>...</mark> is rendered with
+     * those segments as highlighted <mark> elements. When false, plain query
+     * text is shown with no markup parsing.
+     */
+    enableHighlightMarkup?: boolean;
+    /** Options for the default highlight <mark> styling when enableHighlightMarkup is true. */
+    highlightMarkupOptions?: HighlightMarkupOptions;
+    /** Custom renderer for suggestion text; overrides default highlight parsing when provided. */
+    renderHighlight?: (text: string) => React.ReactNode;
+}
+export declare function SuggestionItem({ suggestion, index, isActive, onSelect, className, style, enableHighlightMarkup, highlightMarkupOptions, renderHighlight, }: SuggestionItemProps): React.JSX.Element;
+//# sourceMappingURL=SuggestionItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionItem.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAErF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2FAA2F;IAC3F,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD,8FAA8F;IAC9F,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD;AAmBD,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,qBAA4B,EAC5B,sBAAsB,EACtB,eAAe,GAChB,EAAE,mBAAmB,qBA8CrB"}

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

@@ -0,0 +1,47 @@
+/**
+ * SuggestionItem – single text suggestion row (primitive)
+ *
+ * Highlights when isActive; onClick calls context selectSuggestion.
+ * When enableHighlightMarkup is true (default), parses <mark>...</mark> in
+ * suggestion text and renders as highlighted <mark> elements. Overridable via
+ * renderHighlight, className/style.
+ */
+import React from 'react';
+import { clsx } from 'clsx';
+import { parseHighlightMarkup } from './highlightMarkup';
+const defaultItemStyle = {
+    padding: '10px 12px',
+    cursor: 'pointer',
+    listStyle: 'none',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    backgroundColor: 'transparent',
+    color: 'inherit',
+    transition: 'background-color 120ms ease',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+export function SuggestionItem({ suggestion, index, isActive, onSelect, className, style, enableHighlightMarkup = true, highlightMarkupOptions, renderHighlight, }) {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const displayText = suggestion.highlightedQuery ?? suggestion.query;
+    const content = renderHighlight != null
+        ? renderHighlight(displayText)
+        : enableHighlightMarkup
+            ? parseHighlightMarkup(displayText ?? '', highlightMarkupOptions)
+            : (suggestion.query ?? displayText ?? '');
+    const showHighlight = isActive || isHovered;
+    return (React.createElement("li", { role: "option", "aria-selected": isActive, id: `seekora-suggestion-${index}`, className: clsx('seekora-suggestions-item', isActive && 'seekora-suggestions-item--active', isHovered && 'seekora-suggestions-item--hover', className), style: {
+            ...defaultItemStyle,
+            ...(showHighlight ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
+            ...style,
+        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
+            e.preventDefault();
+            onSelect();
+        } },
+        content,
+        suggestion.count != null ? (React.createElement("span", { className: "seekora-suggestions-item-count", style: { marginLeft: 8, color: 'inherit', opacity: 0.6, fontSize: '0.875em' } }, suggestion.count)) : null));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * SuggestionList – container for text suggestions (primitive)
+ *
+ * Renders list of SuggestionItem from context; uses activeIndex for highlight.
+ * Optional renderItem. When not using renderItem, enableHighlightMarkup and
+ * highlightMarkupOptions control parsing of <mark>...</mark> in suggestion text.
+ */
+import React from 'react';
+import type { HighlightMarkupOptions } from './highlightMarkup';
+export interface SuggestionListProps {
+    maxItems?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    listClassName?: string;
+    /**
+     * When true (default), suggestion text with <mark>...</mark> is rendered
+     * with those segments highlighted. When false, plain text is shown.
+     * Only applies when not using custom renderItem.
+     */
+    enableHighlightMarkup?: boolean;
+    /** Options for default highlight <mark> styling. Only applies when not using custom renderItem. */
+    highlightMarkupOptions?: HighlightMarkupOptions;
+    renderItem?: (suggestion: import('@seekora-ai/ui-sdk-types').SuggestionItem, index: number, isActive: boolean, onSelect: () => void) => React.ReactNode;
+}
+export declare function SuggestionList({ maxItems, className, style, listClassName, enableHighlightMarkup, highlightMarkupOptions, renderItem, }: SuggestionListProps): React.JSX.Element | null;
+//# sourceMappingURL=SuggestionList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionList.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionList.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,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;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mGAAmG;IACnG,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD,UAAU,CAAC,EAAE,CACX,UAAU,EAAE,OAAO,0BAA0B,EAAE,cAAc,EAC7D,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,MAAM,IAAI,KACjB,KAAK,CAAC,SAAS,CAAC;CACtB;AAOD,wBAAgB,cAAc,CAAC,EAC7B,QAAa,EACb,SAAS,EACT,KAAK,EACL,aAAa,EACb,qBAA4B,EAC5B,sBAAsB,EACtB,UAAU,GACX,EAAE,mBAAmB,4BA+CrB"}