@envive-ai/react-toolkit 0.2.2 → 0.2.4

package/dist/ProductGrid-BeFeluHo.cjs

@@ -0,0 +1,74 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_ProductCard = require('./ProductCard-CByKIsUN.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/components/ProductGrid/productGridVariants.ts
+const productGridVariantClasses = {
+	standard: {
+		productCardVariant: "minimal",
+		productCardHoverVariant: "backgroundDark",
+		productCardLayoutVariant: "tall",
+		productCardImageAspectRatio: "3:4",
+		zoomOnHover: true
+	},
+	square: {
+		productCardVariant: "minimal",
+		productCardHoverVariant: "backgroundDark",
+		productCardLayoutVariant: "square",
+		productCardImageAspectRatio: "square",
+		zoomOnHover: true
+	}
+};
+
+//#endregion
+//#region src/components/ProductGrid/ProductGrid.tsx
+const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, cardsGrowWithContainer = true }) => {
+	const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = productGridVariantClasses[productGridVariant];
+	const cardContainerClasses = (0, classnames.default)({
+		"spiffy-tw-w-full": cardsGrowWithContainer,
+		"spiffy-tw-h-full": cardsGrowWithContainer
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: productGridClasses,
+		children: productList.map((product) => {
+			const camelCasedProduct = product;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cardContainerClasses,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductCard.ProductCard, {
+					productCardConfig,
+					merchantShortName,
+					imageUrl: camelCasedProduct.imageUrl,
+					title: camelCasedProduct.title,
+					url: camelCasedProduct.url,
+					originalPrice: camelCasedProduct.originalPrice,
+					salePrice: camelCasedProduct.salePrice,
+					averageRating: camelCasedProduct.averageRating,
+					numberReviews: camelCasedProduct.numberReviews,
+					layoutVariant: productCardLayoutVariant,
+					variant: productCardVariant,
+					hoverVariant: productCardHoverVariant,
+					zoomOnHover,
+					aspectRatio: productCardImageAspectRatio,
+					growWithContainer: cardsGrowWithContainer
+				}, camelCasedProduct.id)
+			}, camelCasedProduct.id);
+		})
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'ProductGrid', {
+  enumerable: true,
+  get: function () {
+    return ProductGrid;
+  }
+});
+Object.defineProperty(exports, 'productGridVariantClasses', {
+  enumerable: true,
+  get: function () {
+    return productGridVariantClasses;
+  }
+});

package/dist/ProductGrid-Cgkb4vNf.js

@@ -0,0 +1,60 @@
+import { ProductCard } from "./ProductCard-BIlnM2nV.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ProductGrid/productGridVariants.ts
+const productGridVariantClasses = {
+	standard: {
+		productCardVariant: "minimal",
+		productCardHoverVariant: "backgroundDark",
+		productCardLayoutVariant: "tall",
+		productCardImageAspectRatio: "3:4",
+		zoomOnHover: true
+	},
+	square: {
+		productCardVariant: "minimal",
+		productCardHoverVariant: "backgroundDark",
+		productCardLayoutVariant: "square",
+		productCardImageAspectRatio: "square",
+		zoomOnHover: true
+	}
+};
+
+//#endregion
+//#region src/components/ProductGrid/ProductGrid.tsx
+const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, cardsGrowWithContainer = true }) => {
+	const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = productGridVariantClasses[productGridVariant];
+	const cardContainerClasses = classNames({
+		"spiffy-tw-w-full": cardsGrowWithContainer,
+		"spiffy-tw-h-full": cardsGrowWithContainer
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: productGridClasses,
+		children: productList.map((product) => {
+			const camelCasedProduct = product;
+			return /* @__PURE__ */ jsx("div", {
+				className: cardContainerClasses,
+				children: /* @__PURE__ */ jsx(ProductCard, {
+					productCardConfig,
+					merchantShortName,
+					imageUrl: camelCasedProduct.imageUrl,
+					title: camelCasedProduct.title,
+					url: camelCasedProduct.url,
+					originalPrice: camelCasedProduct.originalPrice,
+					salePrice: camelCasedProduct.salePrice,
+					averageRating: camelCasedProduct.averageRating,
+					numberReviews: camelCasedProduct.numberReviews,
+					layoutVariant: productCardLayoutVariant,
+					variant: productCardVariant,
+					hoverVariant: productCardHoverVariant,
+					zoomOnHover,
+					aspectRatio: productCardImageAspectRatio,
+					growWithContainer: cardsGrowWithContainer
+				}, camelCasedProduct.id)
+			}, camelCasedProduct.id);
+		})
+	});
+};
+
+//#endregion
+export { ProductGrid, productGridVariantClasses };

