@envive-ai/react-toolkit 0.1.1 → 0.1.2

package/dist/AppliedFiltersScrollbar-BlcyhZkZ.cjs

@@ -0,0 +1,53 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Text = require('./Text-C04c4Z93.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);
+let react_indiana_drag_scroll = require("react-indiana-drag-scroll");
+react_indiana_drag_scroll = require_chunk.__toESM(react_indiana_drag_scroll);
+
+//#region src/components/search/FilterScrollbar/AppliedFiltersScrollbar.tsx
+const AppliedFiltersScrollbar = ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter }) => {
+	if (selectedFilterOptions.length === 0) return null;
+	const filterDefaultWithoutBg = filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim();
+	const buttonClasses = (0, classnames.default)(" 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";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_indiana_drag_scroll.default, {
+		className: filterBarClassNames,
+		hideScrollbars: true,
+		children: selectedFilterOptions.map((filter) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: buttonClasses,
+				type: "button",
+				onClick: () => onRemoveFilter(filter),
+				"aria-label": `Remove filter: ${filter.displayName}`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+						variant: "body3",
+						children: filter.displayName
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "10",
+						height: "10",
+						viewBox: "0 0 10 10",
+						fill: "none",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.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);
+		})
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'AppliedFiltersScrollbar', {
+  enumerable: true,
+  get: function () {
+    return AppliedFiltersScrollbar;
+  }
+});

package/dist/AppliedFiltersScrollbar-DFGzRemu.js

