@atom-learning/components 10.1.0 → 11.0.0

package/dist/index.cjs.js

@@ -510,6 +510,24 @@ var getExternalAnchorProps = (url) => isExternalUrl(url) ? {
 	rel: "noopener noreferrer"
 } : {};
 //#endregion
+//#region src/components/router-provider/RouterProvider.tsx
+var RouterContext = react.createContext({});
+var RouterProvider = ({ link, children }) => {
+	const value = react.useMemo(() => ({ link }), [link]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RouterContext.Provider, {
+		value,
+		children
+	});
+};
+var isAbsoluteUrl = (url) => /^https?:\/\//.test(url || "");
+var EMPTY = {};
+var useRouterLinkProps = (href, { reloadDocument } = {}) => {
+	const { link } = react.useContext(RouterContext);
+	if (!link || !href || isAbsoluteUrl(href) || reloadDocument) return EMPTY;
+	return { as: link };
+};
+RouterProvider.displayName = "Router.Provider";
+//#endregion
 //#region src/components/action-icon/ActionIcon.constants.ts
 var ActionIconSizeMap = {
 	xs: "sm",
@@ -614,16 +632,17 @@ var StyledButton$5 = styled("button", {
 		isRounded: { true: ["rounded-full"] }
 	}
 }, { enableResponsiveVariants: true });