package/dist/RadioButton/index.cjs

@@ -0,0 +1,4 @@
+require('../Typography-CFNWgbM5.cjs');
+const require_RadioButton = require('../RadioButton-DG0PgZbz.cjs');
+
+exports.RadioButton = require_RadioButton.RadioButton;

package/dist/RadioButton/index.d.cts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
+
+//#region src/components/RadioButton/RadioButton.d.ts
+interface RadioButtonProps extends TestProps {
+  isDisabled?: boolean;
+  label: string;
+  name: string;
+  value: string;
+  textButtonGap?: 'small' | 'medium' | 'large';
+  fillColor?: string;
+  hoverColor?: string;
+  uncheckedBorderColor?: string;
+  checked?: boolean;
+  onChange: (value: string) => void;
+  id: any;
+}
+declare const RadioButton: ({
+  isDisabled,
+  label,
+  name,
+  value,
+  textButtonGap,
+  fillColor,
+  hoverColor,
+  uncheckedBorderColor,
+  checked,
+  onChange,
+  id
+}: RadioButtonProps) => react_jsx_runtime16.JSX.Element;
+//#endregion
+export { RadioButton };

package/dist/RadioButton/index.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
+
+//#region src/components/RadioButton/RadioButton.d.ts
+interface RadioButtonProps extends TestProps {
+  isDisabled?: boolean;
+  label: string;
+  name: string;
+  value: string;
+  textButtonGap?: 'small' | 'medium' | 'large';
+  fillColor?: string;
+  hoverColor?: string;
+  uncheckedBorderColor?: string;
+  checked?: boolean;
+  onChange: (value: string) => void;
+  id: any;
+}
+declare const RadioButton: ({
+  isDisabled,
+  label,
+  name,
+  value,
+  textButtonGap,
+  fillColor,
+  hoverColor,
+  uncheckedBorderColor,
+  checked,
+  onChange,
+  id
+}: RadioButtonProps) => react_jsx_runtime18.JSX.Element;
+//#endregion
+export { RadioButton };

package/dist/RadioButton/index.js

@@ -0,0 +1,4 @@
+import "../Typography-D3vDkBMS.js";
+import { RadioButton } from "../RadioButton-C_soBi7w.js";
+
+export { RadioButton };

package/dist/RadioButton-C_soBi7w.js