@@ -0,0 +1,44 @@
+import { Text } from "./Text-Bdv7F5-u.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ScrollContainer from "react-indiana-drag-scroll";
+
+//#region src/components/search/FilterScrollbar/AppliedFiltersScrollbar.tsx
+const AppliedFiltersScrollbar = ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter }) => {
+	if (selectedFilterOptions.length === 0) return null;
+	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";
+	return /* @__PURE__ */ jsx(ScrollContainer, {
+		className: filterBarClassNames,
+		hideScrollbars: true,
+		children: selectedFilterOptions.map((filter) => {
+			return /* @__PURE__ */ jsx("button", {
+				className: buttonClasses,
+				type: "button",
+				onClick: () => onRemoveFilter(filter),
+				"aria-label": `Remove filter: ${filter.displayName}`,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]",
+					children: [/* @__PURE__ */ jsx(Text, {
+						variant: "body3",
+						children: filter.displayName
+					}), /* @__PURE__ */ jsx("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "10",
+						height: "10",
+						viewBox: "0 0 10 10",
+						fill: "none",
+						children: /* @__PURE__ */ 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);
+		})
+	});
+};
+
+//#endregion
+export { AppliedFiltersScrollbar };

package/dist/ButtonBase-C1rsL9gO.js

@@ -0,0 +1,60 @@
+import { Text } from "./Text-Bdv7F5-u.js";
+import classNames from "classnames";
+import { createElement, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/common/ButtonBase/types.ts
+let ButtonBaseOverrides = /* @__PURE__ */ function(ButtonBaseOverrides$1) {
+	ButtonBaseOverrides$1["BUTTON"] = "spiffy-button-base-button";
+	ButtonBaseOverrides$1["BUTTON_TEXT"] = "spiffy-button-base-button-text";
+	ButtonBaseOverrides$1["BUTTON_ICON"] = "spiffy-button-base-button-icon";
+	return ButtonBaseOverrides$1;
+}({});
+
+//#endregion
+//#region src/components/common/ButtonBase/ButtonBase.tsx
+const ButtonBase = ({ type = "button", isDisabled = false, dataAttributes, buttonClass, text, textClass, icon, iconClass = "spiffy-tw-w-[21px] spiffy-tw-h-[21px]", dataTestId, onClick, disablePadding = false }) => {
+	const buttonRef = useRef(null);
+	const buttonClassName = classNames({
+		[ButtonBaseOverrides.BUTTON]: true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-min-h-[36px]": true,
+		"spiffy-tw-cursor-pointer": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-gap-2": true,
+		"spiffy-tw-px-4": !disablePadding,
+		"spiffy-tw-transition-colors": true,
+		"spiffy-tw-opacity-40": isDisabled,
+		"spiffy-tw-cursor-not-allowed": isDisabled,
+		[`${buttonClass}`]: buttonClass != null
+	});
+	const textClassName = classNames({
+		[ButtonBaseOverrides.BUTTON_TEXT]: true,
+		"spiffy-tw-whitespace-nowrap": true,
+		[`${textClass}`]: textClass != null
+	});
+	const iconClassName = classNames({
+		[ButtonBaseOverrides.BUTTON_ICON]: true,
+		[`${iconClass}`]: iconClass != null
+	});
+	useEffect(() => {
+		if (dataAttributes && buttonRef.current) Object.entries(dataAttributes).forEach(([key, value]) => {
+			buttonRef.current?.setAttribute(key, value);
+		});
+	}, [dataAttributes]);
+	return /* @__PURE__ */ jsxs("button", {
+		type,
+		ref: buttonRef,
+		className: buttonClassName,
+		disabled: isDisabled,
+		"data-testid": dataTestId,
+		onClick,
+		children: [icon && createElement(icon, { className: iconClassName }), /* @__PURE__ */ jsx(Text, {
+			className: textClassName,
+			children: text
+		})]
+	});
+};
+
+//#endregion
+export { ButtonBase };

package/dist/ButtonBase-a8uj6c2f.cjs

@@ -0,0 +1,69 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Text = require('./Text-C04c4Z93.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/components/common/ButtonBase/types.ts
+let ButtonBaseOverrides = /* @__PURE__ */ function(ButtonBaseOverrides$1) {
+	ButtonBaseOverrides$1["BUTTON"] = "spiffy-button-base-button";
+	ButtonBaseOverrides$1["BUTTON_TEXT"] = "spiffy-button-base-button-text";
+	ButtonBaseOverrides$1["BUTTON_ICON"] = "spiffy-button-base-button-icon";
+	return ButtonBaseOverrides$1;
+}({});
+
+//#endregion
+//#region src/components/common/ButtonBase/ButtonBase.tsx
+const ButtonBase = ({ type = "button", isDisabled = false, dataAttributes, buttonClass, text, textClass, icon, iconClass = "spiffy-tw-w-[21px] spiffy-tw-h-[21px]", dataTestId, onClick, disablePadding = false }) => {
+	const buttonRef = (0, react.useRef)(null);
+	const buttonClassName = (0, classnames.default)({
+		[ButtonBaseOverrides.BUTTON]: true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-min-h-[36px]": true,
+		"spiffy-tw-cursor-pointer": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-gap-2": true,
+		"spiffy-tw-px-4": !disablePadding,
+		"spiffy-tw-transition-colors": true,
+		"spiffy-tw-opacity-40": isDisabled,
+		"spiffy-tw-cursor-not-allowed": isDisabled,
+		[`${buttonClass}`]: buttonClass != null
+	});
+	const textClassName = (0, classnames.default)({
+		[ButtonBaseOverrides.BUTTON_TEXT]: true,
+		"spiffy-tw-whitespace-nowrap": true,
+		[`${textClass}`]: textClass != null
+	});
+	const iconClassName = (0, classnames.default)({
+		[ButtonBaseOverrides.BUTTON_ICON]: true,
+		[`${iconClass}`]: iconClass != null
+	});
+	(0, react.useEffect)(() => {
+		if (dataAttributes && buttonRef.current) Object.entries(dataAttributes).forEach(([key, value]) => {
+			buttonRef.current?.setAttribute(key, value);
+		});
+	}, [dataAttributes]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type,
+		ref: buttonRef,
+		className: buttonClassName,
+		disabled: isDisabled,
+		"data-testid": dataTestId,
+		onClick,
+		children: [icon && (0, react.createElement)(icon, { className: iconClassName }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+			className: textClassName,
+			children: text
+		})]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'ButtonBase', {
+  enumerable: true,
+  get: function () {
+    return ButtonBase;
+  }
+});

package/dist/DynamicFiltersScrollbar-B2Rr1KnJ.cjs

@@ -0,0 +1,41 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Text = require('./Text-C04c4Z93.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);
+let react_indiana_drag_scroll = require("react-indiana-drag-scroll");
+react_indiana_drag_scroll = require_chunk.__toESM(react_indiana_drag_scroll);
+
+//#region src/components/search/FilterScrollbar/DynamicFiltersScrollbar.tsx
+const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames, filterDefaultClasses, filterHoverClasses, onToggleDynamicFilter }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_indiana_drag_scroll.default, {
+		className: filterBarClassNames,
+		hideScrollbars: true,
+		children: availableDynamicFilters.map(({ name, displayName }) => {
+			const buttonClasses = (0, classnames.default)("spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ", filterHoverClasses, filterDefaultClasses);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: buttonClasses,
+				onClick: () => {
+					onToggleDynamicFilter({
+						filter: name,
+						dynamicFilterDisplayName: displayName
+					});
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+					variant: "body3",
+					children: displayName
+				})
+			}, name);
+		})
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'DynamicFiltersScrollbar', {
+  enumerable: true,
+  get: function () {
+    return DynamicFiltersScrollbar;
+  }
+});

package/dist/DynamicFiltersScrollbar-Dys6geP0.js

@@ -0,0 +1,32 @@
+import { Text } from "./Text-Bdv7F5-u.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import ScrollContainer from "react-indiana-drag-scroll";
+
+//#region src/components/search/FilterScrollbar/DynamicFiltersScrollbar.tsx
+const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames, filterDefaultClasses, filterHoverClasses, onToggleDynamicFilter }) => {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: buttonClasses,
+				onClick: () => {
+					onToggleDynamicFilter({
+						filter: name,
+						dynamicFilterDisplayName: displayName
+					});
+				},
+				children: /* @__PURE__ */ jsx(Text, {
+					variant: "body3",
+					children: displayName
+				})
+			}, name);
+		})
+	});
+};
+
+//#endregion
+export { DynamicFiltersScrollbar };

