@youngonesworks/ui 0.1.18 → 0.1.20

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/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

@@ -103322,76 +103322,15 @@ const BreadCrumb = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
 });
 BreadCrumb.displayName = "BreadCrumb";
 
-//#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", {
-	className: cn("relative grid gap-2", className),
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-		className: cn("flex cursor-pointer items-center gap-3"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: cn("relative grid shrink-0 place-content-center", size$3 === "sm" ? "size-4" : "size-5"),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					className: "checked:border-light-blue checked:bg-light-blue [&:not([disabled])]:checked:border-light-blue [&:not([disabled])]:checked:bg-light-blue peer absolute inset-0 shrink-0 appearance-none rounded-xs border border-gray-800 bg-white focus:outline-hidden disabled:border-gray-300 disabled:bg-gray-100 disabled:[&[checked]]:border-gray-100",
-					type: "checkbox",
-					"data-testid": "checkbox",
-					disabled,
-					ref,
-					...props
-				}),
-				/* @__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"),
-					xmlns: "http://www.w3.org/2000/svg",
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					strokeWidth: "4",
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" })
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-					className: cn("pointer-events-none absolute left-1/2 hidden -translate-x-1/2 -translate-y-1/2 stroke-black outline-hidden", { "stroke-gray-300": disabled }, size$3 === "sm" ? "top-[60%] size-3" : "top-1/2 size-4", { block: indeterminate }),
-					xmlns: "http://www.w3.org/2000/svg",
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					strokeWidth: "4",
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-						x1: "4",
-						y1: "12",
-						x2: "20",
-						y2: "12"
-					})
-				})
-			]
-		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: cn("grow text-sm font-normal", { "font-medium": mediumBoldText }),
-			children: label
-		})]
-	}), error$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-		className: "text-xs font-normal text-red-500",
-		children: error$1
-	})]
-}));
-Checkbox.displayName = "Checkbox";
-
-//#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),
-	...props
-});
-
 //#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", {
@@ -103485,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,
+		onClick: handleOnClick,
 		...props,
 		children: [
 			!iconRight && formattedIcon,
@@ -103508,9 +103447,73 @@ 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", {
+	className: cn("relative grid gap-2", className),
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: cn("flex cursor-pointer items-center gap-3"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn("relative grid shrink-0 place-content-center", size$3 === "sm" ? "size-4" : "size-5"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					className: "checked:border-light-blue checked:bg-light-blue [&:not([disabled])]:checked:border-light-blue [&:not([disabled])]:checked:bg-light-blue peer absolute inset-0 shrink-0 appearance-none rounded-xs border border-gray-800 bg-white focus:outline-hidden disabled:border-gray-300 disabled:bg-gray-100 disabled:[&[checked]]:border-gray-100",
+					type: "checkbox",
+					"data-testid": "checkbox",
+					disabled,
+					ref,
+					...props
+				}),
+				/* @__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"),
+					xmlns: "http://www.w3.org/2000/svg",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "4",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					className: cn("pointer-events-none absolute left-1/2 hidden -translate-x-1/2 -translate-y-1/2 stroke-black outline-hidden", { "stroke-gray-300": disabled }, size$3 === "sm" ? "top-[60%] size-3" : "top-1/2 size-4", { block: indeterminate }),
+					xmlns: "http://www.w3.org/2000/svg",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "4",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+						x1: "4",
+						y1: "12",
+						x2: "20",
+						y2: "12"
+					})
+				})
+			]
+		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: cn("grow text-sm font-normal", { "font-medium": mediumBoldText }),
+			children: label
+		})]
+	}), error$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
+		className: "text-xs font-normal text-red-500",
+		children: error$1
+	})]
+}));
+Checkbox.displayName = "Checkbox";
+
+//#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),
+	...props
+});
+
 //#endregion
 //#region src/components/filters/FilterButton.tsx
 const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -137797,8 +137800,37 @@ function isClassComponent(Component$1) {
 * @returns {boolean}
 */
 function isForwardRefComponent(Component$1) {
-	var _a;
-	return !!(typeof Component$1 === "object" && ((_a = Component$1.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === "Symbol(react.forward_ref)");
+	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;
 }
 /**
 * Check if we're running React 19+ by detecting if function components support ref props
@@ -137856,19 +137888,15 @@ var ReactRenderer = class {
 		const props = this.props;
 		const editor = this.editor;
 		const isReact19 = isReact19Plus();
-		const isClassComp = isClassComponent(Component$1);
-		const isForwardRefComp = isForwardRefComponent(Component$1);
+		const componentCanReceiveRef = canReceiveRef(Component$1);
 		const elementProps = { ...props };
-		if (!elementProps.ref) {
-			if (isReact19) {
-				elementProps.ref = (ref) => {
-					this.ref = ref;
-				};
-			} else if (isClassComp || isForwardRefComp) {
-				elementProps.ref = (ref) => {
-					this.ref = ref;
-				};
-			}
+		if (elementProps.ref && !(isReact19 || componentCanReceiveRef)) {
+			delete elementProps.ref;
+		}
+		if (!elementProps.ref && (isReact19 || componentCanReceiveRef)) {
+			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);
@@ -140298,6 +140326,7 @@ exports.AvatarIndicator = AvatarIndicator;
 exports.Badge = Badge;
 exports.BigBadge = BigBadge;
 exports.BreadCrumb = BreadCrumb;
+exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.Divider = Divider;
 exports.Filters = Filters;
@@ -140345,4 +140374,5 @@ exports.UnorderedList = UnorderedList;
 exports.UnorderedListItem = UnorderedListItem;
 exports.UnstyledButton = UnstyledButton;
 exports.WysiwygEditor = WysiwygEditor;
+exports.buttonVariants = buttonVariants;
 //# sourceMappingURL=index.cjs.map