-var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...rest }) => {
+var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, reloadDocument, ...rest }) => {
 	const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`;
 	(0, tiny_invariant.default)(react.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
+	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionalTooltipWrapper, {
 		hasTooltip,
 		label,
 		tooltipSide,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton$5, {
 			...href ? {
-				as: "a",
+				as: routerLinkProps.as || "a",
 				href: disabled ? void 0 : href,
 				onClick: void 0,
 				"aria-disabled": !!disabled
@@ -889,23 +908,26 @@ var WithLoader = ({ size, children }) => /* @__PURE__ */ (0, react_jsx_runtime.j
 	size,
 	children
 })] });
-var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
-	as: as || (href ? "a" : void 0),
-	...!disabled && !isLoading && {
-		href,
-		onClick
-	},
-	isLoading,
-	type: !href ? "button" : void 0,
-	disabled,
-	...rest,
-	...getExternalAnchorProps(href),
-	ref,
-	children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WithLoader, {
-		size: rest.size,
-		children
-	}) : children
-}));
+var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled, reloadDocument, ...rest }) => {
+	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
+		as: as || routerLinkProps.as || (href ? "a" : void 0),
+		...!disabled && !isLoading && {
+			href,
+			onClick
+		},
+		isLoading,
+		type: !href ? "button" : void 0,
+		disabled,
+		...rest,
+		...getExternalAnchorProps(href),
+		ref,
+		children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WithLoader, {
+			size: rest.size,
+			children
+		}) : children
+	});
+});
 //#endregion
 //#region src/components/heading/Heading.tsx
 var Heading = styled("h2", {
@@ -1233,15 +1255,18 @@ var StyledLink = styled("a", {
 	},
 	defaultVariants: { size: "md" }
 }, { enableResponsiveVariants: true });
-var Link = (({ ref, as, disabled, href, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLink, {
-	as: as || (!href ? "button" : void 0),
-	noCapsize: !href ? true : void 0,
-	href,
-	...disabled && { disabled: true },
-	...rest,
-	...getExternalAnchorProps(href),
-	ref
-}));
+var Link = (({ ref, as, disabled, href, reloadDocument, ...rest }) => {
+	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLink, {
+		as: as || routerLinkProps.as || (!href ? "button" : void 0),
+		noCapsize: !href ? true : void 0,
+		href,
+		...disabled && { disabled: true },
+		...rest,
+		...getExternalAnchorProps(href),
+		ref
+	});
+});
 //#endregion
 //#region src/components/image/ImageCredit.tsx
 var overlayControlClasses = [
@@ -6787,19 +6812,23 @@ DropdownMenuLabel.displayName = "DropdownMenuLabel";
 //#endregion
 //#region src/components/dropdown-menu/DropdownMenuLinkItem.tsx
 var StyledLink$2 = styled("a", { base: ["no-underline"] });
-var DropdownMenuLinkItem = ({ children, href, target, rel, download, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuItem, {
-	...rest,
-	asChild: true,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLink$2, {
-		href,
-		target,
-		rel,
-		download,
-		role: "menuitem",
-		...getExternalAnchorProps(href),
-		children
-	})
-});
+var DropdownMenuLinkItem = ({ children, href, reloadDocument, target, rel, download, ...rest }) => {
+	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuItem, {
+		...rest,
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLink$2, {
+			as: routerLinkProps.as,
+			href,
+			target,
+			rel,
+			download,
+			role: "menuitem",
+			...getExternalAnchorProps(href),
+			children
+		})
+	});
+};
 //#endregion
 //#region src/components/dropdown-menu/DropdownMenuSeparator.tsx
 var DropdownMenuSeparator = styled(_radix_ui_react_dropdown_menu.Separator, { base: [
@@ -7309,19 +7338,33 @@ var StyledLink$1 = styled(_radix_ui_react_navigation_menu.Link, {
 		]
 	} }
 });
-var NavigationMenuLink = ({ ref, children, href, disabled, className, variant = "link", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItem, { children: disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DisabledButton, {
-	disabled: true,
-	className,
-	children
-}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLink$1, {
-	href,
-	ref,
-	elementType: variant,
-	className,
-	...getExternalAnchorProps(href),
-	...rest,
-	children
-}) });
+var NavigationMenuLink = ({ ref, children, href, disabled, className, variant = "link", reloadDocument, ...rest }) => {
+	const RouterLink = useRouterLinkProps(href, { reloadDocument }).as;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItem, { children: disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DisabledButton, {
+		disabled: true,
+		className,
+		children
+	}) : RouterLink ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLink$1, {
+		href,
+		ref,
+		elementType: variant,
+		className,
+		asChild: true,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RouterLink, {
+			href,
+			children
+		})
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLink$1, {
+		href,
+		ref,
+		elementType: variant,
+		className,
+		...getExternalAnchorProps(href),
+		...rest,
+		children
+	}) });
+};
 //#endregion
 //#region src/components/navigation/NavigationMenuDropdownItem.tsx
 var NavigationMenuDropdownItem = ({ ref, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationMenuLink, {
@@ -7589,9 +7632,10 @@ var StyledNavigationMenuVerticalLink = styled(_radix_ui_react_navigation_menu.Li
 		lg: ["min-h-12"]
 	} }
 });
-var NavigationMenuVerticalLink = ({ as, href, children, ...rest }) => {
-	const Component = as || (href ? "a" : "button");
-	const componentProps = as ? {} : href ? getExternalAnchorProps(href) : { type: "button" };
+var NavigationMenuVerticalLink = ({ as, href, children, reloadDocument, ...rest }) => {
+	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
+	const Component = as || routerLinkProps.as || (href ? "a" : "button");
+	const componentProps = as || routerLinkProps.as ? {} : href ? getExternalAnchorProps(href) : { type: "button" };
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationMenuVerticalItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledNavigationMenuVerticalLink, {
 		size: "lg",
 		href,
@@ -8157,6 +8201,9 @@ var RadioCard = ({ children, isFullWidth = false, size = "md", align = "left", .
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })]
 });
 //#endregion
+//#region src/components/router-provider/Router.ts
+var Router = { Provider: RouterProvider };
+//#endregion
 //#region src/components/radio-card/RadioCardGroup.tsx
 var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_radio_group.Root, {
 	...rest,
@@ -10011,9 +10058,10 @@ var StyledTileInteractive = styled(Tile, { base: [
 	"not-disabled:transition-transform",
 	"not-disabled:translate-y-0"
 ] });
-var TileInteractive = ({ ref, onClick, href, type = "button", as, ...rest }) => {
+var TileInteractive = ({ ref, onClick, href, type = "button", as, reloadDocument, ...rest }) => {
+	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
 	const elementSpecificProps = !!href ? {
-		as: as || "a",
+		as: as || routerLinkProps.as || "a",
 		href,
 		onClick: void 0
 	} : {
@@ -11119,6 +11167,7 @@ exports.RadioButtonField = RadioButtonField;
 exports.RadioButtonGroup = RadioButtonGroup;
 exports.RadioCard = RadioCard;
 exports.RadioCardGroup = RadioCardGroup;
+exports.Router = Router;
 exports.SearchField = SearchField;
 exports.SearchInput = SearchInput;
 exports.SectionMessage = SectionMessage;