package/dist/Headline-L7w3BsBF.cjs

@@ -0,0 +1,72 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_textVariantClasses = require('./textVariantClasses-Bhf4VY5z.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/common/Headline/Headline.tsx
+const Headline = ({ children, className, style, testId, variant = "h1" }) => {
+	const variantClassNames = variant ? require_textVariantClasses.HeadlineVariantMap[variant] : {};
+	const textClassNames = (0, classnames.default)(className, variantClassNames, { "spiffy-tw-font-[Poppins,sans-serif]": true });
+	const T1 = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const T2 = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const T3 = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const H1 = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const H2 = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const H3 = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const H4 = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	switch (variant) {
+		case "t1": return T1();
+		case "t2": return T2();
+		case "t3": return T3();
+		case "h1": return H1();
+		case "h2": return H2();
+		case "h3": return H3();
+		case "h4": return H4();
+		default: throw new Error(`Invalid variant: ${variant}`);
+	}
+};
+
+//#endregion
+Object.defineProperty(exports, 'Headline', {
+  enumerable: true,
+  get: function () {
+    return Headline;
+  }
+});

package/dist/Headline-ro_Nigw5.js

@@ -0,0 +1,64 @@
+import { HeadlineVariantMap } from "./textVariantClasses-5t3OricK.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/common/Headline/Headline.tsx
+const Headline = ({ children, className, style, testId, variant = "h1" }) => {
+	const variantClassNames = variant ? HeadlineVariantMap[variant] : {};
+	const textClassNames = classNames(className, variantClassNames, { "spiffy-tw-font-[Poppins,sans-serif]": true });
+	const T1 = () => /* @__PURE__ */ jsx("h1", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const T2 = () => /* @__PURE__ */ jsx("h2", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const T3 = () => /* @__PURE__ */ jsx("h3", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const H1 = () => /* @__PURE__ */ jsx("h1", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const H2 = () => /* @__PURE__ */ jsx("h2", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const H3 = () => /* @__PURE__ */ jsx("h3", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	const H4 = () => /* @__PURE__ */ jsx("h4", {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		children
+	});
+	switch (variant) {
+		case "t1": return T1();
+		case "t2": return T2();
+		case "t3": return T3();
+		case "h1": return H1();
+		case "h2": return H2();
+		case "h3": return H3();
+		case "h4": return H4();
+		default: throw new Error(`Invalid variant: ${variant}`);
+	}
+};
+
+//#endregion
+export { Headline };

package/dist/ImageWithFallback-CfmkC58B.js

@@ -0,0 +1,42 @@
+import classNames from "classnames";
+import React, { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/common/ImageWithFallback/ImageWithFallback.tsx
+const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError }) => {
+	const [isLoaded, setIsLoaded] = useState(false);
+	const [isError, setIsError] = useState(false);
+	const imageExtraClassnames = classNames(imageClassnames, {
+		"spiffy-tw-block": isLoaded,
+		"spiffy-tw-hidden": !isLoaded
+	});
+	const fallbackMergedClassNames = classNames({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-items-center": true
+	}, fallbackClassnames);
+	if (isError) return /* @__PURE__ */ jsx("div", {
+		className: fallbackMergedClassNames,
+		children: fallback
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [!isLoaded && /* @__PURE__ */ jsx("div", {
+		className: fallbackMergedClassNames,
+		children: fallback
+	}), /* @__PURE__ */ jsx("img", {
+		src,
+		className: imageExtraClassnames,
+		"data-testid": dataTestId,
+		alt,
+		onLoad: () => {
+			setIsLoaded(true);
+			onLoad?.();
+		},
+		onError: () => {
+			setIsError(true);
+			onError?.();
+		}
+	})] });
+};
+
+//#endregion
+export { ImageWithFallback };

package/dist/ImageWithFallback-P3AjyL2Y.cjs

@@ -0,0 +1,51 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/components/common/ImageWithFallback/ImageWithFallback.tsx
+const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError }) => {
+	const [isLoaded, setIsLoaded] = (0, react.useState)(false);
+	const [isError, setIsError] = (0, react.useState)(false);
+	const imageExtraClassnames = (0, classnames.default)(imageClassnames, {
+		"spiffy-tw-block": isLoaded,
+		"spiffy-tw-hidden": !isLoaded
+	});
+	const fallbackMergedClassNames = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-items-center": true
+	}, fallbackClassnames);
+	if (isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: fallbackMergedClassNames,
+		children: fallback
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!isLoaded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: fallbackMergedClassNames,
+		children: fallback
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src,
+		className: imageExtraClassnames,
+		"data-testid": dataTestId,
+		alt,
+		onLoad: () => {
+			setIsLoaded(true);
+			onLoad?.();
+		},
+		onError: () => {
+			setIsError(true);
+			onError?.();
+		}
+	})] });
+};
+
+//#endregion
+Object.defineProperty(exports, 'ImageWithFallback', {
+  enumerable: true,
+  get: function () {
+    return ImageWithFallback;
+  }
+});