@seekora-ai/ui-sdk-react 1.0.0

package/dist/components/SortBy.d.ts

@@ -0,0 +1,44 @@
+/**
+ * SortBy Component
+ *
+ * Displays sort options for search results
+ * Integrates with SearchStateManager for automatic state sync
+ */
+import React from 'react';
+export interface SortOption {
+    value: string;
+    label: string;
+}
+export interface SortByTheme {
+    container?: string;
+    select?: string;
+    option?: string;
+}
+export interface SortByProps {
+    /** Available sort options */
+    options: SortOption[];
+    /** Current sort value (controlled mode - overrides StateManager) */
+    value?: string;
+    /** Default sort value */
+    defaultValue?: string;
+    /** Callback when sort changes */
+    onSortChange?: (value: string) => void;
+    /** Custom render function for select */
+    renderSelect?: (props: {
+        value: string;
+        onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+        options: SortOption[];
+    }) => React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: SortByTheme;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether to sync with SearchStateManager (default: true) */
+    syncWithState?: boolean;
+}
+export declare const SortBy: React.FC<SortByProps>;
+//# sourceMappingURL=SortBy.d.ts.map

package/dist/components/SortBy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortBy.d.ts","sourceRoot":"","sources":["../../src/components/SortBy.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAoB,MAAM,OAAO,CAAC;AAKzC,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,6BAA6B;IAC7B,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;QAC5D,OAAO,EAAE,UAAU,EAAE,CAAC;KACvB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8FxC,CAAC"}

package/dist/components/SortBy.js

@@ -0,0 +1,61 @@
+/**
+ * SortBy Component
+ *
+ * Displays sort options for search results
+ * Integrates with SearchStateManager for automatic state sync
+ */
+import React, { useEffect } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+export const SortBy = ({ options, value: valueProp, defaultValue, onSortChange, renderSelect, className, style, theme: customTheme, placeholder = 'Sort by...', syncWithState = true, }) => {
+    const { theme } = useSearchContext();
+    const { sortBy: stateManagerSortBy, setSortBy } = useSearchState();
+    const sortByTheme = customTheme || {};
+    // Initialize with defaultValue or first option
+    const [internalValue, setInternalValue] = React.useState(defaultValue || options[0]?.value || '');
+    // Sync with StateManager on mount if defaultValue is set
+    useEffect(() => {
+        if (syncWithState && defaultValue && !stateManagerSortBy) {
+            setSortBy(defaultValue, false); // Don't trigger search on initial sync
+        }
+    }, []);
+    // Determine the current value: controlled prop > StateManager > internal
+    const value = valueProp !== undefined
+        ? valueProp
+        : (syncWithState && stateManagerSortBy)
+            ? stateManagerSortBy
+            : internalValue;
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setInternalValue(newValue);
+        // Update StateManager (automatically triggers search)
+        if (syncWithState) {
+            setSortBy(newValue);
+        }
+        // Call callback for backwards compatibility
+        if (onSortChange) {
+            onSortChange(newValue);
+        }
+    };
+    const defaultRenderSelect = () => (React.createElement("select", { value: value, onChange: handleChange, className: clsx(sortByTheme.select, className), style: {
+            padding: theme.spacing.small,
+            paddingRight: theme.spacing.medium,
+            fontSize: theme.typography.fontSize.medium,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+            backgroundColor: theme.colors.background,
+            color: theme.colors.text,
+            cursor: 'pointer',
+            outline: 'none',
+            ...style,
+        }, "aria-label": "Sort results" }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value, className: sortByTheme.option }, option.label)))));
+    if (renderSelect) {
+        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: style }, renderSelect({
+            value,
+            onChange: handleChange,
+            options,
+        })));
+    }
+    return defaultRenderSelect();
+};

