@youngonesworks/ui 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -103385,6 +103385,204 @@ const Divider = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtim
 	...props
 });
 
+//#endregion
+//#region src/icons/IconLoading.tsx
+const IconLoading = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	"data-component": "button",
+	"data-testid": "loading-svg-button",
+	viewBox: "0 0 256 256",
+	...props,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "128",
+			y1: "32",
+			x2: "128",
+			y2: "64",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "195.9",
+			y1: "60.1",
+			x2: "173.3",
+			y2: "82.7",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "224",
+			y1: "128",
+			x2: "192",
+			y2: "128",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "195.9",
+			y1: "195.9",
+			x2: "173.3",
+			y2: "173.3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "128",
+			y1: "224",
+			x2: "128",
+			y2: "192",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "60.1",
+			y1: "195.9",
+			x2: "82.7",
+			y2: "173.3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "32",
+			y1: "128",
+			x2: "64",
+			y2: "128",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "60.1",
+			y1: "60.1",
+			x2: "82.7",
+			y2: "82.7",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		})
+	]
+});
+
+//#endregion
+//#region src/components/button/buttonVariants.ts
+const defaultButtonStyling = "justify-center group relative flex items-center gap-2 cursor-pointer border rounded py-2 px-5  text-sx md:text-sm md:font-medium font-medium hover:outline-hidden focus:outline-hidden disabled:cursor-not-allowed transition-colors duration-100 ease-in-out";
+const buttonVariants = {
+	primary: clsx_default(defaultButtonStyling, "border-transparent bg-primary text-black hover:bg-turquoise-700 hover:fill-white disabled:bg-turquoise-100 disabled:text-gray-800 disabled:hover:bg-turquoise-100"),
+	secondary: clsx_default(defaultButtonStyling, "border-solid border-gray-200 bg-white text-black hover:border-gray-800 hover:bg-gray-50 hover:fill-white disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
+	danger: clsx_default(defaultButtonStyling, "border-transparent bg-red-500 text-white hover:bg-red-700 disabled:bg-red-100 disabled:hover:bg-red-100"),
+	link: clsx_default(defaultButtonStyling, "border-transparent bg-transparent text-accent-blue hover:bg-gray-50 disabled:bg-transparent disabled:text-gray-800 disabled:hover:bg-transparent"),
+	outline: clsx_default(defaultButtonStyling, "border-solid border-gray-200 bg-transparent text-white hover:border-gray-800 hover:bg-[rgba(255,255,255,0.1)] disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
+	search: clsx_default(defaultButtonStyling, "absolute top-0 right-0 h-full w-[50px] border-0 bg-transparent bg-no-repeat"),
+	icon__primary: clsx_default(defaultButtonStyling, "flex! items-center justify-center"),
+	icon__danger: clsx_default(defaultButtonStyling, "flex! items-center justify-center")
+};
+
+//#endregion
+//#region src/components/button/index.tsx
+const Button = (0, react.forwardRef)(({ type = "button", variant = "primary", ariaLabel, block = false, isLoading = false, icon: iconFromProps = null, iconRight = false, onClick, className, children, dataTestId,...props }, ref) => {
+	const icon = isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLoading, { className: "animate-spin-slow mr-2 stroke-current" }) : iconFromProps;
+	const formattedIcon = formatIcon(icon, { className: clsx_default("size-[1.125rem]", {
+		"-mr-2": iconRight,
+		"-ml-2": !iconRight
+	}) });
+	const handleOnClick = (event) => {
+		onClick && onClick(event);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type,
+		"aria-label": ariaLabel,
+		"data-testid": dataTestId,
+		className: cn(buttonVariants[variant], className, block && "w-full"),
+		onClick: (event) => handleOnClick(event),
+		ref,
+		...props,
+		children: [
+			!iconRight && formattedIcon,
+			children,
+			iconRight && formattedIcon
+		]
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+//#region src/components/filters/FilterButton.tsx
+const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: "flex gap-3",
+	"data-testid": "filterButton",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+		onClick,
+		variant: "secondary",
+		className: "font-normal md:font-normal",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconFilter, { stroke: 1 }),
+		children: filtersText
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
+		className: "text-sm font-normal disabled:text-gray-500",
+		onClick: reset,
+		disabled: !hasFilters,
+		children: resetText
+	})]
+});
+
+//#endregion
+//#region src/components/filters/FilterItem.tsx
+const FilterItem = ({ title, isActive: isActive$1 = false, onClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+	className: cn("has-checked:border-primary has-checked:bg-turquoise-100 flex cursor-pointer items-center gap-3 rounded-full border border-gray-200 px-7 py-1.5 text-sm leading-6 font-normal transition-all duration-300 ease-in-out hover:bg-gray-50"),
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		type: "checkbox",
+		className: "hidden",
+		onChange: onClick,
+		checked: isActive$1
+	}), title]
+});
+
+//#endregion
+//#region src/components/filters/index.tsx
+const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, filtersText, resetText }) => {
+	const content = (0, react.useRef)(null);
+	const [showFilters, setShowFilters] = (0, react.useState)(false);
+	const onFilter = (filter) => {
+		if (selectedFilters.includes(filter)) setFilters(selectedFilters.filter((f$1) => f$1 !== filter));
+		else setFilters([...selectedFilters, filter]);
+	};
+	(0, react.useEffect)(() => {
+		setShowFilters(selectedFilters.length > 0);
+	}, [selectedFilters]);
+	const onReset = () => {
+		setFilters([]);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "grid justify-end gap-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-end gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-medium",
+				children: selectedFiltersText
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterButton, {
+				onClick: () => setShowFilters(!showFilters),
+				hasFilters: selectedFilters.length > 0,
+				reset: () => onReset(),
+				filtersText,
+				resetText
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: content,
+			className: cn("flex flex-wrap justify-end gap-2 overflow-hidden opacity-0 ease-in-out [transition:max-height_0.4s,opacity_0.3s]", showFilters && "opacity-100"),
+			style: { maxHeight: showFilters ? `${content?.current?.scrollHeight}px` : "0px" },
+			children: filters.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
+				title: filter,
+				isActive: selectedFilters.includes(filter),
+				onClick: () => onFilter(filter)
+			}, filter))
+		})]
+	});
+};
+
 //#endregion
 //#region src/components/googleAppButtonIcon/index.tsx
 const GoogleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
