@envive-ai/react-widgets 0.1.2 → 0.1.3

package/dist/packages/components/dist/components/RadioButton/RadioButton.cjs

@@ -0,0 +1,74 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/RadioButton/RadioButton.js
+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)("label", {
+		className: containerClassName,
+		onMouseEnter: () => !isDisabled && setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		"aria-label": label,
+		htmlFor: id,
+		children: [/* @__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
+exports.RadioButton = RadioButton;

package/dist/packages/components/dist/components/RadioButton/RadioButton.js

@@ -0,0 +1,72 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import { useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../components/dist/components/RadioButton/RadioButton.js
+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("label", {
+		className: containerClassName,
+		onMouseEnter: () => !isDisabled && setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		"aria-label": label,
+		htmlFor: id,
+		children: [/* @__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/packages/components/dist/components/RadioButton/index.cjs

@@ -0,0 +1 @@
+const require_RadioButton = require('./RadioButton.cjs');

package/dist/packages/components/dist/components/RadioButton/index.js

@@ -0,0 +1 @@
+import { RadioButton } from "./RadioButton.js";

package/dist/packages/components/dist/components/RadioButtonGroup/RadioButtonGroup.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_RadioButton = require('../RadioButton/RadioButton.cjs');
+require('../RadioButton/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/RadioButtonGroup/RadioButtonGroup.js
+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
+exports.RadioButtonGroup = RadioButtonGroup;
+exports.SPIFFY_RADIO_BUTTON_GROUP_CLASS = SPIFFY_RADIO_BUTTON_GROUP_CLASS;

package/dist/packages/components/dist/components/RadioButtonGroup/RadioButtonGroup.js

@@ -0,0 +1,39 @@
+import { RadioButton } from "../RadioButton/RadioButton.js";
+import "../RadioButton/index.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../components/dist/components/RadioButtonGroup/RadioButtonGroup.js
+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/packages/components/dist/components/RadioButtonGroup/index.cjs

@@ -0,0 +1 @@
+const require_RadioButtonGroup = require('./RadioButtonGroup.cjs');

package/dist/packages/components/dist/components/RadioButtonGroup/index.js

@@ -0,0 +1 @@
+import { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS } from "./RadioButtonGroup.js";

package/dist/packages/components/dist/components/RecommendedProducts/RecommendedProducts.cjs

@@ -0,0 +1,53 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+const require_ProductGrid = require('../ProductGrid/ProductGrid.cjs');
+require('../ProductGrid/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+
+//#region ../components/dist/components/RecommendedProducts/RecommendedProducts.js
+const RecommendedProducts = ({ retrievedProducts, merchantShortName, productCardConfig = {
+	variant: "minimal",
+	hoverVariant: "none",
+	layoutVariant: "square"
+}, productGridVariant = "square", heading, onProductClick }) => {
+	const containerClasses = (0, classnames.default)("spiffy-tw-justify-center", "spiffy-tw-overflow-hidden", "spiffy-tw-bg-white", "spiffy-tw-relative", "spiffy-tw-px-[24px]", "spiffy-tw-py-[16px]", "sm:spiffy-tw-px-[41px]", "sm:spiffy-tw-py-[40px]");
+	const titleContainerClasses = (0, classnames.default)("spiffy-tw-w-full", "spiffy-tw-border-b", "spiffy-tw-border-solid", "spiffy-tw-border-b-[--spiffy-colors-text-accent]", "spiffy-tw-pb-[8px]", "spiffy-tw-mb-[16px]");
+	const productGridClasses = (0, classnames.default)("spiffy-tw-grid", "spiffy-tw-justify-items-stretch", "spiffy-tw-grid-cols-2", "md:spiffy-tw-grid-cols-3", "lg:spiffy-tw-grid-cols-4", "spiffy-tw-gap-x-[4px]", "spiffy-tw-gap-y-[24px]", "spiffy-tw-h-full", "spiffy-tw-w-full", "spiffy-tw-items-stretch");
+	if (retrievedProducts == null || retrievedProducts.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+		className: containerClasses,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		style: {
+			left: "50%",
+			right: "50%",
+			marginLeft: "-50vw",
+			marginRight: "-50vw",
+			width: "100vw"
+		},
+		children: [heading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: titleContainerClasses,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "h1",
+				className: "spiffy-tw-text-[--spiffy-colors-text-accent]",
+				children: heading
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductGrid.ProductGrid, {
+			productList: retrievedProducts,
+			productGridVariant,
+			productGridClasses,
+			productCardConfig,
+			merchantShortName,
+			onProductClick
+		})]
+	});
+};
+
+//#endregion
+exports.RecommendedProducts = RecommendedProducts;

package/dist/packages/components/dist/components/RecommendedProducts/RecommendedProducts.js

@@ -0,0 +1,51 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import { ProductGrid } from "../ProductGrid/ProductGrid.js";
+import "../ProductGrid/index.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+
+//#region ../components/dist/components/RecommendedProducts/RecommendedProducts.js
+const RecommendedProducts = ({ retrievedProducts, merchantShortName, productCardConfig = {
+	variant: "minimal",
+	hoverVariant: "none",
+	layoutVariant: "square"
+}, productGridVariant = "square", heading, onProductClick }) => {
+	const containerClasses = classNames("spiffy-tw-justify-center", "spiffy-tw-overflow-hidden", "spiffy-tw-bg-white", "spiffy-tw-relative", "spiffy-tw-px-[24px]", "spiffy-tw-py-[16px]", "sm:spiffy-tw-px-[41px]", "sm:spiffy-tw-py-[40px]");
+	const titleContainerClasses = classNames("spiffy-tw-w-full", "spiffy-tw-border-b", "spiffy-tw-border-solid", "spiffy-tw-border-b-[--spiffy-colors-text-accent]", "spiffy-tw-pb-[8px]", "spiffy-tw-mb-[16px]");
+	const productGridClasses = classNames("spiffy-tw-grid", "spiffy-tw-justify-items-stretch", "spiffy-tw-grid-cols-2", "md:spiffy-tw-grid-cols-3", "lg:spiffy-tw-grid-cols-4", "spiffy-tw-gap-x-[4px]", "spiffy-tw-gap-y-[24px]", "spiffy-tw-h-full", "spiffy-tw-w-full", "spiffy-tw-items-stretch");
+	if (retrievedProducts == null || retrievedProducts.length === 0) return null;
+	return /* @__PURE__ */ jsxs(motion.div, {
+		className: containerClasses,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		style: {
+			left: "50%",
+			right: "50%",
+			marginLeft: "-50vw",
+			marginRight: "-50vw",
+			width: "100vw"
+		},
+		children: [heading && /* @__PURE__ */ jsx("div", {
+			className: titleContainerClasses,
+			children: /* @__PURE__ */ jsx(Typography, {
+				variant: "h1",
+				className: "spiffy-tw-text-[--spiffy-colors-text-accent]",
+				children: heading
+			})
+		}), /* @__PURE__ */ jsx(ProductGrid, {
+			productList: retrievedProducts,
+			productGridVariant,
+			productGridClasses,
+			productCardConfig,
+			merchantShortName,
+			onProductClick
+		})]
+	});
+};
+
+//#endregion
+export { RecommendedProducts };

package/dist/packages/components/dist/components/RecommendedProducts/index.cjs

@@ -0,0 +1,3 @@
+'use client';
+
+const require_RecommendedProducts = require('./RecommendedProducts.cjs');

package/dist/packages/components/dist/components/RecommendedProducts/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+import { RecommendedProducts } from "./RecommendedProducts.js";

package/dist/packages/components/dist/components/SearchAutocomplete/SearchAutocomplete.cjs

@@ -0,0 +1,72 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+const require_OutlinedStar = require('../../../../icons/dist/OutlinedStar.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+
+//#region ../components/dist/components/SearchAutocomplete/SearchAutocomplete.js
+const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSuggestionSelect, iconColor }) => {
+	if (results.length === 0) return null;
+	const highlightMatchingText = (text, searchQuery) => {
+		if (!searchQuery.trim()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+			variant: "body3",
+			children: text
+		});
+		const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		const regex = new RegExp(`(${escapedQuery})`, "gi");
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+			variant: "body3",
+			children: text.split(regex).map((part, index) => {
+				return part.toLowerCase() === searchQuery.toLowerCase() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+					className: "spiffy-tw-font-bold",
+					children: part
+				}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: part }, index);
+			})
+		});
+	};
+	const containerClasses = (0, classnames.default)("spiffy-tw-mt-[16px]", "spiffy-tw-mb-[8px]");
+	const getListElementClasses = (index) => (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-items-center", "spiffy-tw-cursor-pointer", "spiffy-tw-py-[8px]", "spiffy-tw-pl-[16px]", "spiffy-tw-text-[--spiffy-colors-text-primary]", "hover:spiffy-tw-bg-neutral-100", { "spiffy-tw-bg-neutral-200": focusedIndex === index });
+	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: containerClasses,
+			children: results.map((result, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				id: `option-${index}`,
+				role: "option",
+				"aria-selected": index === focusedIndex,
+				className: getListElementClasses(index),
+				onClick: () => onSuggestionSelect(result, index),
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OutlinedStar.OutlinedStar_default, {
+					className: "spiffy-tw-mr-[16px] spiffy-tw-h-[16px] spiffy-tw-w-[16px]",
+					fill: iconColor
+				}), highlightMatchingText(result, searchText)]
+			}, index))
+		})
+	});
+};
+
+//#endregion
+exports.SearchAutocomplete = SearchAutocomplete;