package/dist/components/Stats.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Stats Component
+ *
+ * Displays search statistics (total results, processing time, etc.)
+ */
+import React from 'react';
+import type { SearchResponse } from '@seekora-ai/search-sdk';
+export interface StatsTheme {
+    container?: string;
+    text?: string;
+    highlight?: string;
+    separator?: string;
+}
+export interface StatsProps {
+    /** Search results response */
+    results?: SearchResponse | null;
+    /** Custom render function */
+    renderStats?: (stats: {
+        totalResults: number;
+        processingTime?: number;
+        query?: string;
+    }) => React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: StatsTheme;
+    /** Show processing time */
+    showProcessingTime?: boolean;
+    /** Show query */
+    showQuery?: boolean;
+    /** Custom separator between stats */
+    separator?: string;
+}
+export declare const Stats: React.FC<StatsProps>;
+//# sourceMappingURL=Stats.d.ts.map

package/dist/components/Stats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../src/components/Stats.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2EtC,CAAC"}

package/dist/components/Stats.js

@@ -0,0 +1,52 @@
+/**
+ * Stats Component
+ *
+ * Displays search statistics (total results, processing time, etc.)
+ */
+import React from 'react';
+import { useSearchContext } from './SearchProvider';
+import { clsx } from 'clsx';
+export const Stats = ({ results, renderStats, className, style, theme: customTheme, showProcessingTime = false, showQuery = false, separator = ' • ', }) => {
+    const { theme } = useSearchContext();
+    const statsTheme = customTheme || {};
+    // Extract stats from results
+    const res = results;
+    const totalResults = res?.totalResults
+        || res?.data?.total_results
+        || res?.data?.data?.total_results
+        || 0;
+    const processingTime = res?.processingTimeMS
+        || res?.data?.processingTimeMS
+        || res?.data?.data?.processingTimeMS;
+    const query = (res?.query ?? '');
+    const defaultRenderStats = () => {
+        const parts = [];
+        if (totalResults > 0) {
+            parts.push(`${totalResults.toLocaleString()} result${totalResults !== 1 ? 's' : ''}`);
+        }
+        else {
+            parts.push('No results');
+        }
+        if (showProcessingTime && processingTime !== undefined) {
+            parts.push(`${processingTime}ms`);
+        }
+        if (showQuery && query) {
+            parts.push(`for "${query}"`);
+        }
+        return (React.createElement("div", { className: clsx(statsTheme.container, className), style: {
+                fontSize: theme.typography.fontSize.medium,
+                color: theme.colors.text,
+                ...style,
+            } }, parts.map((part, index) => (React.createElement("span", { key: index },
+            index > 0 && React.createElement("span", { className: statsTheme.separator, style: { margin: `0 ${theme.spacing.small}` } }, separator),
+            React.createElement("span", { className: statsTheme.text }, part))))));
+    };
+    if (renderStats) {
+        return (React.createElement("div", { className: clsx(statsTheme.container, className), style: style }, renderStats({
+            totalResults,
+            processingTime,
+            query,
+        })));
+    }
+    return defaultRenderStats();
+};

package/dist/components/suggestions/AmazonDropdown.d.ts

@@ -0,0 +1,30 @@
+/**
+ * AmazonDropdown - Amazon-style Search Suggestions
+ *
+ * Features:
+ * - Department/category scoping in search
+ * - Suggestions with category context
+ * - Product grid with images
+ * - "in Department" suffix for scoped searches
+ * - Clean, functional design
+ */
+import React from 'react';
+import type { BaseDropdownProps, DropdownRef } from './types';
+export interface AmazonDropdownProps extends BaseDropdownProps {
+    /** Show department scoping in suggestions */
+    showDepartments?: boolean;
+    /** Current department filter */
+    currentDepartment?: string;
+    /** Available departments */
+    departments?: Array<{
+        id: string;
+        label: string;
+    }>;
+    /** Show Prime badge */
+    showPrime?: boolean;
+    /** Prime icon URL */
+    primeIconUrl?: string;
+}
+export declare const AmazonDropdown: React.ForwardRefExoticComponent<AmazonDropdownProps & React.RefAttributes<DropdownRef>>;
+export default AmazonDropdown;
+//# sourceMappingURL=AmazonDropdown.d.ts.map

package/dist/components/suggestions/AmazonDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmazonDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/AmazonDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiV9D,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,yFAmd1B,CAAC;AAEF,eAAe,cAAc,CAAC"}