@envive-ai/react-toolkit 0.1.0

package/dist/packages/components/src/components/search/FilterScrollbar/AppliedFiltersScrollbar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { Text } from '../../../../../../src/components/common/Text/Text';
+export const AppliedFiltersScrollbar = ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter, }) => {
+    if (selectedFilterOptions.length === 0) {
+        return null;
+    }
+    // Extract border and text classes from filterDefaultClasses, excluding background because everything is shared between filters except for the applied filters background
+    const filterDefaultWithoutBg = filterDefaultClasses
+        .replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, '')
+        .trim();
+    const buttonClasses = classNames(' spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap', filterHoverClasses, filterDefaultWithoutBg, appliedFilterBackgroundClasses);
+    const iconColor = 'currentColor'; // match with text color
+    return (_jsx(ScrollContainer, { className: filterBarClassNames, hideScrollbars: true, children: selectedFilterOptions.map((filter) => {
+            return (_jsx("button", { className: buttonClasses, type: "button", onClick: () => onRemoveFilter(filter), "aria-label": `Remove filter: ${filter.displayName}`, children: _jsxs("div", { className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]", children: [_jsx(Text, { variant: "body3", children: filter.displayName }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: _jsx("path", { d: "M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z", fill: iconColor }) })] }) }, filter.id));
+        }) }));
+};

package/dist/packages/components/src/components/search/FilterScrollbar/DynamicFiltersScrollbar.d.ts

@@ -0,0 +1,15 @@
+interface DynamicFiltersScrollbarProps {
+    availableDynamicFilters: {
+        name: string;
+        displayName: string;
+    }[];
+    filterBarClassNames: string;
+    filterDefaultClasses: string;
+    filterHoverClasses: string;
+    onToggleDynamicFilter: ({ filter, dynamicFilterDisplayName, }: {
+        filter: string;
+        dynamicFilterDisplayName: string;
+    }) => void;
+}
+export declare const DynamicFiltersScrollbar: ({ availableDynamicFilters, filterBarClassNames, filterDefaultClasses, filterHoverClasses, onToggleDynamicFilter, }: DynamicFiltersScrollbarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/components/src/components/search/FilterScrollbar/DynamicFiltersScrollbar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { Text } from '../../../../../../src/components/common/Text/Text';
+export const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames, filterDefaultClasses, filterHoverClasses, onToggleDynamicFilter, }) => {
+    return (_jsx(ScrollContainer, { className: filterBarClassNames, hideScrollbars: true, children: availableDynamicFilters.map(({ name, displayName }) => {
+            const buttonClasses = classNames('spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ', filterHoverClasses, filterDefaultClasses);
+            return (_jsx("button", { type: "button", className: buttonClasses, onClick: () => {
+                    onToggleDynamicFilter({
+                        filter: name,
+                        dynamicFilterDisplayName: displayName,
+                    });
+                }, children: _jsx(Text, { variant: "body3", children: displayName }) }, name));
+        }) }));
+};

package/dist/packages/components/src/components/search/SearchFilter/SearchFilter.d.ts

@@ -0,0 +1,2 @@
+import type { SearchFilterProps } from './types';
+export declare const SearchFilter: ({ isOpen, setIsOpen, filters, selectFilterItem, clearAllFilters, filterButtonText, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, headerContent, }: SearchFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/search/SearchFilter/SearchFilter.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { SearchFilterItem } from './SearchFilterItem';
+import { Text } from '../../../../../../src/components/common/Text/Text';
+import { ButtonBase } from '../../../../../../src/components/common/ButtonBase/ButtonBase';
+export const SearchFilter = ({ isOpen, setIsOpen, filters, 
+// productCount,
+selectFilterItem, clearAllFilters, 
+// applyFiltersUnchangedClasses,
+// applyFiltersChangedClasses,
+filterButtonText, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, 
+// filterCloseIconVariant,
+headerContent, }) => {
+    const modalClasses = classNames('spiffy-tw-fixed spiffy-tw-inset-0 spiffy-tw-z-50 spiffy-tw-flex spiffy-tw-transform spiffy-tw-transition-all', {
+        'spiffy-tw-translate-x-full': !isOpen,
+        'spiffy-tw-translate-x-0': isOpen,
+    });
+    const overlayClasses = classNames('spiffy-tw-absolute spiffy-tw-inset-0 spiffy-tw-bg-black spiffy-tw-bg-opacity-50', {
+        'spiffy-tw-opacity-0': !isOpen,
+        'spiffy-tw-opacity-100': isOpen,
+    });
+    const sidebarClasses = classNames('spiffy-tw-relative spiffy-tw-ml-auto spiffy-tw-flex spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-max-w-xs spiffy-tw-flex-col spiffy-tw-overflow-y-auto spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-py-4 spiffy-tw-shadow-xl');
+    return (_jsxs("div", { className: modalClasses, children: [_jsx("div", { className: overlayClasses, onClick: () => setIsOpen(false) }), _jsxs("div", { className: sidebarClasses, children: [headerContent, _jsx("div", { className: "spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6", children: filters.map((filter) => (_jsxs("div", { className: "spiffy-tw-mb-6", children: [_jsx(Text, { variant: "body2", className: "spiffy-tw-font-medium spiffy-tw-mb-3", children: filter.displayName }), _jsx("ul", { children: filter.items.map((item) => (_jsx(SearchFilterItem, { filterItem: item, onSelectFilterItem: selectFilterItem, radioButtonFillColor: radioButtonFillColor, radioButtonHoverColor: radioButtonHoverColor, radioButtonUncheckedBorderColor: radioButtonUncheckedBorderColor }, item.id))) })] }, filter.id))) }), _jsxs("div", { className: "spiffy-tw-border-t spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-px-4 spiffy-tw-py-3", children: [_jsx(ButtonBase, { onClick: clearAllFilters, text: "Clear All", buttonClass: "spiffy-tw-w-full spiffy-tw-mb-2" }), _jsx(ButtonBase, { onClick: () => setIsOpen(false), text: filterButtonText, buttonClass: "spiffy-tw-w-full" })] })] })] }));
+};

package/dist/packages/components/src/components/search/SearchFilter/SearchFilterHeader.d.ts

@@ -0,0 +1,2 @@
+import type { SearchFilterHeaderProps } from './types';
+export declare const SearchFilterHeader: ({ closeModal, productCount, headerClassName, filterCloseIconVariant, }: SearchFilterHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/search/SearchFilter/SearchFilterHeader.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Text } from '../../../../../../src/components/common/Text/Text';
+export const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant, }) => {
+    const closeIconColor = filterCloseIconVariant === 'dark'
+        ? 'var(--spiffy-colors-text-primary)'
+        : 'var(--spiffy-colors-text-light)';
+    return (_jsxs("div", { className: classNames('spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3', headerClassName), children: [_jsxs(Text, { variant: "body2", className: "spiffy-tw-font-medium", children: ["Filters (", productCount, ")"] }), _jsx("button", { onClick: closeModal, className: "spiffy-tw-p-2", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: _jsx("path", { d: "M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z", fill: closeIconColor }) }) })] }));
+};

