@youngonesworks/ui 0.1.20 → 0.1.23

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/index.cjs

@@ -103438,7 +103438,7 @@ function Button({ type = "button", variant = "primary", ariaLabel, block = false
 		type,
 		"aria-label": ariaLabel,
 		"data-testid": dataTestId,
-		className: cn(buttonVariants[variant], className, block && "w-full"),
+		className: cn(buttonVariants[variant], className, block && "w-full text-sm"),
 		onClick: handleOnClick,
 		...props,
 		children: [
@@ -103452,7 +103452,7 @@ 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"),
@@ -103464,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"),
@@ -103503,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", {
@@ -111927,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;
@@ -137800,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
@@ -137888,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);
@@ -140329,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;