@@ -109509,89 +109707,6 @@ const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, cl
 });
 RadioButton.displayName = "RadioButton";
 
-//#endregion
-//#region src/icons/IconLoading.tsx
-const IconLoading = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-	"data-component": "button",
-	"data-testid": "loading-svg-button",
-	viewBox: "0 0 256 256",
-	...props,
-	children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "128",
-			y1: "32",
-			x2: "128",
-			y2: "64",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "195.9",
-			y1: "60.1",
-			x2: "173.3",
-			y2: "82.7",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "224",
-			y1: "128",
-			x2: "192",
-			y2: "128",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "195.9",
-			y1: "195.9",
-			x2: "173.3",
-			y2: "173.3",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "128",
-			y1: "224",
-			x2: "128",
-			y2: "192",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "60.1",
-			y1: "195.9",
-			x2: "82.7",
-			y2: "173.3",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "32",
-			y1: "128",
-			x2: "64",
-			y2: "128",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "60.1",
-			y1: "60.1",
-			x2: "82.7",
-			y2: "82.7",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		})
-	]
-});
-
 //#endregion
 //#region src/icons/IconStarEmpty.tsx
 const IconStarEmpty = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
@@ -111809,9 +111924,9 @@ var jsx = function jsx$3(type, props) {
 	}
 	return react.createElement.apply(null, createElementArgArray);
 };
-(function(_jsx$61) {
+(function(_jsx$65) {
 	var JSX;
-	(function(_JSX) {})(JSX || (JSX = _jsx$61.JSX || (_jsx$61.JSX = {})));
+	(function(_JSX) {})(JSX || (JSX = _jsx$65.JSX || (_jsx$65.JSX = {})));
 })(jsx || (jsx = {}));
 var Global = /* @__PURE__ */ withEmotionCache(function(props, cache) {
 	var styles = props.styles;
@@ -136733,7 +136848,7 @@ function requireUseSyncExternalStoreShim_development() {
 				return x$2 === y$2 && (x$2 !== 0 || 1 / x$2 === 1 / y$2) || x$2 !== x$2 && y$2 !== y$2;
 			}
 			var objectIs = typeof Object.is === "function" ? Object.is : is;
-			var useState$12 = React$1$1.useState, useEffect$9 = React$1$1.useEffect, useLayoutEffect$4 = React$1$1.useLayoutEffect, useDebugValue$1 = React$1$1.useDebugValue;
+			var useState$13 = React$1$1.useState, useEffect$10 = React$1$1.useEffect, useLayoutEffect$4 = React$1$1.useLayoutEffect, useDebugValue$1 = React$1$1.useDebugValue;
 			var didWarnOld18Alpha = false;
 			var didWarnUncachedGetSnapshot = false;
 			function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
@@ -136755,7 +136870,7 @@ function requireUseSyncExternalStoreShim_development() {
 						}
 					}
 				}
-				var _useState = useState$12({ inst: {
+				var _useState = useState$13({ inst: {
 					value,
 					getSnapshot
 				} }), inst = _useState[0].inst, forceUpdate = _useState[1];
@@ -136770,7 +136885,7 @@ function requireUseSyncExternalStoreShim_development() {
 					value,
 					getSnapshot
 				]);
-				useEffect$9(function() {
+				useEffect$10(function() {
 					if (checkIfSnapshotChanged(inst)) {
 						forceUpdate({ inst });
 					}
@@ -137091,9 +137206,9 @@ function requireWithSelector_development() {
 			}
 			var objectIs = typeof Object.is === "function" ? Object.is : is;
 			var useSyncExternalStore = shim$1.useSyncExternalStore;
-			var useRef$5 = React$1$1.useRef, useEffect$9 = React$1$1.useEffect, useMemo$3 = React$1$1.useMemo, useDebugValue$1 = React$1$1.useDebugValue;
+			var useRef$6 = React$1$1.useRef, useEffect$10 = React$1$1.useEffect, useMemo$3 = React$1$1.useMemo, useDebugValue$1 = React$1$1.useDebugValue;
 			function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual$1) {
-				var instRef = useRef$5(null);
+				var instRef = useRef$6(null);
 				var inst;
 				if (instRef.current === null) {
 					inst = {
@@ -137153,7 +137268,7 @@ function requireWithSelector_development() {
 					isEqual$1
 				]), getSelection$1 = _useMemo[0], getServerSelection = _useMemo[1];
 				var value = useSyncExternalStore(subscribe, getSelection$1, getServerSelection);
-				useEffect$9(function() {
+				useEffect$10(function() {
 					inst.hasValue = true;
 					inst.value = value;
 				}, [value]);
@@ -140185,6 +140300,7 @@ exports.BigBadge = BigBadge;
 exports.BreadCrumb = BreadCrumb;
 exports.Checkbox = Checkbox;
 exports.Divider = Divider;
+exports.Filters = Filters;
 exports.GoogleAppButtonIcon = GoogleAppButtonIcon;
 exports.HR = HR;
 exports.HamburgerMenuButton = HamburgerMenuButton;