package/dist/packages/components/dist/components/SearchAutocomplete/SearchAutocomplete.js

@@ -0,0 +1,69 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import { OutlinedStar_default } from "../../../../icons/dist/OutlinedStar.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+
+//#region ../components/dist/components/SearchAutocomplete/SearchAutocomplete.js
+const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSuggestionSelect, iconColor }) => {
+	if (results.length === 0) return null;
+	const highlightMatchingText = (text, searchQuery) => {
+		if (!searchQuery.trim()) return /* @__PURE__ */ jsx(Typography, {
+			variant: "body3",
+			children: text
+		});
+		const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		const regex = new RegExp(`(${escapedQuery})`, "gi");
+		return /* @__PURE__ */ jsx(Typography, {
+			variant: "body3",
+			children: text.split(regex).map((part, index) => {
+				return part.toLowerCase() === searchQuery.toLowerCase() ? /* @__PURE__ */ jsx("strong", {
+					className: "spiffy-tw-font-bold",
+					children: part
+				}, index) : /* @__PURE__ */ jsx("span", { children: part }, index);
+			})
+		});
+	};
+	const containerClasses = classNames("spiffy-tw-mt-[16px]", "spiffy-tw-mb-[8px]");
+	const getListElementClasses = (index) => classNames("spiffy-tw-flex", "spiffy-tw-items-center", "spiffy-tw-cursor-pointer", "spiffy-tw-py-[8px]", "spiffy-tw-pl-[16px]", "spiffy-tw-text-[--spiffy-colors-text-primary]", "hover:spiffy-tw-bg-neutral-100", { "spiffy-tw-bg-neutral-200": focusedIndex === index });
+	return /* @__PURE__ */ 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: .2 },
+		children: /* @__PURE__ */ jsx("ul", {
+			id,
+			role: "listbox",
+			className: containerClasses,
+			children: results.map((result, index) => /* @__PURE__ */ jsxs("li", {
+				id: `option-${index}`,
+				role: "option",
+				"aria-selected": index === focusedIndex,
+				className: getListElementClasses(index),
+				onClick: () => onSuggestionSelect(result, index),
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
+				},
+				children: [/* @__PURE__ */ jsx(OutlinedStar_default, {
+					className: "spiffy-tw-mr-[16px] spiffy-tw-h-[16px] spiffy-tw-w-[16px]",
+					fill: iconColor
+				}), highlightMatchingText(result, searchText)]
+			}, index))
+		})
+	});
+};
+
+//#endregion
+export { SearchAutocomplete };

