@youngonesworks/ui 0.1.19 → 0.1.23

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { Button } from './components/button';
 export { buttonVariants } from './components/button/buttonVariants';
 export { Checkbox } from './components/checkbox';
 export { Divider } from './components/divider';
+export { FavouriteButton } from './components/favouriteButton';
 export { Filters } from './components/filters';
 export { GoogleAppButtonIcon } from './components/googleAppButtonIcon';
 export { HamburgerMenuButton } from './components/hamburgerMenuButton';

package/dist/index.js

@@ -103326,10 +103326,13 @@ BreadCrumb.displayName = "BreadCrumb";
 
 //#endregion
 //#region src/icons/IconLoading.tsx
-const IconLoading = (props) => /* @__PURE__ */ jsxs("svg", {
+const IconLoading = ({ className,...props }) => /* @__PURE__ */ jsxs("svg", {
 	"data-component": "button",
 	"data-testid": "loading-svg-button",
 	viewBox: "0 0 256 256",
+	width: "1em",
+	height: "1em",
+	className,
 	...props,
 	children: [
 		/* @__PURE__ */ jsx("line", {
@@ -103423,22 +103426,22 @@ const buttonVariants = {
 
 //#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]", {
+function Button({ type = "button", variant = "primary", ariaLabel, block = false, isLoading = false, icon: iconFromProps = null, iconRight = false, onClick, className, children, dataTestId,...props }) {
+	const loadingIcon = /* @__PURE__ */ jsx(IconLoading, { className: "animate-spin-slow mr-2 stroke-current" });
+	const icon = isLoading ? loadingIcon : iconFromProps;
+	const formattedIcon = icon ? formatIcon(icon, { className: clsx_default({
 		"-mr-2": iconRight,
 		"-ml-2": !iconRight
-	}) });
+	}, icon === loadingIcon ? "text-current" : "size-[1.125rem]") }) : null;
 	const handleOnClick = (event) => {
-		onClick && onClick(event);
+		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,
+		className: cn(buttonVariants[variant], className, block && "w-full text-sm"),
+		onClick: handleOnClick,
 		...props,
 		children: [
 			!iconRight && formattedIcon,
@@ -103446,12 +103449,12 @@ const Button = forwardRef(({ type = "button", variant = "primary", ariaLabel, bl
 			iconRight && formattedIcon
 		]
 	});
-});
+}
 Button.displayName = "Button";
 
 //#endregion
 //#region src/components/checkbox/index.tsx
-const Checkbox = forwardRef(({ size: size$3 = "md", className, error: error$1, mediumBoldText, label, indeterminate = false, disabled = false,...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const CheckboxComponent = ({ size: size$3 = "md", className, error: error$1, mediumBoldText, label, indeterminate = false, disabled = false,...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	className: cn("relative grid gap-2", className),
 	children: [/* @__PURE__ */ jsxs("label", {
 		className: cn("flex cursor-pointer items-center gap-3"),
@@ -103463,8 +103466,8 @@ const Checkbox = forwardRef(({ size: size$3 = "md", className, error: error$1, m
 					type: "checkbox",
 					"data-testid": "checkbox",
 					disabled,
-					ref,
-					...props
+					...props,
+					ref
 				}),
 				/* @__PURE__ */ jsx("svg", {
 					className: cn("pointer-events-none absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 stroke-white outline-hidden peer-checked:block", { "stroke-gray-300": disabled }, size$3 === "sm" ? "size-3" : "size-4"),
@@ -103502,17 +103505,35 @@ const Checkbox = forwardRef(({ size: size$3 = "md", className, error: error$1, m
 		className: "text-xs font-normal text-red-500",
 		children: error$1
 	})]
-}));
-Checkbox.displayName = "Checkbox";
+});
+const Checkbox = forwardRef(CheckboxComponent);
 
 //#endregion
 //#region src/components/divider/index.tsx
 const Divider = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "divider",
-	className: clsx_default("block h-px w-full bg-[#CCCCCC]", className),
+	className: clsx_default("block h-px w-full bg-gray-200", className),
 	...props
 });
 
+//#endregion
+//#region src/components/favouriteButton/index.tsx
+const FavouriteButton = forwardRef((props, ref) => {
+	const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-pink", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children,...rest } = props;
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		onClick,
+		"data-component": "favouriteButton",
+		title: favouriteTitle || "Favorite",
+		styleVariant,
+		className: `${favourite ? iconColorSelected : iconColor} ${className}`.trim(),
+		iconSize,
+		ref,
+		icon: favourite ? iconFilled ?? /* @__PURE__ */ jsx(IconHeartFilled, {}) : iconOutline ?? /* @__PURE__ */ jsx(IconHeart, {}),
+		...rest,
+		children
+	});
+});
+
 //#endregion
 //#region src/components/filters/FilterButton.tsx
 const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) => /* @__PURE__ */ jsxs("div", {
@@ -137799,37 +137820,8 @@ function isClassComponent(Component$1) {
 * @returns {boolean}
 */
 function isForwardRefComponent(Component$1) {
-	return !!(typeof Component$1 === "object" && Component$1.$$typeof && (Component$1.$$typeof.toString() === "Symbol(react.forward_ref)" || Component$1.$$typeof.description === "react.forward_ref"));
-}
-/**
-* Check if a component is a memoized component.
-* @param Component
-* @returns {boolean}
-*/
-function isMemoComponent(Component$1) {
-	return !!(typeof Component$1 === "object" && Component$1.$$typeof && (Component$1.$$typeof.toString() === "Symbol(react.memo)" || Component$1.$$typeof.description === "react.memo"));
-}
-/**
-* Check if a component can safely receive a ref prop.
-* This includes class components, forwardRef components, and memoized components
-* that wrap forwardRef or class components.
-* @param Component
-* @returns {boolean}
-*/
-function canReceiveRef(Component$1) {
-	if (isClassComponent(Component$1)) {
-		return true;
-	}
-	if (isForwardRefComponent(Component$1)) {
-		return true;
-	}
-	if (isMemoComponent(Component$1)) {
-		const wrappedComponent = Component$1.type;
-		if (wrappedComponent) {
-			return isClassComponent(wrappedComponent) || isForwardRefComponent(wrappedComponent);
-		}
-	}
-	return false;
+	var _a;
+	return !!(typeof Component$1 === "object" && ((_a = Component$1.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === "Symbol(react.forward_ref)");
 }
 /**
 * Check if we're running React 19+ by detecting if function components support ref props
@@ -137887,15 +137879,19 @@ var ReactRenderer = class {
 		const props = this.props;
 		const editor = this.editor;
 		const isReact19 = isReact19Plus();
-		const componentCanReceiveRef = canReceiveRef(Component$1);
+		const isClassComp = isClassComponent(Component$1);
+		const isForwardRefComp = isForwardRefComponent(Component$1);
 		const elementProps = { ...props };
-		if (elementProps.ref && !(isReact19 || componentCanReceiveRef)) {
-			delete elementProps.ref;
-		}
-		if (!elementProps.ref && (isReact19 || componentCanReceiveRef)) {
-			elementProps.ref = (ref) => {
-				this.ref = ref;
-			};
+		if (!elementProps.ref) {
+			if (isReact19) {
+				elementProps.ref = (ref) => {
+					this.ref = ref;
+				};
+			} else if (isClassComp || isForwardRefComp) {
+				elementProps.ref = (ref) => {
+					this.ref = ref;
+				};
+			}
 		}
 		this.reactElement = React.createElement(Component$1, { ...elementProps });
 		(_a = editor === null || editor === void 0 ? void 0 : editor.contentComponent) === null || _a === void 0 ? void 0 : _a.setRenderer(this.id, this);
@@ -140314,5 +140310,5 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 });
 
 //#endregion
-export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Button, 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, buttonVariants };
+export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Button, Checkbox, Divider, FavouriteButton, 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, buttonVariants };
 //# sourceMappingURL=index.js.map