package/dist/packages/components/src/components/search/SearchFilter/SearchFilterItem.d.ts

@@ -0,0 +1,2 @@
+import type { SearchFilterItemProps } from './types';
+export declare const SearchFilterItem: ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, }: SearchFilterItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/search/SearchFilter/SearchFilterItem.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Text } from '../../../../../../src/components/common/Text/Text';
+export const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, }) => {
+    const { displayName, isSelected } = filterItem;
+    const radioClasses = classNames('spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2', 'spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center', radioButtonUncheckedBorderColor, radioButtonHoverColor, {
+        [radioButtonFillColor]: isSelected,
+    });
+    return (_jsxs("li", { className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer", onClick: () => onSelectFilterItem(filterItem), children: [_jsx(Text, { variant: "body3", children: displayName }), _jsx("div", { className: radioClasses, children: isSelected && (_jsx("div", { className: classNames('spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full', {
+                        'spiffy-tw-bg-white': radioButtonFillColor.includes('spiffy-tw-bg-'),
+                        'spiffy-tw-bg-black': radioButtonFillColor.includes('spiffy-tw-bg-white'),
+                    }) })) })] }));
+};

package/dist/packages/components/src/components/search/SearchFilter/types.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+export type SearchFilterItem = {
+    id: string;
+    displayName: string;
+    value: string;
+    isSelected: boolean;
+};
+export type SearchFilter = {
+    id: string;
+    displayName: string;
+    items: SearchFilterItem[];
+};
+export type SelectFilterItem = (filterItem: SearchFilterItem) => void;
+export interface SearchFilterItemProps {
+    filterItem: SearchFilterItem;
+    onSelectFilterItem: SelectFilterItem;
+    radioButtonFillColor: string;
+    radioButtonHoverColor: string;
+    radioButtonUncheckedBorderColor: string;
+}
+export interface SearchFilterHeaderProps {
+    closeModal: () => void;
+    productCount: number;
+    headerClassName: string;
+    filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+}
+export interface SearchFilterProps {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    filters: SearchFilter[];
+    productCount: number;
+    selectFilterItem: SelectFilterItem;
+    clearAllFilters: () => void;
+    applyFiltersUnchangedClasses: string;
+    applyFiltersChangedClasses: string;
+    filterButtonText: string;
+    radioButtonFillColor: string;
+    radioButtonHoverColor: string;
+    radioButtonUncheckedBorderColor: string;
+    filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+    headerContent: ReactNode;
+}