package/dist/packages/components/dist/components/SearchAutocomplete/index.cjs

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

package/dist/packages/components/dist/components/SearchAutocomplete/index.js

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

package/dist/packages/components/dist/components/SearchFilter/SearchFilter.cjs

@@ -0,0 +1,134 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_SearchFilterHeader = require('./SearchFilterHeader.cjs');
+const require_Accordion = require('../Accordion/Accordion.cjs');
+require('../Accordion/index.cjs');
+const require_ModalSheet = require('../ModalSheet/ModalSheet.cjs');
+require('../ModalSheet/index.cjs');
+const require_RadioButtonGroup = require('../RadioButtonGroup/RadioButtonGroup.cjs');
+require('../RadioButtonGroup/index.cjs');
+const require_useHasFilterStateChanged = require('./useHasFilterStateChanged.cjs');
+const require_utils = require('./utils.cjs');
+const require_ToggleButton = require('../ToggleButton/ToggleButton.cjs');
+require('../ToggleButton/index.cjs');
+const require_SearchFilterFooter = require('./SearchFilterFooter.cjs');
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/SearchFilter/SearchFilter.js
+const SortFilter = ({ filter, selectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
+	const filterTitle = filter.displayName;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
+		title: filterTitle,
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RadioButtonGroup.RadioButtonGroup, {
+			options: filter.items.map((item) => ({
+				label: item.displayName,
+				value: item.filterItemId,
+				isSelected: item.isSelected
+			})),
+			name: filterTitle,
+			onChange: (value) => {
+				const selectedItem = filter.items.find((item) => item.filterItemId === value);
+				selectFilterItem({
+					filterId: filter.filterId,
+					filterItemId: value,
+					isSelected: true,
+					displayName: selectedItem?.displayName || value
+				});
+			},
+			gap: "large",
+			textButtonGap: "large",
+			value: filter.items.find((item) => item.isSelected)?.filterItemId,
+			fillColor: radioButtonFillColor,
+			hoverColor: radioButtonHoverColor,
+			uncheckedBorderColor: radioButtonUncheckedBorderColor
+		})
+	});
+};
+const FilterItem = ({ filterId, filterItem, selectFilterItem }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
+	label: filterItem.displayName,
+	secondaryLabel: `(${filterItem.productCount})`,
+	isSelected: filterItem.isSelected,
+	onClick: () => selectFilterItem({
+		filterId,
+		filterItemId: filterItem.filterItemId,
+		isSelected: !filterItem.isSelected,
+		displayName: filterItem.displayName
+	}),
+	variant: "default"
+});
+const Filter = ({ filter, selectFilterItem }) => {
+	const filterContentClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-wrap": true,
+		"spiffy-tw-gap-[8px]": true,
+		"spiffy-tw-pb-[1px]": true
+	});
+	const selectedFilterItems = require_utils.getSelectedFilterItemsCount(filter);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
+		title: selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName,
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: filterContentClassName,
+			children: filter.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
+				filterId: filter.filterId,
+				filterItem: item,
+				selectFilterItem
+			}, item.filterItemId))
+		})
+	});
+};
+const SearchFilter = ({ filters, productCount, selectFilterItem, clearAllFilters, isOpen, setIsOpen, applyFiltersUnchangedClasses, applyFiltersChangedClasses, headerContent, footerContent, headerClassName, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant }) => {
+	const closeModal = (0, react.useCallback)(() => setIsOpen(false), [setIsOpen]);
+	const filterCount = require_utils.getTotalSelectedFilterItemsCount(filters);
+	const hasFiltersChanged = require_useHasFilterStateChanged.useHasFilterStateChanged(filters, isOpen);
+	const filterWrapperClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-gap-[16px]": true,
+		"spiffy-tw-px-[24px]": true,
+		"spiffy-tw-py-[16px]": true,
+		"spiffy-tw-max-h-screen": true,
+		"spiffy-tw-overflow-y-auto": true
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalSheet.ModalSheet, {
+		isOpen,
+		closeModal,
+		headerProps: {
+			headerContent: headerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchFilterHeader.SearchFilterHeader, {
+				closeModal,
+				productCount,
+				headerClassName: headerClassName ?? "",
+				filterCloseIconVariant
+			}),
+			chevronColor: "#000"
+		},
+		footerProps: { footerContent: footerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchFilterFooter.SearchFilterFooter, {
+			closeModal,
+			clearAllFilters,
+			filterCount,
+			hasFiltersChanged,
+			applyFiltersUnchangedClasses,
+			applyFiltersChangedClasses
+		}) },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: filterWrapperClassName,
+			children: filters.filter((filter) => filter.displayName !== "").map((filter) => {
+				if (filter.filterId === "sort") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortFilter, {
+					filter,
+					selectFilterItem,
+					radioButtonFillColor,
+					radioButtonHoverColor,
+					radioButtonUncheckedBorderColor
+				}, filter.filterId);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Filter, {
+					filter,
+					selectFilterItem
+				}, filter.filterId);
+			})
+		})
+	});
+};
+
+//#endregion
+exports.SearchFilter = SearchFilter;