@youngonesworks/ui 0.1.19 → 0.1.23

package/dist/components/button/index.d.ts

@@ -1,6 +1,6 @@
 import { type ButtonHTMLAttributes, type ReactNode } from 'react';
 import { buttonVariants } from './buttonVariants';
-interface IButton extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     variant?: keyof typeof buttonVariants;
     ariaLabel?: string;
     isLoading?: boolean;
@@ -8,6 +8,9 @@ interface IButton extends ButtonHTMLAttributes<HTMLButtonElement> {
     dataTestId?: string;
     icon?: ReactNode;
     iconRight?: boolean;
+    children?: ReactNode;
+}
+export declare function Button({ type, variant, ariaLabel, block, isLoading, icon: iconFromProps, iconRight, onClick, className, children, dataTestId, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Button {
+    var displayName: string;
 }
-export declare const Button: import("react").ForwardRefExoticComponent<IButton & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/components/checkbox/index.d.ts

@@ -1,11 +1,13 @@
-import { type InputHTMLAttributes, type ReactNode } from 'react';
-export interface ICheckbox extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'disabled'> {
-    size?: 'sm' | 'md';
-    mediumBoldText?: boolean;
-    label?: ReactNode;
-    disabled?: boolean;
+import { type JSX } from 'react';
+interface ICheckbox extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     className?: string;
-    indeterminate?: boolean;
+    mediumBoldText?: boolean;
     error?: string;
+    label?: React.ReactNode;
+    indeterminate?: boolean;
+    size?: 'sm' | 'md';
 }
-export declare const Checkbox: import("react").ForwardRefExoticComponent<ICheckbox & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: (props: ICheckbox & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => JSX.Element;
+export {};

package/dist/components/favouriteButton/index.d.ts

@@ -1,17 +1,9 @@
-import { type ReactNode } from 'react';
-interface IFavouriteButtonProps {
+import { type JSX, type ReactNode } from 'react';
+interface IFavouriteButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'size'> {
     onClick: () => void;
     favourite: boolean;
     iconOutline?: ReactNode;
     iconFilled?: ReactNode;
-    /**
-     * @deprecated Can be removed and replaced by iconSize
-     */
-    width?: string;
-    /**
-     * @deprecated Can be removed and replaced by iconSize
-     */
-    height?: string;
     iconSize?: number;
     className?: string;
     favouriteTitle?: string;
@@ -19,6 +11,9 @@ interface IFavouriteButtonProps {
     iconColor?: string;
     iconColorSelected?: string;
     styleVariant?: 'transparent' | 'small' | 'default' | 'round' | undefined;
+    children?: React.ReactNode;
 }
-export declare const FavouriteButton: import("react").ForwardRefExoticComponent<IFavouriteButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
+export declare const FavouriteButton: (props: IFavouriteButtonProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => JSX.Element;
 export {};

package/dist/icons/IconLoading.d.ts

@@ -1,2 +1,2 @@
 import { type SVGProps } from 'react';
-export declare const IconLoading: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const IconLoading: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/index.cjs

@@ -103324,10 +103324,13 @@ BreadCrumb.displayName = "BreadCrumb";
 
 //#endregion
 //#region src/icons/IconLoading.tsx
-const IconLoading = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const IconLoading = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 	"data-component": "button",
 	"data-testid": "loading-svg-button",
 	viewBox: "0 0 256 256",
+	width: "1em",
+	height: "1em",
+	className,
 	...props,
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
@@ -103421,22 +103424,22 @@ const buttonVariants = {
 
 //#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]", {
+function Button({ type = "button", variant = "primary", ariaLabel, block = false, isLoading = false, icon: iconFromProps = null, iconRight = false, onClick, className, children, dataTestId,...props }) {
+	const loadingIcon = /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (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,
+		className: cn(buttonVariants[variant], className, block && "w-full text-sm"),
+		onClick: handleOnClick,
 		...props,
 		children: [
 			!iconRight && formattedIcon,
@@ -103444,12 +103447,12 @@ const Button = (0, react.forwardRef)(({ type = "button", variant = "primary", ar
 			iconRight && formattedIcon
 		]
 	});
-});
+}
 Button.displayName = "Button";
 
 //#endregion
 //#region src/components/checkbox/index.tsx
-const Checkbox = (0, react.forwardRef)(({ size: size$3 = "md", className, error: error$1, mediumBoldText, label, indeterminate = false, disabled = false,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+const CheckboxComponent = ({ size: size$3 = "md", className, error: error$1, mediumBoldText, label, indeterminate = false, disabled = false,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: cn("relative grid gap-2", className),
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		className: cn("flex cursor-pointer items-center gap-3"),
@@ -103461,8 +103464,8 @@ const Checkbox = (0, react.forwardRef)(({ size: size$3 = "md", className, error:
 					type: "checkbox",
 					"data-testid": "checkbox",
 					disabled,
-					ref,
-					...props
+					...props,
+					ref
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.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"),
@@ -103500,17 +103503,35 @@ const Checkbox = (0, react.forwardRef)(({ size: size$3 = "md", className, error:
 		className: "text-xs font-normal text-red-500",
 		children: error$1
 	})]
-}));
-Checkbox.displayName = "Checkbox";
+});
+const Checkbox = (0, react.forwardRef)(CheckboxComponent);
 
 //#endregion
 //#region src/components/divider/index.tsx
 const Divider = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.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__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+		onClick,
+		"data-component": "favouriteButton",
+		title: favouriteTitle || "Favorite",
+		styleVariant,
+		className: `${favourite ? iconColorSelected : iconColor} ${className}`.trim(),
+		iconSize,
+		ref,
+		icon: favourite ? iconFilled ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconHeartFilled, {}) : iconOutline ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconHeart, {}),
+		...rest,
+		children
+	});
+});
+
 //#endregion
 //#region src/components/filters/FilterButton.tsx
 const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -111924,9 +111945,9 @@ var jsx = function jsx$3(type, props) {
 	}
 	return react.createElement.apply(null, createElementArgArray);
 };
-(function(_jsx$65) {
+(function(_jsx$66) {
 	var JSX;
-	(function(_JSX) {})(JSX || (JSX = _jsx$65.JSX || (_jsx$65.JSX = {})));
+	(function(_JSX) {})(JSX || (JSX = _jsx$66.JSX || (_jsx$66.JSX = {})));
 })(jsx || (jsx = {}));
 var Global = /* @__PURE__ */ withEmotionCache(function(props, cache) {
 	var styles = props.styles;
@@ -137797,37 +137818,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
@@ -137885,15 +137877,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.default.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);
@@ -140326,6 +140322,7 @@ exports.BreadCrumb = BreadCrumb;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.Divider = Divider;
+exports.FavouriteButton = FavouriteButton;
 exports.Filters = Filters;
 exports.GoogleAppButtonIcon = GoogleAppButtonIcon;
 exports.HR = HR;