ardo 3.4.0 → 3.6.0

package/README.md

@@ -2,7 +2,7 @@
 
 Modern, open documentation for React teams.
 
-Ardo is a React-first static documentation framework built on React 19, React Router 7, Vite 8, MDX, TypeScript, and Vanilla Extract. It is for teams that want VitePress-style simplicity without leaving React or moving their docs into a hosted platform.
+Ardo is a React-first static documentation framework built on React 19, React Router 8, Vite 8, MDX, TypeScript, and Vanilla Extract. It is for teams that want VitePress-style simplicity without leaving React or moving their docs into a hosted platform.
 
 ## Why use it?
 

package/dist/{DocPage-Dy7OrCP2.js → DocPage-Yt8MMpBg.js}

@@ -1,19 +1,22 @@
-import { d as useArdoSidebar, f as useArdoSiteConfig, n as getPrevNextLinks, p as useArdoTOC, r as ArdoContext, s as useArdoConfig, u as useArdoPageData } from "./sidebar-utils-C06DJsx4.js";
-import { t as ARDO_FAVICON_DATA_URL } from "./favicon-Cx-inut3.js";
-import { Children, createContext, isValidElement, use, useEffect, useMemo, useRef, useState } from "react";
+import { d as useArdoSidebar, f as useArdoSiteConfig, n as getPrevNextLinks, p as useArdoTOC, r as ArdoContext, s as useArdoConfig, u as useArdoPageData } from "./sidebar-utils-tTBVAPLE.js";
+import { t as ARDO_FAVICON_DATA_URL } from "./favicon-DN3ymUVm.js";
+import { Children, cloneElement, createContext, isValidElement, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Link, Links, Meta, Scripts, ScrollRestoration, useLocation } from "react-router";
 import "./assets/src/ui/Layout.css.ts.vanilla-ClOa1YZm.css";
 import "./assets/src/ui/Footer.css.ts.vanilla-DGTyff5Y.css";
 import { BookOpen as BookOpenIcon, Box as BoxIcon, Check as CheckIcon, ChevronDown as ChevronDownIcon, CircleX as XCircleIcon, Code2 as CodeIcon, Copy as CopyIcon, FileCode2 as FileCodeIcon, FileText as FileTextIcon, Info as InfoIcon, Lightbulb as LightbulbIcon, MessageCircle as MessageCircleIcon, Monitor as MonitorIcon, Moon as MoonIcon, Package as PackageIcon, Search as SearchIcon, Settings as SettingsIcon, Sun as SunIcon, TriangleAlert as AlertTriangleIcon, Wrench as WrenchIcon, X as XIcon } from "lucide-react";
-import "./assets/src/ui/components/CopyButton.css.ts.vanilla-CO2awD6S.css";
-import "./assets/src/ui/components/CodeBlock.css.ts.vanilla-BxDJ2gKc.css";
-import "./assets/src/ui/components/Container.css.ts.vanilla-CUhRUA9t.css";
+import "./assets/src/ui/components/Accordion.css.ts.vanilla-BPEoNgJt.css";
+import "./assets/src/ui/components/Badge.css.ts.vanilla-D9jsj0rg.css";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+import "./assets/src/ui/components/Card.css.ts.vanilla-CO6uiEzC.css";
+import "./assets/src/ui/components/CopyButton.css.ts.vanilla-CO2awD6S.css";
+import "./assets/src/ui/components/CodeBlock.css.ts.vanilla-DYyQRTxk.css";
+import "./assets/src/ui/components/Container.css.ts.vanilla-B8_jKj0Q.css";
 import "./assets/src/ui/components/Steps.css.ts.vanilla-CisaxeNj.css";
 import "./assets/src/ui/components/Tabs.css.ts.vanilla-C4-vJSnf.css";
 import "./assets/src/ui/Breadcrumb.css.ts.vanilla-Dpgq-C_p.css";
