@youngonesworks/ui 0.1.18 → 0.1.20

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { AvatarIndicator } from './components/avatarIndicator';
 export { Badge } from './components/badge';
 export { BigBadge } from './components/bigBadge';
 export { BreadCrumb } from './components/breadCrumb';
+export { Button } from './components/button';
+export { buttonVariants } from './components/button/buttonVariants';
 export { Checkbox } from './components/checkbox';
 export { Divider } from './components/divider';
 export { Filters } from './components/filters';

package/dist/index.js

@@ -103324,76 +103324,15 @@ const BreadCrumb = ({ children }) => /* @__PURE__ */ jsx(LinkText, {
 });
 BreadCrumb.displayName = "BreadCrumb";
 
-//#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", {
-	className: cn("relative grid gap-2", className),
-	children: [/* @__PURE__ */ jsxs("label", {
-		className: cn("flex cursor-pointer items-center gap-3"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("relative grid shrink-0 place-content-center", size$3 === "sm" ? "size-4" : "size-5"),
-			children: [
-				/* @__PURE__ */ 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__ */ 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__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
-				}),
-				/* @__PURE__ */ 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__ */ jsx("line", {
-						x1: "4",
-						y1: "12",
-						x2: "20",
-						y2: "12"
-					})
-				})
-			]
-		}), label && /* @__PURE__ */ jsx("span", {
-			className: cn("grow text-sm font-normal", { "font-medium": mediumBoldText }),
-			children: label
-		})]
-	}), error$1 && /* @__PURE__ */ 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__ */ 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__ */ 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", {
@@ -103487,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,
+		onClick: handleOnClick,
 		...props,
 		children: [
 			!iconRight && formattedIcon,
@@ -103510,9 +103449,73 @@ 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", {
+	className: cn("relative grid gap-2", className),
+	children: [/* @__PURE__ */ jsxs("label", {
+		className: cn("flex cursor-pointer items-center gap-3"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("relative grid shrink-0 place-content-center", size$3 === "sm" ? "size-4" : "size-5"),
+			children: [
+				/* @__PURE__ */ 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__ */ 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__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+				}),
+				/* @__PURE__ */ 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__ */ jsx("line", {
+						x1: "4",
+						y1: "12",
+						x2: "20",
+						y2: "12"
+					})
+				})
+			]
+		}), label && /* @__PURE__ */ jsx("span", {
+			className: cn("grow text-sm font-normal", { "font-medium": mediumBoldText }),
+			children: label
+		})]
+	}), error$1 && /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
@@ -137799,8 +137802,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
@@ -137858,19 +137890,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.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);
@@ -140289,5 +140317,5 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 });
 
 //#endregion
-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 };
+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 };
 //# sourceMappingURL=index.js.map