@@ -0,0 +1,75 @@
+import { Typography } from "./Typography-D3vDkBMS.js";
+import { useState } from "react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/RadioButton/RadioButton.tsx
+const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "medium", fillColor, hoverColor, uncheckedBorderColor, checked = false, onChange, id }) => {
+	const [isHovered, setIsHovered] = useState(false);
+	const containerClassName = classNames({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-group": true,
+		"spiffy-tw-gap-1": textButtonGap === "small",
+		"spiffy-tw-gap-2": textButtonGap === "medium",
+		"spiffy-tw-gap-4": textButtonGap === "large",
+		"spiffy-tw-cursor-pointer": !isDisabled,
+		"spiffy-tw-opacity-40": isDisabled
+	});
+	const getFillColor = () => {
+		if (isHovered && hoverColor) return hoverColor;
+		if (checked) return fillColor;
+		return uncheckedBorderColor;
+	};
+	const handleChange = () => {
+		if (!isDisabled) onChange(value);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("label", {
+			className: containerClassName,
+			onMouseEnter: () => !isDisabled && setIsHovered(true),
+			onMouseLeave: () => setIsHovered(false),
+			"aria-label": label,
+			htmlFor: id,
+			children: label
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "spiffy-tw-relative",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "radio",
+				id,
+				name,
+				value,
+				checked,
+				disabled: isDisabled,
+				onChange: handleChange,
+				className: "spiffy-tw-sr-only"
+			}), /* @__PURE__ */ jsxs("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "24",
+				height: "24",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "11.5",
+					fill: "white",
+					stroke: getFillColor()
+				}), checked && /* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "9",
+					fill: getFillColor()
+				})]
+			})]
+		}),
+		/* @__PURE__ */ jsx(Typography, {
+			variant: "body3",
+			children: label
+		})
+	] });
+};
+
+//#endregion
+export { RadioButton };

package/dist/RadioButton-DG0PgZbz.cjs

@@ -0,0 +1,84 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Typography = require('./Typography-CFNWgbM5.cjs');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/components/RadioButton/RadioButton.tsx
+const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "medium", fillColor, hoverColor, uncheckedBorderColor, checked = false, onChange, id }) => {
+	const [isHovered, setIsHovered] = (0, react.useState)(false);
+	const containerClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-group": true,
+		"spiffy-tw-gap-1": textButtonGap === "small",
+		"spiffy-tw-gap-2": textButtonGap === "medium",
+		"spiffy-tw-gap-4": textButtonGap === "large",
+		"spiffy-tw-cursor-pointer": !isDisabled,
+		"spiffy-tw-opacity-40": isDisabled
+	});
+	const getFillColor = () => {
+		if (isHovered && hoverColor) return hoverColor;
+		if (checked) return fillColor;
+		return uncheckedBorderColor;
+	};
+	const handleChange = () => {
+		if (!isDisabled) onChange(value);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			className: containerClassName,
+			onMouseEnter: () => !isDisabled && setIsHovered(true),
+			onMouseLeave: () => setIsHovered(false),
+			"aria-label": label,
+			htmlFor: id,
+			children: label
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "spiffy-tw-relative",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "radio",
+				id,
+				name,
+				value,
+				checked,
+				disabled: isDisabled,
+				onChange: handleChange,
+				className: "spiffy-tw-sr-only"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "24",
+				height: "24",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "12",
+					cy: "12",
+					r: "11.5",
+					fill: "white",
+					stroke: getFillColor()
+				}), checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "12",
+					cy: "12",
+					r: "9",
+					fill: getFillColor()
+				})]
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+			variant: "body3",
+			children: label
+		})
+	] });
+};
+
+//#endregion
+Object.defineProperty(exports, 'RadioButton', {
+  enumerable: true,
+  get: function () {
+    return RadioButton;
+  }
+});

package/dist/RadioButtonGroup/index.cjs

@@ -0,0 +1,6 @@
+require('../Typography-CFNWgbM5.cjs');
+require('../RadioButton-DG0PgZbz.cjs');
+const require_RadioButtonGroup = require('../RadioButtonGroup-3t2kqSFA.cjs');
+
+exports.RadioButtonGroup = require_RadioButtonGroup.RadioButtonGroup;
+exports.SPIFFY_RADIO_BUTTON_GROUP_CLASS = require_RadioButtonGroup.SPIFFY_RADIO_BUTTON_GROUP_CLASS;

