@youngonesworks/ui 0.1.10 → 0.1.11

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { BigBadge } from './components/bigBadge';
 export { BreadCrumb } from './components/breadCrumb';
 export { Checkbox } from './components/checkbox';
 export { Divider } from './components/divider';
+export { Filters } from './components/filters';
 export { GoogleAppButtonIcon } from './components/googleAppButtonIcon';
 export { HamburgerMenuButton } from './components/hamburgerMenuButton';
 export { HR } from './components/hr';

package/dist/index.js

@@ -103387,6 +103387,204 @@ const Divider = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
 	...props
 });
 
+//#endregion
+//#region src/icons/IconLoading.tsx
+const IconLoading = (props) => /* @__PURE__ */ jsxs("svg", {
+	"data-component": "button",
+	"data-testid": "loading-svg-button",
+	viewBox: "0 0 256 256",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("line", {
+			x1: "128",
+			y1: "32",
+			x2: "128",
+			y2: "64",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "195.9",
+			y1: "60.1",
+			x2: "173.3",
+			y2: "82.7",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "224",
+			y1: "128",
+			x2: "192",
+			y2: "128",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "195.9",
+			y1: "195.9",
+			x2: "173.3",
+			y2: "173.3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "128",
+			y1: "224",
+			x2: "128",
+			y2: "192",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "60.1",
+			y1: "195.9",
+			x2: "82.7",
+			y2: "173.3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "32",
+			y1: "128",
+			x2: "64",
+			y2: "128",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ 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 = 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__ */ 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__ */ 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__ */ jsxs("div", {
+	className: "flex gap-3",
+	"data-testid": "filterButton",
+	children: [/* @__PURE__ */ jsx(Button, {
+		onClick,
+		variant: "secondary",
+		className: "font-normal md:font-normal",
+		icon: /* @__PURE__ */ jsx(IconFilter, { stroke: 1 }),
+		children: filtersText
+	}), /* @__PURE__ */ 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__ */ 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__ */ 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 = useRef(null);
+	const [showFilters, setShowFilters] = useState(false);
+	const onFilter = (filter) => {
+		if (selectedFilters.includes(filter)) setFilters(selectedFilters.filter((f$1) => f$1 !== filter));
+		else setFilters([...selectedFilters, filter]);
+	};
+	useEffect(() => {
+		setShowFilters(selectedFilters.length > 0);
+	}, [selectedFilters]);
+	const onReset = () => {
+		setFilters([]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid justify-end gap-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-end gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium",
+				children: selectedFiltersText
+			}), /* @__PURE__ */ jsx(FilterButton, {
+				onClick: () => setShowFilters(!showFilters),
+				hasFilters: selectedFilters.length > 0,
+				reset: () => onReset(),
+				filtersText,
+				resetText
+			})]
+		}), /* @__PURE__ */ 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__ */ jsx(FilterItem, {
+				title: filter,
+				isActive: selectedFilters.includes(filter),
+				onClick: () => onFilter(filter)
+			}, filter))
+		})]
+	});
+};
+
 //#endregion
 //#region src/components/googleAppButtonIcon/index.tsx
 const GoogleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
@@ -109511,89 +109709,6 @@ const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, cl
 });
 RadioButton.displayName = "RadioButton";
 
-//#endregion
-//#region src/icons/IconLoading.tsx
-const IconLoading = (props) => /* @__PURE__ */ jsxs("svg", {
-	"data-component": "button",
-	"data-testid": "loading-svg-button",
-	viewBox: "0 0 256 256",
-	...props,
-	children: [
-		/* @__PURE__ */ jsx("line", {
-			x1: "128",
-			y1: "32",
-			x2: "128",
-			y2: "64",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "195.9",
-			y1: "60.1",
-			x2: "173.3",
-			y2: "82.7",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "224",
-			y1: "128",
-			x2: "192",
-			y2: "128",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "195.9",
-			y1: "195.9",
-			x2: "173.3",
-			y2: "173.3",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "128",
-			y1: "224",
-			x2: "128",
-			y2: "192",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "60.1",
-			y1: "195.9",
-			x2: "82.7",
-			y2: "173.3",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "32",
-			y1: "128",
-			x2: "64",
-			y2: "128",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ 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__ */ jsx("svg", {
@@ -140174,5 +140289,5 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 });
 
 //#endregion
-export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Checkbox, Divider, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, Label, LinkText, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, Popover, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TextInput, Textarea, ThemeIcon, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor };
+export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Checkbox, Divider, Filters, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, Label, LinkText, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, Popover, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TextInput, Textarea, ThemeIcon, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor };
 //# sourceMappingURL=index.js.map