-import "./assets/src/ui/content.css.ts.vanilla-CJnrOQNh.css";
+import "./assets/src/ui/content.css.ts.vanilla-B5a1kmaY.css";
 import "./assets/src/ui/DocPage.css.ts.vanilla-CWL92vUE.css";
 import "./assets/src/ui/Toc.css.ts.vanilla-CQbpEdTg.css";
 //#region src/ui/Footer.css.ts
@@ -168,6 +171,288 @@ function useBareContent() {
 	return use(BareContentContext);
 }
 //#endregion
+//#region src/ui/components/Accordion.css.ts
+var accordion = "_18rgqvr1";
+var accordionGroup = "_18rgqvr0";
+var chevron = "_18rgqvr6";
+var content = "_18rgqvr7";
+var contentInner = "_18rgqvr8";
+var heading = "_18rgqvr2";
+var leadingIcon = "_18rgqvr4";
+var title = "_18rgqvr5";
+var trigger = "_18rgqvr3";
+//#endregion
+//#region src/ui/components/Icon.tsx
+const iconRegistry = /* @__PURE__ */ new Map();
+/**
+* Register icons for use with the Icon component.
+* Only registered icons are included in your bundle.
+*
+* @example
+* ```tsx
+* // In your app's entry point or layout:
+* import { registerIcons } from "ardo/ui"
+* import { Zap, Rocket, Code } from "lucide-react"
+*
+* registerIcons({ Zap, Rocket, Code })
+* ```
+*/
+function registerIcons(icons) {
+	for (const [name, icon] of Object.entries(icons)) iconRegistry.set(name, icon);
+}
+/**
+* Get all registered icon names (useful for documentation).
+*/
+function getRegisteredIconNames() {
+	return [...iconRegistry.keys()];
+}
+/**
+* Renders a registered icon by name.
+* Icons must be registered first using `registerIcons()`.
+*
+* @example
+* ```tsx
+* // First register icons in your app:
+* import { registerIcons } from "ardo/ui"
+* import { Zap, Rocket } from "lucide-react"
+* registerIcons({ Zap, Rocket })
+*
+* // Then use in MDX:
+* <Icon name="Zap" size={24} />
+* <Icon name="Rocket" className="text-brand" />
+* ```
+*
+* @see https://lucide.dev/icons for available icon names
+*/
+function ArdoIcon({ name, ...props }) {
+	const IconComp = iconRegistry.get(name);
+	if (!IconComp) {
+		console.warn(`[Ardo] Icon "${name}" not found. Did you register it with registerIcons()?`);
+		return null;
+	}
+	return /* @__PURE__ */ jsx(IconComp, { ...props });
+}
+//#endregion
+//#region src/ui/components/Accordion.tsx
+const AccordionGroupContext = createContext(null);
+function AccordionIcon({ icon }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: leadingIcon,
+		"aria-hidden": "true",
+		children: typeof icon === "string" ? /* @__PURE__ */ jsx(ArdoIcon, {
+			name: icon,
+			size: 18
+		}) : icon
+	});
+}
+function fallbackValue(index) {
+	return `ardo-accordion-${index}`;
+}
+function resolveAccordionGroupChildren(children) {
+	let accordionIndex = 0;
+	let defaultOpenValue;
+	const normalizedChildren = Children.map(children, (child) => {
+		if (!isValidElement(child) || child.type !== ArdoAccordion) return child;
+		const value = child.props.value ?? fallbackValue(accordionIndex);
+		accordionIndex += 1;
+		if (defaultOpenValue == null && child.props.defaultOpen === true) defaultOpenValue = value;
+		return child.props.value == null ? cloneElement(child, { value }) : child;
+	});
+	return {
+		defaultOpenValue,
+		normalizedChildren
+	};
+}
+/**
+* Group container for accordion items.
+*/
+function ArdoAccordionGroup({ children, onlyOneOpen = false, className }) {
+	const { defaultOpenValue, normalizedChildren } = useMemo(() => resolveAccordionGroupChildren(children), [children]);
+	const [openItem, setOpenItem] = useState(() => onlyOneOpen ? defaultOpenValue : void 0);
+	return /* @__PURE__ */ jsx(AccordionGroupContext, {
+		value: useMemo(() => ({
+			onlyOneOpen,
+			openItem,
+			setOpenItem
+		}), [onlyOneOpen, openItem]),
+		children: /* @__PURE__ */ jsx("div", {
+			className: className == null ? accordionGroup : `${accordionGroup} ${className}`,
+			children: normalizedChildren
+		})
+	});
+}
+/**
+* Collapsible documentation content section.
+*/
+function ArdoAccordion({ title: title$1, children, defaultOpen = false, icon, headingLevel = 3, value, className }) {
+	const generatedId = useId();
+	const context = use(AccordionGroupContext);
+	const resolvedValue = value ?? generatedId;
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+	const groupedOpen = context?.onlyOneOpen === true ? context.openItem === resolvedValue : isOpen;
+	const open = !context?.onlyOneOpen ? isOpen : groupedOpen;
+	const accordionClassName = className == null ? accordion : `${accordion} ${className}`;
+	const contentId = `${generatedId}-content`;
+	const triggerId = `${generatedId}-trigger`;
+	const hasIcon = icon != null;
+	const Heading = `h${headingLevel}`;
+	const toggleOpen = () => {
+		if (context?.onlyOneOpen === true) {
+			context.setOpenItem(open ? void 0 : resolvedValue);
+			return;
+		}
+		setIsOpen((current) => !current);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: accordionClassName,
+		"data-open": open ? "true" : "false",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			className: heading,
+			children: /* @__PURE__ */ jsxs("button", {
+				id: triggerId,
+				type: "button",
+				className: trigger,
+				"aria-expanded": open,
+				"aria-controls": contentId,
+				onClick: toggleOpen,
+				children: [
+					hasIcon && /* @__PURE__ */ jsx(AccordionIcon, { icon }),
+					/* @__PURE__ */ jsx("span", {
+						className: title,
+						children: title$1
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: chevron,
+						"aria-hidden": "true"
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			id: contentId,
+			role: "region",
+			"aria-labelledby": triggerId,
+			className: content,
+			"aria-hidden": !open,
+			inert: !open || void 0,
+			children: /* @__PURE__ */ jsx("div", {
+				className: contentInner,
+				children
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/ui/components/Badge.css.ts
+var badge = createRuntimeFn({
+	defaultClassName: "ghbjl60",
+	variantClassNames: { variant: {
+		"default": "ghbjl61",
+		success: "ghbjl62",
+		warning: "ghbjl63",
+		danger: "ghbjl64",
+		info: "ghbjl65"
+	} },
+	defaultVariants: { variant: "default" },
+	compoundVariants: []
+});
+//#endregion
+//#region src/ui/components/Badge.tsx
+/**
+* Inline status label for documentation content.
+*/
+function ArdoBadge({ variant = "default", icon: icon$1, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: badge({ variant }),
+		children: [icon$1 != null && /* @__PURE__ */ jsx("span", {
+			className: "ghbjl66",
+			"aria-hidden": "true",
+			children: icon$1
+		}), children]
+	});
+}
+//#endregion
+//#region src/ui/components/Card.css.ts
+var card = "_8dzbm61";
+var cardGroup = "_8dzbm60";
+var cardHeader = "_8dzbm63";
+var cardIcon = "_8dzbm64";
+var cardLink = "_8dzbm62 _8dzbm61";
+var cardTitle = "_8dzbm65";
+//#endregion
+//#region src/ui/components/Card.tsx
+function isExternalHref(href) {
+	return href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//");
+}
+function CardIcon({ icon }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cardIcon,
+		"aria-hidden": "true",
+		children: typeof icon === "string" ? /* @__PURE__ */ jsx(ArdoIcon, {
+			name: icon,
+			size: 20
+		}) : icon
+	});
+}
+function CardContent({ title, icon, children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cardHeader,
+		children: [icon != null && /* @__PURE__ */ jsx(CardIcon, { icon }), /* @__PURE__ */ jsx("h3", {
+			className: cardTitle,
+			children: title
+		})]
+	}), children != null && /* @__PURE__ */ jsx("span", {
+		className: "_8dzbm66",
+		children
+	})] });
+}
+/**
+* General-purpose documentation card.
+*
+* Cards can be static content blocks or clickable navigation items when `href` is provided.
+*/
+function ArdoCard({ title, icon, children, href, className }) {
+	const cardClassName = className == null ? card : `${card} ${className}`;
+	const cardLinkClassName = className == null ? cardLink : `${cardLink} ${className}`;
+	if (href == null || href === "") return /* @__PURE__ */ jsx("div", {
+		className: cardClassName,
+		children: /* @__PURE__ */ jsx(CardContent, {
+			title,
+			icon,
+			children
+		})
+	});
+	if (isExternalHref(href)) return /* @__PURE__ */ jsx("a", {
+		className: cardLinkClassName,
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: /* @__PURE__ */ jsx(CardContent, {
+			title,
+			icon,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		className: cardLinkClassName,
+		to: href,
+		children: /* @__PURE__ */ jsx(CardContent, {
+			title,
+			icon,
+			children
+		})
+	});
+}
+/**
+* Responsive grid for documentation cards.
+*/
+function ArdoCardGroup({ children, cols = 2, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: className == null ? cardGroup : `${cardGroup} ${className}`,
+		"data-cols": cols,
+		children
+	});
+}
+//#endregion
 //#region src/ui/components/CodeBlock.css.ts
 var codeBlock = "_1l68ra30";
 var codeGroup = "_1l68ra35";
@@ -471,57 +756,6 @@ function ArdoNote({ title, children }) {
 	});
 }
 //#endregion
-//#region src/ui/components/Icon.tsx
-const iconRegistry = /* @__PURE__ */ new Map();
-/**
-* Register icons for use with the Icon component.
-* Only registered icons are included in your bundle.
-*
-* @example
-* ```tsx
-* // In your app's entry point or layout:
-* import { registerIcons } from "ardo/ui"
-* import { Zap, Rocket, Code } from "lucide-react"
-*
-* registerIcons({ Zap, Rocket, Code })
-* ```
-*/
-function registerIcons(icons) {
-	for (const [name, icon] of Object.entries(icons)) iconRegistry.set(name, icon);
-}
-/**
-* Get all registered icon names (useful for documentation).
-*/
-function getRegisteredIconNames() {
-	return [...iconRegistry.keys()];
-}
-/**
-* Renders a registered icon by name.
-* Icons must be registered first using `registerIcons()`.
-*
-* @example
-* ```tsx
-* // First register icons in your app:
-* import { registerIcons } from "ardo/ui"
-* import { Zap, Rocket } from "lucide-react"
-* registerIcons({ Zap, Rocket })
-*
-* // Then use in MDX:
-* <Icon name="Zap" size={24} />
-* <Icon name="Rocket" className="text-brand" />
-* ```
-*
-* @see https://lucide.dev/icons for available icon names
-*/
-function ArdoIcon({ name, ...props }) {
-	const IconComp = iconRegistry.get(name);
-	if (!IconComp) {
-		console.warn(`[Ardo] Icon "${name}" not found. Did you register it with registerIcons()?`);
-		return null;
-	}
-	return /* @__PURE__ */ jsx(IconComp, { ...props });
-}
-//#endregion
 //#region src/ui/components/Steps.css.ts
 var steps = "go9pz30";
 //#endregion
@@ -566,27 +800,38 @@ function useTabsContext() {
 * Tabs container component for organizing content into tabbed panels.
 */
 function ArdoTabs({ defaultValue, children }) {
+	const tabsId = useId();
 	const [activeTab, setActiveTab] = useState(() => defaultValue ?? findFirstTabValue(children));
 	const tabIndexRef = useRef(0);
 	const panelIndexRef = useRef(0);
 	tabIndexRef.current = 0;
 	panelIndexRef.current = 0;
-	const getTabValue = (value) => {
+	const getTabValue = useCallback((value) => {
 		const index = tabIndexRef.current++;
 		return value ?? `${AUTO_TAB_PREFIX}${index}`;
-	};
-	const getPanelValue = (value) => {
+	}, []);
+	const getPanelValue = useCallback((value) => {
 		const index = panelIndexRef.current++;
 		return value ?? `${AUTO_TAB_PREFIX}${index}`;
-	};
+	}, []);
 	const effectiveTab = defaultValue ?? activeTab;
+	const getTabId = useCallback((value) => `${tabsId}-tab-${toDomIdSegment(value)}`, [tabsId]);
+	const getPanelId = useCallback((value) => `${tabsId}-panel-${toDomIdSegment(value)}`, [tabsId]);
 	return /* @__PURE__ */ jsx(TabsContext, {
 		value: useMemo(() => ({
 			activeTab: effectiveTab,
 			setActiveTab,
-			getTabValue,
-			getPanelValue
-		}), [effectiveTab]),
+			getPanelId,
+			getPanelValue,
+			getTabId,
+			getTabValue
+		}), [
+			effectiveTab,
+			getPanelId,
+			getPanelValue,
+			getTabId,
+			getTabValue
+		]),
 		children: /* @__PURE__ */ jsx("div", {
 			className: tabs,
 			children
@@ -600,6 +845,7 @@ function ArdoTabList({ children }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: tabList,
 		role: "tablist",
+		onKeyDown: handleTabListKeyDown,
 		children
 	});
 }
@@ -607,13 +853,17 @@ function ArdoTabList({ children }) {
 * Individual tab button.
 */
 function ArdoTab({ value, children }) {
-	const { activeTab, setActiveTab, getTabValue } = useTabsContext();
+	const { activeTab, setActiveTab, getPanelId, getTabId, getTabValue } = useTabsContext();
 	const resolvedValue = getTabValue(value);
 	const isActive = activeTab === resolvedValue;
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		role: "tab",
+		id: getTabId(resolvedValue),
+		"aria-controls": getPanelId(resolvedValue),
 		"aria-selected": isActive,
+		tabIndex: isActive ? 0 : -1,
+		"data-ardo-tab-value": resolvedValue,
 		className: [tab, isActive && "active"].filter(Boolean).join(" "),
 		onClick: () => {
 			setActiveTab(resolvedValue);
@@ -625,10 +875,14 @@ function ArdoTab({ value, children }) {
 * Content panel for a tab.
 */
 function ArdoTabPanel({ value, children }) {
-	const { activeTab, getPanelValue } = useTabsContext();
-	if (!(activeTab === getPanelValue(value))) return null;
+	const { activeTab, getPanelId, getPanelValue, getTabId } = useTabsContext();
+	const resolvedValue = getPanelValue(value);
+	if (!(activeTab === resolvedValue)) return null;
 	return /* @__PURE__ */ jsx("div", {
 		role: "tabpanel",
+		id: getPanelId(resolvedValue),
+		"aria-labelledby": getTabId(resolvedValue),
+		tabIndex: 0,
 		className: tabPanel,
 		children
 	});
@@ -657,6 +911,36 @@ function getFirstTabValueFromChild(child) {
 	const nestedValue = findFirstTabValue(nestedChildren);
 	return nestedValue === "" ? null : nestedValue;
 }
+function handleTabListKeyDown(event) {
+	if (!isTabNavigationKey(event.key)) return;
+	const tabs = getTabsFromList(event.currentTarget);
+	if (tabs.length === 0) return;
+	if (!(event.target instanceof HTMLButtonElement)) return;
+	const currentIndex = tabs.indexOf(event.target);
+	if (currentIndex === -1) return;
+	event.preventDefault();
+	const nextTab = tabs[getNextTabIndex(event.key, currentIndex, tabs.length)];
+	nextTab.focus();
+	nextTab.click();
+}
+function isTabNavigationKey(key) {
+	return key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End";
+}
+function getTabsFromList(tabList) {
+	return [...tabList.querySelectorAll("[role=\"tab\"]")];
+}
+function getNextTabIndex(key, currentIndex, tabCount) {
+	switch (key) {
+		case "ArrowLeft": return (currentIndex - 1 + tabCount) % tabCount;
+		case "ArrowRight": return (currentIndex + 1) % tabCount;
+		case "Home": return 0;
+		case "End": return tabCount - 1;
+		default: return currentIndex;
+	}
+}
+function toDomIdSegment(value) {
+	return Array.from(value, (char) => char.charCodeAt(0).toString(36)).join("-");
+}
 //#endregion
 //#region src/ui/Breadcrumb.css.ts
 var breadcrumb = "_19g8fxh0";
@@ -1134,6 +1418,6 @@ function ArdoDocLayout({ content }) {
 	return /* @__PURE__ */ jsx(ArdoDocPage, { children: content });
 }
 //#endregion
-export { footerLink as $, home as A, MonitorIcon as B, ArdoCopyButton as C, ArdoBareContent as D, codeWrapper as E, ChevronDownIcon as F, SunIcon as G, PackageIcon as H, CodeIcon as I, footer as J, WrenchIcon as K, FileCodeIcon as L, layout as M, BookOpenIcon as N, ArdoLayout as O, BoxIcon as P, footerCopyright as Q, FileTextIcon as R, ArdoCodeGroup as S, codeTitle as T, SearchIcon as U, MoonIcon as V, SettingsIcon as W, footerBuildTime as X, footerArdoLink as Y, footerContainer as Z, ArdoInfo as _, ArdoContent as a, ArdoWarning as b, ArdoTabPanel as c, ArdoSteps as d, footerMessage as et, ArdoIcon as f, ArdoDanger as g, ArdoContainer as h, ArdoTOC as i, homeMain as j, ArdoRootLayout as k, ArdoTabPanels as l, registerIcons as m, ArdoDocLayout as n, footerPrimary as nt, ArdoTab as o, getRegisteredIconNames as p, XIcon as q, ArdoDocPage as r, footerSeparator as rt, ArdoTabList as s, ArdoDocContent as t, footerOwl as tt, ArdoTabs as u, ArdoNote as v, codeBlock as w, ArdoCodeBlock as x, ArdoTip as y, MessageCircleIcon as z };
+export { footer as $, getRegisteredIconNames as A, ChevronDownIcon as B, codeWrapper as C, ArdoAccordion as D, ArdoBadge as E, home as F, MonitorIcon as G, FileCodeIcon as H, homeMain as I, SearchIcon as J, MoonIcon as K, layout as L, ArdoBareContent as M, ArdoLayout as N, ArdoAccordionGroup as O, ArdoRootLayout as P, XIcon as Q, BookOpenIcon as R, codeTitle as S, ArdoCardGroup as T, FileTextIcon as U, CodeIcon as V, MessageCircleIcon as W, SunIcon as X, SettingsIcon as Y, WrenchIcon as Z, ArdoWarning as _, ArdoContent as a, footerMessage as at, ArdoCopyButton as b, ArdoTabPanel as c, footerSeparator as ct, ArdoSteps as d, footerArdoLink as et, ArdoContainer as f, ArdoTip as g, ArdoNote as h, ArdoTOC as i, footerLink as it, registerIcons as j, ArdoIcon as k, ArdoTabPanels as l, ArdoInfo as m, ArdoDocLayout as n, footerContainer as nt, ArdoTab as o, footerOwl as ot, ArdoDanger as p, PackageIcon as q, ArdoDocPage as r, footerCopyright as rt, ArdoTabList as s, footerPrimary as st, ArdoDocContent as t, footerBuildTime as tt, ArdoTabs as u, ArdoCodeBlock as v, ArdoCard as w, codeBlock as x, ArdoCodeGroup as y, BoxIcon as z };
 
-//# sourceMappingURL=DocPage-Dy7OrCP2.js.map
+//# sourceMappingURL=DocPage-Yt8MMpBg.js.map