package/dist/RadioButtonGroup/index.d.cts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
+
+//#region src/components/RadioButtonGroup/RadioButtonGroup.d.ts
+declare const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";
+interface RadioButtonOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+interface RadioButtonGroupProps extends TestProps {
+  name: string;
+  options: RadioButtonOption[];
+  fillColor?: string;
+  hoverColor?: string;
+  value?: string;
+  isDisabled?: boolean;
+  gap?: 'small' | 'medium' | 'large';
+  textButtonGap?: 'small' | 'medium' | 'large';
+  onChange: (value: string) => void;
+  uncheckedBorderColor?: string;
+}
+declare const RadioButtonGroup: ({
+  name,
+  options,
+  fillColor,
+  hoverColor,
+  uncheckedBorderColor,
+  value,
+  isDisabled,
+  gap,
+  textButtonGap,
+  onChange
+}: RadioButtonGroupProps) => react_jsx_runtime6.JSX.Element;
+//#endregion
+export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/RadioButtonGroup/index.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime24 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
+
+//#region src/components/RadioButtonGroup/RadioButtonGroup.d.ts
+declare const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";
+interface RadioButtonOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+interface RadioButtonGroupProps extends TestProps {
+  name: string;
+  options: RadioButtonOption[];
+  fillColor?: string;
+  hoverColor?: string;
+  value?: string;
+  isDisabled?: boolean;
+  gap?: 'small' | 'medium' | 'large';
+  textButtonGap?: 'small' | 'medium' | 'large';
+  onChange: (value: string) => void;
+  uncheckedBorderColor?: string;
+}
+declare const RadioButtonGroup: ({
+  name,
+  options,
+  fillColor,
+  hoverColor,
+  uncheckedBorderColor,
+  value,
+  isDisabled,
+  gap,
+  textButtonGap,
+  onChange
+}: RadioButtonGroupProps) => react_jsx_runtime24.JSX.Element;
+//#endregion
+export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/RadioButtonGroup/index.js

@@ -0,0 +1,5 @@
+import "../Typography-D3vDkBMS.js";
+import "../RadioButton-C_soBi7w.js";
+import { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS } from "../RadioButtonGroup-DMbVgPQH.js";
+
+export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/RadioButtonGroup-3t2kqSFA.cjs

@@ -0,0 +1,52 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_RadioButton = require('./RadioButton-DG0PgZbz.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/components/RadioButtonGroup/RadioButtonGroup.tsx
+const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";
+const RadioButtonGroup = ({ name, options, fillColor, hoverColor, uncheckedBorderColor, value, isDisabled = false, gap = "medium", textButtonGap = "medium", onChange }) => {
+	const groupClassName = (0, classnames.default)({
+		[SPIFFY_RADIO_BUTTON_GROUP_CLASS]: true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-gap-1": gap === "small",
+		"spiffy-tw-gap-2": gap === "medium",
+		"spiffy-tw-gap-4": gap === "large"
+	});
+	const handleChange = (selectedValue) => {
+		if (!isDisabled) onChange(selectedValue);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: groupClassName,
+		children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RadioButton.RadioButton, {
+			id: option.value,
+			name,
+			value: option.value,
+			fillColor,
+			hoverColor,
+			uncheckedBorderColor,
+			label: option.label,
+			checked: value === option.value,
+			isDisabled: isDisabled || option.disabled,
+			onChange: handleChange,
+			textButtonGap
+		}, option.value))
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'RadioButtonGroup', {
+  enumerable: true,
+  get: function () {
+    return RadioButtonGroup;
+  }
+});
+Object.defineProperty(exports, 'SPIFFY_RADIO_BUTTON_GROUP_CLASS', {
+  enumerable: true,
+  get: function () {
+    return SPIFFY_RADIO_BUTTON_GROUP_CLASS;
+  }
+});

package/dist/RadioButtonGroup-DMbVgPQH.js