package/dist/packages/components/src/components/search/SearchFilter/types.js

@@ -0,0 +1 @@
+export {};

package/dist/packages/components/src/components/search/SearchInput/SearchInput.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { SearchInputVariant } from '../SearchInputForm/types';
+export interface SearchInputProps {
+    searchInputVariant?: SearchInputVariant;
+    value: string;
+    placeholder?: string;
+    suggestions?: string[];
+    className?: string;
+    dataTestId?: string;
+    ariaActivedescendant?: string;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onChange: (newValue: string) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/packages/components/src/components/search/SearchInput/SearchInput.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import MagnifyingGlassStarVariant from '@envive/icons/src/MagnifyingGlassStarVariant';
+import CloseIcon from '@envive/icons/src/IconClose';
+import { TextInput } from '../../../../../../src/components/common/TextInput/TextInput';
+import { searchInputVariantClasses } from './searchInputVariants';
+export const SearchInput = React.forwardRef(({ searchInputVariant = 'standard', value, placeholder, suggestions, className, dataTestId, ariaActivedescendant, onKeyDown, onChange, onFocus, onBlur, }, ref) => {
+    const localInputRef = useRef(null);
+    const { searchInputClasses: inputClassName, searchInputIconColor: iconColor, searchInputBorderColor: borderColor, searchInputCloseIconClasses: closeIconClasses, searchInputActiveStarClasses, placeholderVariant, } = searchInputVariantClasses[searchInputVariant];
+    // Expose the local ref through the forwarded ref
+    useImperativeHandle(ref, () => localInputRef.current, []);
+    const magnifyingGlassClassesBase = [
+        'spiffy-tw-w-[24px]',
+        'spiffy-tw-h-[32px]',
+        'spiffy-tw-stroke-width-1',
+        'sm:spiffy-tw-w-[32px]',
+    ];
+    const magnifyingGlassClassesInactive = classNames(magnifyingGlassClassesBase);
+    const magnifyingGlassClassesActive = classNames([
+        ...magnifyingGlassClassesBase,
+        searchInputActiveStarClasses,
+    ]);
+    const containerClasses = classNames('spiffy-global-search-input-container', 'spiffy-tw-relative spiffy-tw-flex spiffy-tw-items-center', className);
+    const inputClasses = classNames('spiffy-global-search-input', 'spiffy-tw-flex-grow spiffy-tw-p-2 spiffy-tw-px-[42px] sm:spiffy-tw-p-3 sm:spiffy-tw-px-[48px]', 'spiffy-tw-border', 'spiffy-tw-text-base', inputClassName);
+    const closeButtonIconClassName = classNames([
+        'spiffy-tw-w-[16px]',
+        'spiffy-tw-h-[16px]',
+        'sm:spiffy-tw-w-[24px]',
+        'sm:spiffy-tw-h-[24px]',
+        'spiffy-tw-cursor-pointer',
+        closeIconClasses,
+    ]);
+    return (_jsxs("div", { className: containerClasses, "data-testid": dataTestId, children: [_jsx("div", { className: "spiffy-tw-absolute spiffy-tw-left-3 spiffy-tw-top-1/2 spiffy-tw--translate-y-1/2", children: _jsx(MagnifyingGlassStarVariant, { className: value.length > 0 ? magnifyingGlassClassesActive : magnifyingGlassClassesInactive, stroke: iconColor, strokeWidth: "1px" }) }), _jsx(TextInput, { value: value, onChange: (event) => onChange(event.target.value), onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, placeholder: placeholder, className: inputClasses, placeholderVariant: placeholderVariant, "aria-label": "Search", "aria-autocomplete": "list", "aria-expanded": !!suggestions && suggestions.length > 0, "aria-controls": "autocomplete-results", "aria-activedescendant": ariaActivedescendant, borderRadius: "xl", borderColorClass: borderColor, ref: localInputRef }), value && (_jsx("button", { onClick: () => {
+                    onChange('');
+                    localInputRef.current?.focus();
+                }, className: "spiffy-tw-absolute spiffy-tw-right-5 spiffy-tw-top-1/2 spiffy-tw--translate-y-1/2 spiffy-tw-text-neutral-500 hover:spiffy-tw-text-neutral-700", "aria-label": "Clear search input", type: "button", children: _jsx(CloseIcon, { className: closeButtonIconClassName }) }))] }));
+});

package/dist/packages/components/src/components/search/SearchInput/searchInputVariants.d.ts

@@ -0,0 +1,13 @@
+import type { TextStyleVariantMap } from '../../../../../../src/components/common/Text/textVariantClasses';
+import type { SearchInputVariant } from '../SearchInputForm/types';
+interface SearchInputVariantClasses {
+    searchInputIconColor: string;
+    searchInputBorderColor: string;
+    searchInputCloseIconClasses: string;
+    searchInputActiveStarClasses: string;
+    autocompleteIconColor: string;
+    searchInputClasses: string;
+    placeholderVariant: keyof typeof TextStyleVariantMap;
+}
+export declare const searchInputVariantClasses: Record<SearchInputVariant, SearchInputVariantClasses>;
+export {};

package/dist/packages/components/src/components/search/SearchInput/searchInputVariants.js

@@ -0,0 +1,12 @@
+import { ColorNames, colorVar } from '../../../../../../src/components/models/colorsConfig';
+export const searchInputVariantClasses = {
+    standard: {
+        searchInputIconColor: 'transparent', // colorVar(ColorNames.TextSecondary),
+        searchInputBorderColor: 'spiffy-tw-border-[--spiffy-colors-border-medium]',
+        searchInputCloseIconClasses: '[&>circle]:spiffy-tw-fill-[--spiffy-colors-text-secondary] [&>path]:spiffy-tw-fill-[#fff]',
+        searchInputActiveStarClasses: `first:[&>path]:spiffy-tw-stroke-[--spiffy-colors-accent-primary] first:[&>path]:spiffy-tw-fill-[--spiffy-colors-accent-primary]`,
+        autocompleteIconColor: colorVar(ColorNames.BackgroundPrimary),
+        searchInputClasses: 'spiffy-tw-text-[--spiffy-colors-text-primary] placeholder:spiffy-tw-text-[--spiffy-colors-text-secondary] spiffy-tw-text-[16px] spiffy-tw-font-normal spiffy-tw-leading-[148%] placeholder:spiffy-tw-font-medium placeholder:spiffy-tw-leading-[124%]',
+        placeholderVariant: 'h2',
+    },
+};

package/dist/packages/components/src/components/search/SearchInputAutocomplete/SearchAutocomplete.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface GlobalSearchAutocompleteProps {
+    id: string;
+    results: string[];
+    focusedIndex: number;
+    onSuggestionSelect: (suggestion: string, rankPosition: number) => void;
+    iconColor?: string;
+}
+export declare const SearchAutocomplete: React.FC<GlobalSearchAutocompleteProps>;
+export {};

package/dist/packages/components/src/components/search/SearchInputAutocomplete/SearchAutocomplete.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+import classNames from 'classnames';
+import OutlinedStar from '@envive/icons/src/OutlinedStar';
+export const SearchAutocomplete = ({ id, results, focusedIndex, onSuggestionSelect, iconColor, }) => {
+    if (results.length === 0) {
+        return null;
+    }
+    return (_jsx(motion.div, { className: "spiffy-tw-h-full", initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: _jsx("ul", { id: id, role: "listbox", className: "spiffy-tw-mt-4 spiffy-tw-space-y-2", children: results.map((result, index) => (_jsxs("li", { id: `option-${index}`, role: "option", "aria-selected": index === focusedIndex, className: classNames('spiffy-tw-flex spiffy-tw-items-center spiffy-tw-cursor-pointer spiffy-tw-py-1', { 'spiffy-tw-bg-neutral-200': index === focusedIndex }, 'hover:spiffy-tw-bg-neutral-100'), onClick: () => onSuggestionSelect(result, index), onKeyDown: (event) => {
+                    if (event.key === 'Enter' || event.keyCode === 13) {
+                        onSuggestionSelect(result, index);
+                    }
+                }, children: [_jsx(OutlinedStar, { className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-2", fill: iconColor }), _jsx("span", { className: "spiffy-tw-font-bold", children: result })] }, index))) }) }));
+};

package/dist/packages/components/src/components/search/SearchInputForm/SearchInputForm.d.ts

@@ -0,0 +1,16 @@
+import type { SearchInputVariant } from './types';
+interface SearchInputFormProps {
+    searchInputVariant: SearchInputVariant;
+    searchText: string;
+    autocompleteResults: string[];
+    searchBoxPlaceholder: string;
+    focusedOptionId: string | undefined;
+    isDirty: boolean;
+    focusedIndex: number;
+    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onAutocompleteSelect: (suggestion: string) => void;
+    onSearchInputChange: (value: string) => void;
+    onSearchSubmit: () => void;
+}
+export declare const SearchInputForm: ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, isDirty, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, }: SearchInputFormProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/components/src/components/search/SearchInputForm/SearchInputForm.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchAutocomplete } from '../SearchInputAutocomplete/SearchAutocomplete';
+import { searchInputVariantClasses } from '../SearchInput/searchInputVariants';
+import { SearchInput } from '../SearchInput/SearchInput';
+export const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, isDirty, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, }) => {
+    const { searchInputIconColor } = searchInputVariantClasses[searchInputVariant];
+    return (_jsxs(_Fragment, { children: [_jsx("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    onSearchSubmit();
+                }, className: "spiffy-tw-grow", children: _jsx(SearchInput, { value: searchText, placeholder: searchBoxPlaceholder, suggestions: autocompleteResults, ariaActivedescendant: focusedOptionId, searchInputVariant: searchInputVariant, 
+                    // dataTestId={SEARCH_INPUT_TESTID}
+                    onKeyDown: onKeyDown, onChange: onSearchInputChange }) }), isDirty && (_jsx(SearchAutocomplete, { id: "autocomplete-results", results: autocompleteResults, focusedIndex: focusedIndex, iconColor: searchInputIconColor, onSuggestionSelect: onAutocompleteSelect }))] }));
+};

package/dist/packages/components/src/components/search/SearchInputForm/types.d.ts

@@ -0,0 +1 @@
+export type SearchInputVariant = 'standard';

package/dist/packages/components/src/components/search/SearchInputForm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/packages/components/src/components/search/SearchResultsFilterSidebar/SearchResultsFilter.d.ts

@@ -0,0 +1,14 @@
+import type { SearchFilter as SearchFilterType, SelectFilterItem } from '../SearchFilter/types';
+import type { SearchFilterSidebarVariant } from './types';
+export type SearchResultsFilterProps = {
+    productCount: number;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    searchFilters: SearchFilterType[];
+    searchFilterSidebarVariant: SearchFilterSidebarVariant;
+    searchText: string;
+    onSelectFilterItem: SelectFilterItem;
+    onClearAllFilters: () => void;
+    filterButtonText: string;
+};
+export declare const SearchResultsFilter: ({ productCount, isOpen, setIsOpen, searchFilters, searchFilterSidebarVariant, onSelectFilterItem, onClearAllFilters, filterButtonText, }: SearchResultsFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/search/SearchResultsFilterSidebar/SearchResultsFilter.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { SearchFilter } from '../SearchFilter/SearchFilter';
+import { SearchFilterHeader } from '../SearchFilter/SearchFilterHeader';
+import { searchFilterSidebarVariantClasses } from './searchFilterSidebarVariants';
+import { ButtonBase } from '../../../../../../src/components/common/ButtonBase/ButtonBase';
+export const SearchResultsFilter = ({ productCount, isOpen, setIsOpen, searchFilters, searchFilterSidebarVariant, onSelectFilterItem, onClearAllFilters, filterButtonText, }) => {
+    const { applyFiltersUnchangedClasses, applyFiltersChangedClasses, searchFilterHeaderClasses, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant, } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+    const openFilter = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    return (_jsxs(_Fragment, { children: [_jsx(SearchFilter, { isOpen: isOpen, setIsOpen: setIsOpen, filters: searchFilters, productCount: productCount, selectFilterItem: onSelectFilterItem, clearAllFilters: onClearAllFilters, applyFiltersUnchangedClasses: applyFiltersUnchangedClasses, applyFiltersChangedClasses: applyFiltersChangedClasses, filterButtonText: filterButtonText, radioButtonFillColor: radioButtonFillColor, radioButtonHoverColor: radioButtonHoverColor, radioButtonUncheckedBorderColor: radioButtonUncheckedBorderColor, filterCloseIconVariant: filterCloseIconVariant, headerContent: _jsx(SearchFilterHeader, { closeModal: () => setIsOpen(false), productCount: productCount, headerClassName: searchFilterHeaderClasses, filterCloseIconVariant: filterCloseIconVariant }) }), _jsx(ButtonBase, { onClick: openFilter, 
+                // icon={SettingsVariant} // Icon is handled by user
+                iconClass: "spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center", text: filterButtonText, textClass: "spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block", buttonClass: "spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]", disablePadding: true })] }));
+};

package/dist/packages/components/src/components/search/SearchResultsFilterSidebar/searchFilterSidebarVariants.d.ts

@@ -0,0 +1,16 @@
+import type { SearchFilterSidebarVariant, CloseIconVariant } from './types';
+interface SearchFilterSidebarVariantClasses {
+    searchFilterHeaderClasses: string;
+    radioButtonFillColor: string;
+    radioButtonHoverColor: string;
+    radioButtonUncheckedBorderColor: string;
+    filterDefaultClasses: string;
+    filterActiveClasses: string;
+    filterHoverClasses: string;
+    appliedFilterBackgroundClasses: string;
+    applyFiltersUnchangedClasses: string;
+    applyFiltersChangedClasses: string;
+    filterCloseIconVariant: CloseIconVariant;
+}
+export declare const searchFilterSidebarVariantClasses: Record<SearchFilterSidebarVariant, SearchFilterSidebarVariantClasses>;
+export {};

package/dist/packages/components/src/components/search/SearchResultsFilterSidebar/searchFilterSidebarVariants.js

@@ -0,0 +1,29 @@
+import { ColorNames, colorVar } from '../../../../../../src/components/models/colorsConfig';
+export const searchFilterSidebarVariantClasses = {
+    darkButton: {
+        radioButtonFillColor: colorVar(ColorNames.BackgroundDark),
+        radioButtonHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+        radioButtonUncheckedBorderColor: colorVar(ColorNames.BorderMedium),
+        searchFilterHeaderClasses: 'spiffy-tw-text-[--spiffy-colors-text-light]',
+        filterDefaultClasses: 'spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+        filterHoverClasses: 'hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]',
+        filterActiveClasses: 'spiffy-tw-border-[--spiffy-colors-border-outline] spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]',
+        appliedFilterBackgroundClasses: 'spiffy-tw-bg-[--spiffy-colors-border-light]',
+        applyFiltersUnchangedClasses: 'spiffy-tw-bg-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+        applyFiltersChangedClasses: 'spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]',
+        filterCloseIconVariant: 'light',
+    },
+    lightButton: {
+        radioButtonFillColor: colorVar(ColorNames.BackgroundDark),
+        radioButtonHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+        radioButtonUncheckedBorderColor: colorVar(ColorNames.BorderMedium),
+        searchFilterHeaderClasses: 'spiffy-tw-text-[--spiffy-colors-text-primary]',
+        filterDefaultClasses: 'spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+        filterHoverClasses: 'hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]',
+        filterActiveClasses: 'spiffy-tw-border-[--spiffy-colors-border-outline] spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]',
+        appliedFilterBackgroundClasses: 'spiffy-tw-bg-[--spiffy-colors-border-light]',
+        applyFiltersUnchangedClasses: 'spiffy-tw-bg-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+        applyFiltersChangedClasses: 'spiffy-tw-bg-[--spiffy-colors-background-primary] spiffy-tw-text-[--spiffy-colors-text-link]',
+        filterCloseIconVariant: 'dark',
+    },
+};

package/dist/packages/components/src/components/search/SearchResultsFilterSidebar/types.d.ts

@@ -0,0 +1,2 @@
+export type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
+export type CloseIconVariant = 'light' | 'tertiary' | 'dark';

package/dist/packages/components/src/components/search/SearchResultsFilterSidebar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/packages/components/src/components/search/SearchResultsStates/NoSearchResultsFound.d.ts

@@ -0,0 +1,8 @@
+interface NoSearchResultsFoundProps {
+    containerPaddingClasses: string;
+    includeBottomMargin?: boolean;
+    noResultsFoundText?: string;
+    sparkleIconColor?: string;
+}
+export declare const NoSearchResultsFound: ({ containerPaddingClasses, includeBottomMargin, noResultsFoundText, sparkleIconColor, }: NoSearchResultsFoundProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/components/src/components/search/SearchResultsStates/NoSearchResultsFound.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import Sparkles from '@envive/icons/src/Sparkles';
+import { Text } from '../../../../../../src/components/common/Text/Text';
+export const NoSearchResultsFound = ({ containerPaddingClasses, includeBottomMargin = false, noResultsFoundText, sparkleIconColor = 'var(--spiffy-colors-accent-primary)', }) => {
+    const containerClasses = classNames(containerPaddingClasses, includeBottomMargin ? 'spiffy-tw-mb-[100vh]' : '', 'spiffy-tw-mt-6');
+    const textPrompt = noResultsFoundText ||
+        'I’m sorry, I wasn’t able to find an exact match. Try changing your filters or adjusting your search query.';
+    return (_jsx("div", { className: containerClasses, children: _jsxs("div", { className: "spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2", children: [_jsx("div", { children: _jsx(Sparkles, { className: "spiffy-tw-w-[24px] spiffy-tw-h-[24px]", style: { color: sparkleIconColor } }) }), _jsx(Text, { variant: "body2", children: textPrompt })] }) }));
+};

package/dist/packages/components/src/components/search/SearchResultsStates/SearchResultsGrid.d.ts

@@ -0,0 +1,24 @@
+import type { SelectedFilterOption } from '../../../../../../src/atoms/search/types';
+import type { SearchResponseProduct } from '../../../../../../src/types/external';
+import type { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar/types';
+import { ProductGridVariant } from '../../../../../../src/components/common/ProductCard/types';
+interface SearchResultsGridProps {
+    productList: SearchResponseProduct[];
+    availableDynamicFilters: {
+        name: string;
+        displayName: string;
+    }[];
+    searchFilterSidebarVariant: SearchFilterSidebarVariant;
+    productGridVariant: ProductGridVariant;
+    selectedFilterOptions: SelectedFilterOption[];
+    searchResponseId: string;
+    containerXPaddingClasses: string;
+    productGridClasses: string;
+    onRemoveFilter: (filter: SelectedFilterOption) => void;
+    onToggleDynamicFilter: ({ filter, dynamicFilterDisplayName, }: {
+        filter: string;
+        dynamicFilterDisplayName: string;
+    }) => void;
+}
+export declare const SearchResultsGrid: ({ productList, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, searchResponseId, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter, }: SearchResultsGridProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/components/src/components/search/SearchResultsStates/SearchResultsGrid.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+import classNames from 'classnames';
+import { ProductGrid } from '../../../../../../src/components/common/ProductGrid/ProductGrid';
+import { AppliedFiltersScrollbar } from '../FilterScrollbar/AppliedFiltersScrollbar';
+import { DynamicFiltersScrollbar } from '../FilterScrollbar/DynamicFiltersScrollbar';
+import { searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar/searchFilterSidebarVariants';
+export const SearchResultsGrid = ({ productList, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, searchResponseId, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter, }) => {
+    const sharedFilterBarClasses = classNames('spiffy-suggestion-bar', 'spiffy-tw-no-scrollbar', 'spiffy-tw-flex', 'spiffy-tw-flex-row', 'spiffy-tw-gap-2', 'spiffy-tw-mb-[16px]', 'spiffy-tw-overflow-x-scroll', containerXPaddingClasses);
+    const filterBarClasses = classNames(sharedFilterBarClasses, 'spiffy-tw-mt-[24px]');
+    const appliedFilterBarClasses = classNames(sharedFilterBarClasses, 'spiffy-tw-mb-[32px]', 'spiffy-tw-mt-[8px]');
+    const { 
+    // We may want to pull these into their own variant separated from the filter sidebar (but also used in it) In this case, we need them for dynamic filters
+    filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+    return (_jsxs(motion.div, { className: "spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: [_jsx(AppliedFiltersScrollbar, { selectedFilterOptions: selectedFilterOptions, filterBarClassNames: appliedFilterBarClasses, filterDefaultClasses: filterDefaultClasses, filterHoverClasses: filterHoverClasses, appliedFilterBackgroundClasses: appliedFilterBackgroundClasses, onRemoveFilter: onRemoveFilter }), _jsx(DynamicFiltersScrollbar, { availableDynamicFilters: availableDynamicFilters, filterBarClassNames: filterBarClasses, filterDefaultClasses: filterDefaultClasses, filterHoverClasses: filterHoverClasses, onToggleDynamicFilter: onToggleDynamicFilter }), _jsx(ProductGrid, { productList: productList, productGridVariant: productGridVariant, productGridClasses: productGridClasses, searchResponseId: searchResponseId, merchantShortName: '', handleClick: function (clickedUrl) {
+                    console.log(clickedUrl);
+                    throw new Error('Function not implemented.');
+                } })] }));
+};

package/dist/packages/components/src/components/search/SearchResultsStates/SearchResultsLoadingGrid.d.ts

@@ -0,0 +1,6 @@
+import { ProductGridVariant } from '../../../../../../src/components/common/ProductCard/types';
+export declare const SearchResultsLoadingGrid: ({ productGridVariant, productGridClasses, sparkleIconColor, }: {
+    productGridVariant: ProductGridVariant;
+    productGridClasses: string;
+    sparkleIconColor?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/search/SearchResultsStates/SearchResultsLoadingGrid.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../../../../../src/components/common/Text/Text';
+import { SparkleAnimation } from '../../../../../../src/components/common/SparkleAnimation/SparkleAnimation';
+import { motion } from 'framer-motion';
+import { ProductCardSkeleton } from '../../../../../../src/components/common/ProductCard/ProductCardSkeleton';
+import { productGridVariantClasses } from '../../../../../../src/components/common/ProductGrid/productGridVariants';
+export const SearchResultsLoadingGrid = ({ productGridVariant, productGridClasses, sparkleIconColor = 'var(--spiffy-colors-accent-primary)', }) => {
+    const { productCardLayoutVariant, productCardImageAspectRatio } = productGridVariantClasses[productGridVariant];
+    return (_jsx(motion.div, { className: "spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: _jsxs("div", { className: "spiffy-tw-mt-6 spiffy-tw-w-full", children: [_jsx("div", { className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-mb-4", children: _jsxs("div", { className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-2 spiffy-tw-ml-[16px] md:spiffy-tw-ml-[80px]", children: [_jsx("div", { className: "spiffy-tw-width-[24px]", children: _jsx(SparkleAnimation, { color: sparkleIconColor, animate: true }) }), _jsx(Text, { variant: "body2", children: "Finding the best options for you..." })] }) }), _jsx("div", { className: productGridClasses, children: Array.from({ length: 8 }).map((_, index) => (_jsx(ProductCardSkeleton, { layoutVariant: productCardLayoutVariant, aspectRatio: productCardImageAspectRatio, growWithContainer: true }, index))) })] }) }));
+};

package/dist/packages/components/src/components/search/types.d.ts

@@ -0,0 +1,5 @@
+export declare enum SearchResultsState {
+    NoResults = "noResults",
+    Results = "results",
+    Loading = "loading"
+}

package/dist/packages/components/src/components/search/types.js

@@ -0,0 +1,6 @@
+export var SearchResultsState;
+(function (SearchResultsState) {
+    SearchResultsState["NoResults"] = "noResults";
+    SearchResultsState["Results"] = "results";
+    SearchResultsState["Loading"] = "loading";
+})(SearchResultsState || (SearchResultsState = {}));

package/dist/packages/components/src/components/test/types.d.ts

@@ -0,0 +1,3 @@
+export interface TestProps {
+    dataTestId?: string;
+}

package/dist/packages/components/src/components/test/types.js

@@ -0,0 +1 @@
+export {};

package/dist/packages/components/src/config/chatElementDisplayLocation.d.ts

@@ -0,0 +1,21 @@
+export declare enum ChatElementDisplayLocation {
+    IN_CHAT = "in_chat",
+    CHAT_PREVIEW = "chat_preview",
+    FLOATING_BUTTON = "floating_button",
+    HELP_ME_CHOOSE = "help_me_choose",
+    PLP_IMAGE_BANNER = "plp_image_banner",
+    TOP_REVIEWS_SNIPPET = "top_reviews_snippet",
+    BOTTOM_REVIEWS_SNIPPET = "bottom_reviews_snippet",
+    BLOCK_BACK_BUTTON = "block_back_button",
+    SWITCH_TO_AGENT = "switch_to_agent",
+    CONVERSATIONAL_SEARCH = "conversational_search",
+    GLOBAL_SEARCH_ENTRYPOINT = "global_search_entrypoint",
+    SEARCH_NAV_ENTRYPOINT = "search_nav_entrypoint",
+    SEARCH_PROMPT = "search_prompt",
+    SEARCH_PROMPT_BUTTON = "search_prompt_button",
+    PRODUCT_GRID = "product_grid",
+    UNSPECIFIED = "unspecified",
+    FILTER_MODAL = "filter_modal",
+    PROMPT_CARD = "prompt_card",
+    WINDOW_API_CALL = "window_api_call"
+}

package/dist/packages/components/src/config/chatElementDisplayLocation.js

@@ -0,0 +1,23 @@
+// Chat element display location enum
+export var ChatElementDisplayLocation;
+(function (ChatElementDisplayLocation) {
+    ChatElementDisplayLocation["IN_CHAT"] = "in_chat";
+    ChatElementDisplayLocation["CHAT_PREVIEW"] = "chat_preview";
+    ChatElementDisplayLocation["FLOATING_BUTTON"] = "floating_button";
+    ChatElementDisplayLocation["HELP_ME_CHOOSE"] = "help_me_choose";
+    ChatElementDisplayLocation["PLP_IMAGE_BANNER"] = "plp_image_banner";
+    ChatElementDisplayLocation["TOP_REVIEWS_SNIPPET"] = "top_reviews_snippet";
+    ChatElementDisplayLocation["BOTTOM_REVIEWS_SNIPPET"] = "bottom_reviews_snippet";
+    ChatElementDisplayLocation["BLOCK_BACK_BUTTON"] = "block_back_button";
+    ChatElementDisplayLocation["SWITCH_TO_AGENT"] = "switch_to_agent";
+    ChatElementDisplayLocation["CONVERSATIONAL_SEARCH"] = "conversational_search";
+    ChatElementDisplayLocation["GLOBAL_SEARCH_ENTRYPOINT"] = "global_search_entrypoint";
+    ChatElementDisplayLocation["SEARCH_NAV_ENTRYPOINT"] = "search_nav_entrypoint";
+    ChatElementDisplayLocation["SEARCH_PROMPT"] = "search_prompt";
+    ChatElementDisplayLocation["SEARCH_PROMPT_BUTTON"] = "search_prompt_button";
+    ChatElementDisplayLocation["PRODUCT_GRID"] = "product_grid";
+    ChatElementDisplayLocation["UNSPECIFIED"] = "unspecified";
+    ChatElementDisplayLocation["FILTER_MODAL"] = "filter_modal";
+    ChatElementDisplayLocation["PROMPT_CARD"] = "prompt_card";
+    ChatElementDisplayLocation["WINDOW_API_CALL"] = "window_api_call";
+})(ChatElementDisplayLocation || (ChatElementDisplayLocation = {}));