@@ -0,0 +1,38 @@
+import { RadioButton } from "./RadioButton-C_soBi7w.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/RadioButtonGroup/RadioButtonGroup.tsx
+const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";
+const RadioButtonGroup = ({ name, options, fillColor, hoverColor, uncheckedBorderColor, value, isDisabled = false, gap = "medium", textButtonGap = "medium", onChange }) => {
+	const groupClassName = classNames({
+		[SPIFFY_RADIO_BUTTON_GROUP_CLASS]: true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-gap-1": gap === "small",
+		"spiffy-tw-gap-2": gap === "medium",
+		"spiffy-tw-gap-4": gap === "large"
+	});
+	const handleChange = (selectedValue) => {
+		if (!isDisabled) onChange(selectedValue);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: groupClassName,
+		children: options.map((option) => /* @__PURE__ */ jsx(RadioButton, {
+			id: option.value,
+			name,
+			value: option.value,
+			fillColor,
+			hoverColor,
+			uncheckedBorderColor,
+			label: option.label,
+			checked: value === option.value,
+			isDisabled: isDisabled || option.disabled,
+			onChange: handleChange,
+			textButtonGap
+		}, option.value))
+	});
+};
+
+//#endregion
+export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/SearchAutocomplete/index.cjs

@@ -0,0 +1,3 @@
+const require_SearchAutocomplete = require('../SearchAutocomplete-TX8UTczp.cjs');
+
+exports.SearchAutocomplete = require_SearchAutocomplete.SearchAutocomplete;

package/dist/SearchAutocomplete/index.d.cts

@@ -0,0 +1,13 @@
+import React from "react";
+
+//#region src/components/SearchAutocomplete/SearchAutocomplete.d.ts
+interface GlobalSearchAutocompleteProps {
+  id: string;
+  results: string[];
+  focusedIndex: number;
+  onSuggestionSelect: (suggestion: string, rankPosition: number) => void;
+  iconColor?: string;
+}
+declare const SearchAutocomplete: React.FC<GlobalSearchAutocompleteProps>;
+//#endregion
+export { SearchAutocomplete };

package/dist/SearchAutocomplete/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+//#region src/components/SearchAutocomplete/SearchAutocomplete.d.ts
+interface GlobalSearchAutocompleteProps {
+  id: string;
+  results: string[];
+  focusedIndex: number;
+  onSuggestionSelect: (suggestion: string, rankPosition: number) => void;
+  iconColor?: string;
+}
+declare const SearchAutocomplete: React.FC<GlobalSearchAutocompleteProps>;
+//#endregion
+export { SearchAutocomplete };

package/dist/SearchAutocomplete/index.js

@@ -0,0 +1,3 @@
+import { SearchAutocomplete } from "../SearchAutocomplete-obO19yzL.js";
+
+export { SearchAutocomplete };

package/dist/SearchAutocomplete-TX8UTczp.cjs

@@ -0,0 +1,62 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+let framer_motion = require("framer-motion");
+framer_motion = require_chunk.__toESM(framer_motion);
+let react = require("react");
+react = require_chunk.__toESM(react);
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+let __envive_ai_react_icons_OutlinedStar = require("@envive-ai/react-icons/OutlinedStar");
+__envive_ai_react_icons_OutlinedStar = require_chunk.__toESM(__envive_ai_react_icons_OutlinedStar);
+
+//#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
+const SearchAutocomplete = ({ id, results, focusedIndex, onSuggestionSelect, iconColor }) => {
+	if (results.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		className: "spiffy-tw-h-full",
+		initial: {
+			opacity: 0,
+			y: -10
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -10
+		},
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			id,
+			role: "listbox",
+			className: "spiffy-tw-mt-4 spiffy-tw-space-y-2",
+			children: results.map((result, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				id: `option-${index}`,
+				role: "option",
+				"aria-selected": index === focusedIndex,
+				className: (0, classnames.default)("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: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_OutlinedStar.default, {
+					className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-2",
+					fill: iconColor
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "spiffy-tw-font-bold",
+					children: result
+				})]
+			}, index))
+		})
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'SearchAutocomplete', {
+  enumerable: true,
+  get: function () {
+    return SearchAutocomplete;
+  }
+});