@vx-oss/docs-react 1.0.3

package/dist/components/type-table.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/type-table.d.ts
+interface ParameterNode {
+  name: string;
+  description: ReactNode;
+}
+interface TypeNode {
+  /**
+   * Additional description of the field
+   */
+  description?: ReactNode;
+  /**
+   * type signature (short)
+   */
+  type: ReactNode;
+  /**
+   * type signature (full)
+   */
+  typeDescription?: ReactNode;
+  /**
+   * Optional `href` for the type
+   */
+  typeDescriptionLink?: string;
+  default?: ReactNode;
+  required?: boolean;
+  deprecated?: boolean;
+  /**
+   * a list of parameters info if the type is a function.
+   */
+  parameters?: ParameterNode[];
+  returns?: ReactNode;
+}
+declare function TypeTable({ id, type, className, ...props }: {
+  type: Record<string, TypeNode>;
+} & ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { ParameterNode, TypeNode, TypeTable };

package/dist/components/type-table.js

@@ -0,0 +1,117 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import Link from "@vx-oss/docs-core/link";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { useEffect, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/components/type-table.tsx
+const fieldVariants = cva("text-fd-muted-foreground not-prose pe-2");
+function TypeTable({ id, type, className, ...props }) {
+	const t = useTranslations({ note: "type table" });
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cn("@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex font-medium items-center px-3 py-1 not-prose text-fd-muted-foreground",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "w-1/4",
+				children: t("Prop")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "@max-xl:hidden",
+				children: t("Type")
+			})]
+		}), Object.entries(type).map(([key, value]) => /* @__PURE__ */ jsx(Item, {
+			parentId: id,
+			name: key,
+			item: value
+		}, key))]
+	});
+}
+function Item({ parentId, name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns } }) {
+	const t = useTranslations({ note: "type table" });
+	const [open, setOpen] = useState(false);
+	const id = parentId ? `${parentId}-${name}` : void 0;
+	useEffect(() => {
+		const hash = window.location.hash;
+		if (!id || !hash) return;
+		if (`#${id}` === hash) setOpen(true);
+	}, [id]);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		id,
+		open,
+		onOpenChange: (v) => {
+			if (v && id) window.history.replaceState(null, "", `#${id}`);
+			setOpen(v);
+		},
+		className: cn("rounded-xl border overflow-hidden scroll-m-20 transition-all", open ? "shadow-sm bg-fd-background not-last:mb-2" : "border-transparent"),
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "relative flex flex-row items-center w-full group text-start px-3 py-2 not-prose hover:bg-fd-accent",
+			children: [
+				/* @__PURE__ */ jsxs("code", {
+					className: cn("text-fd-primary min-w-fit w-1/4 font-mono font-medium pe-2", deprecated && "line-through text-fd-primary/50"),
+					children: [name, !required && "?"]
+				}),
+				typeDescriptionLink ? /* @__PURE__ */ jsx(Link, {
+					href: typeDescriptionLink,
+					className: "underline @max-xl:hidden",
+					children: type
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "@max-xl:hidden",
+					children: type
+				}),
+				/* @__PURE__ */ jsx(ChevronDown, { className: "absolute end-2 size-4 text-fd-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+			]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-[1fr_3fr] gap-y-4 text-sm p-3 overflow-auto fd-scroll-container border-t",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "text-sm prose col-span-full prose-no-margin empty:hidden",
+					children: description
+				}),
+				typeDescription && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					className: cn(fieldVariants()),
+					children: t("Type")
+				}), /* @__PURE__ */ jsx("p", {
+					className: "my-auto not-prose",
+					children: typeDescription
+				})] }),
+				defaultValue && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					className: cn(fieldVariants()),
+					children: t("Default")
+				}), /* @__PURE__ */ jsx("p", {
+					className: "my-auto not-prose",
+					children: defaultValue
+				})] }),
+				parameters.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					className: cn(fieldVariants()),
+					children: t("Parameters")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2",
+					children: parameters.map((param) => /* @__PURE__ */ jsxs("div", {
+						className: "inline-flex items-center flex-wrap gap-1",
+						children: [/* @__PURE__ */ jsxs("p", {
+							className: "font-medium not-prose text-nowrap",
+							children: [param.name, " -"]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "text-sm prose prose-no-margin",
+							children: param.description
+						})]
+					}, param.name))
+				})] }),
+				returns && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					className: cn(fieldVariants()),
+					children: t("Returns")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "my-auto text-sm prose prose-no-margin",
+					children: returns
+				})] })
+			]
+		}) })]
+	});
+}
+//#endregion
+export { TypeTable };

package/dist/components/ui/accordion.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from "react";
+import * as Primitive from "@radix-ui/react-accordion";
+//#region src/components/ui/accordion.d.ts
+declare function Accordion({ className, ...props }: ComponentProps<typeof Primitive.Root>): import("react").JSX.Element;
+declare function AccordionItem({ className, children, ...props }: ComponentProps<typeof Primitive.Item>): import("react").JSX.Element;
+declare function AccordionHeader({ className, children, ...props }: ComponentProps<typeof Primitive.Header>): import("react").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: ComponentProps<typeof Primitive.Trigger>): import("react").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: ComponentProps<typeof Primitive.Content>): import("react").JSX.Element;
+//#endregion
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };

package/dist/components/ui/accordion.js

@@ -0,0 +1,42 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import * as Primitive from "@radix-ui/react-accordion";
+//#region src/components/ui/accordion.tsx
+function Accordion({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Root, {
+		className: cn("divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card", className),
+		...props
+	});
+}
+function AccordionItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Item, {
+		className: cn("scroll-m-24", className),
+		...props,
+		children
+	});
+}
+function AccordionHeader({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Header, {
+		className: cn("not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent", className),
+		...props,
+		children
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Primitive.Trigger, {
+		className: cn("group flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90" }), children]
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Content, {
+		className: cn("overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/button.d.ts
+declare const buttonVariants: (props?: ({
+  variant?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
+  color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
+  size?: "sm" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonProps = VariantProps<typeof buttonVariants>;
+//#endregion
+export { ButtonProps, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,20 @@
+import { cva } from "class-variance-authority";
+//#region src/components/ui/button.tsx
+const variants = {
+	primary: "bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80 disabled:bg-fd-secondary disabled:text-fd-secondary-foreground",
+	outline: "border hover:bg-fd-accent hover:text-fd-accent-foreground",
+	ghost: "hover:bg-fd-accent hover:text-fd-accent-foreground",
+	secondary: "border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground"
+};
+const buttonVariants = cva("inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring", { variants: {
+	variant: variants,
+	color: variants,
+	size: {
+		sm: "gap-1 px-2 py-1.5 text-xs",
+		icon: "p-1.5 [&_svg]:size-5",
+		"icon-sm": "p-1.5 [&_svg]:size-4.5",
+		"icon-xs": "p-1 [&_svg]:size-4"
+	}
+} });
+//#endregion
+export { buttonVariants };

package/dist/components/ui/collapsible.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from "react";
+import * as Primitive from "@radix-ui/react-collapsible";
+//#region src/components/ui/collapsible.d.ts
+declare const Collapsible: React$1.ForwardRefExoticComponent<Primitive.CollapsibleProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<Primitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare function CollapsibleContent({ children, ...props }: React$1.ComponentProps<typeof Primitive.CollapsibleContent>): React$1.JSX.Element;
+type CollapsibleProps = Primitive.CollapsibleProps;
+type CollapsibleContentProps = Primitive.CollapsibleContentProps;
+type CollapsibleTriggerProps = Primitive.CollapsibleTriggerProps;
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps };

package/dist/components/ui/collapsible.js

@@ -0,0 +1,21 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import * as Primitive from "@radix-ui/react-collapsible";
+//#region src/components/ui/collapsible.tsx
+const Collapsible = Primitive.Root;
+const CollapsibleTrigger = Primitive.CollapsibleTrigger;
+function CollapsibleContent({ children, ...props }) {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	return /* @__PURE__ */ jsx(Primitive.CollapsibleContent, {
+		...props,
+		className: cn("overflow-hidden", mounted && "data-[state=closed]:animate-fd-collapsible-up data-[state=open]:animate-fd-collapsible-down", props.className),
+		children
+	});
+}
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/ui/navigation-menu.d.ts

@@ -0,0 +1,14 @@
+import * as React$1 from "react";
+import * as Primitive from "@radix-ui/react-navigation-menu";
+//#region src/components/ui/navigation-menu.d.ts
+type NavigationMenuContentProps = Primitive.NavigationMenuContentProps;
+type NavigationMenuTriggerProps = Primitive.NavigationMenuTriggerProps;
+declare const NavigationMenu: React$1.ForwardRefExoticComponent<Primitive.NavigationMenuProps & React$1.RefAttributes<HTMLElement>>;
+declare const NavigationMenuList: React$1.ForwardRefExoticComponent<Primitive.NavigationMenuListProps & React$1.RefAttributes<HTMLUListElement>>;
+declare function NavigationMenuItem({ className, children, ...props }: React$1.ComponentProps<typeof Primitive.NavigationMenuItem>): React$1.JSX.Element;
+declare function NavigationMenuTrigger({ className, children, ...props }: React$1.ComponentProps<typeof Primitive.Trigger>): React$1.JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: React$1.ComponentProps<typeof Primitive.Content>): React$1.JSX.Element;
+declare const NavigationMenuLink: React$1.ForwardRefExoticComponent<Primitive.NavigationMenuLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+declare function NavigationMenuViewport({ className, ref, ...props }: React$1.ComponentProps<typeof Primitive.Viewport>): React$1.JSX.Element;
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport };

package/dist/components/ui/navigation-menu.js

@@ -0,0 +1,41 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import * as Primitive from "@radix-ui/react-navigation-menu";
+//#region src/components/ui/navigation-menu.tsx
+const NavigationMenu = Primitive.Root;
+const NavigationMenuList = Primitive.List;
+function NavigationMenuItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.NavigationMenuItem, {
+		className: cn("list-none", className),
+		...props,
+		children
+	});
+}
+function NavigationMenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Trigger, {
+		className: cn("data-[state=open]:bg-fd-accent/50", className),
+		...props,
+		children
+	});
+}
+function NavigationMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Content, {
+		className: cn("absolute inset-x-0 top-0 overflow-auto fd-scroll-container max-h-[80svh] data-[motion=from-end]:animate-fd-enterFromRight data-[motion=from-start]:animate-fd-enterFromLeft data-[motion=to-end]:animate-fd-exitToRight data-[motion=to-start]:animate-fd-exitToLeft", className),
+		...props
+	});
+}
+const NavigationMenuLink = Primitive.Link;
+function NavigationMenuViewport({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "flex w-full justify-center",
+		children: /* @__PURE__ */ jsx(Primitive.Viewport, {
+			...props,
+			className: cn("relative h-(--radix-navigation-menu-viewport-height) w-full origin-[top_center] overflow-hidden transition-[width,height] duration-300 data-[state=closed]:animate-fd-nav-menu-out data-[state=open]:animate-fd-nav-menu-in", className)
+		})
+	});
+}
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport };

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,9 @@
+import * as React$1 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region src/components/ui/popover.d.ts
+declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Content>): React$1.JSX.Element;
+declare const PopoverClose: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/components/ui/popover.js

@@ -0,0 +1,20 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region src/components/ui/popover.tsx
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+		align,
+		sideOffset,
+		side: "bottom",
+		className: cn("z-50 origin-(--radix-popover-content-transform-origin) overflow-y-auto max-h-(--radix-popover-content-available-height) min-w-[240px] max-w-[98vw] rounded-xl border bg-fd-popover/60 backdrop-blur-lg p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in", className),
+		...props
+	}) });
+}
+const PopoverClose = PopoverPrimitive.PopoverClose;
+//#endregion
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/components/ui/scroll-area.d.ts

@@ -0,0 +1,9 @@
+import * as React$1 from "react";
+import * as Primitive from "@radix-ui/react-scroll-area";
+//#region src/components/ui/scroll-area.d.ts
+declare function ScrollArea({ className, children, ...props }: React$1.ComponentProps<typeof Primitive.Root>): React$1.JSX.Element;
+declare function ScrollViewport({ className, children, ...props }: React$1.ComponentProps<typeof Primitive.Viewport>): React$1.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React$1.ComponentProps<typeof Primitive.Scrollbar>): React$1.JSX.Element;
+type ScrollAreaProps = Primitive.ScrollAreaProps;
+//#endregion
+export { ScrollArea, ScrollAreaProps, ScrollBar, ScrollViewport };

package/dist/components/ui/scroll-area.js

@@ -0,0 +1,34 @@
+import { cn } from "../../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import * as Primitive from "@radix-ui/react-scroll-area";
+//#region src/components/ui/scroll-area.tsx
+function ScrollArea({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Primitive.Root, {
+		type: "scroll",
+		className: cn("overflow-hidden", className),
+		...props,
+		children: [
+			children,
+			/* @__PURE__ */ jsx(Primitive.Corner, {}),
+			/* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" })
+		]
+	});
+}
+function ScrollViewport({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Viewport, {
+		className: cn("size-full rounded-[inherit]", className),
+		...props,
+		children
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Scrollbar, {
+		orientation,
+		className: cn("flex select-none data-[state=hidden]:animate-fd-fade-out", orientation === "vertical" && "h-full w-1.5", orientation === "horizontal" && "h-1.5 flex-col", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Primitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-fd-border" })
+	});
+}
+//#endregion
+export { ScrollArea, ScrollBar, ScrollViewport };

package/dist/components/ui/tabs.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps } from "react";
+import * as Primitive from "@radix-ui/react-tabs";
+//#region src/components/ui/tabs.d.ts
+interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
+  /**
+   * Identifier for Sharing value of tabs
+   */
+  groupId?: string;
+  /**
+   * Enable persistent
+   */
+  persist?: boolean;
+  /**
+   * If true, updates the URL hash based on the tab's id
+   */
+  updateAnchor?: boolean;
+}
+declare const TabsList: import("react").ForwardRefExoticComponent<Primitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: import("react").ForwardRefExoticComponent<Primitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare function Tabs({ ref, groupId, persist, updateAnchor, defaultValue, value: _value, onValueChange: _onValueChange, ...props }: TabsProps): import("react").JSX.Element;
+declare function TabsContent({ value, ref, ...props }: ComponentProps<typeof Primitive.TabsContent>): import("react").JSX.Element;
+//#endregion
+export { Tabs, TabsContent, TabsList, TabsProps, TabsTrigger };

package/dist/components/ui/tabs.js

@@ -0,0 +1,102 @@
+"use client";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
+import * as Primitive from "@radix-ui/react-tabs";
+//#region src/components/ui/tabs.tsx
+const listeners = /* @__PURE__ */ new Map();
+const TabsContext = createContext(null);
+function useTabContext() {
+	const ctx = use(TabsContext);
+	if (!ctx) throw new Error("You must wrap your component in <Tabs>");
+	return ctx;
+}
+const TabsList = Primitive.TabsList;
+const TabsTrigger = Primitive.TabsTrigger;
+function Tabs({ ref, groupId, persist = false, updateAnchor = false, defaultValue, value: _value, onValueChange: _onValueChange, ...props }) {
+	const tabsRef = useRef(null);
+	const valueToIdMap = useMemo(() => /* @__PURE__ */ new Map(), []);
+	const panels = useMemo(() => /* @__PURE__ */ new Map(), []);
+	const [value, setValue] = _value === void 0 ? useState(defaultValue) : [_value, useEffectEvent((v) => _onValueChange?.(v))];
+	useLayoutEffect(() => {
+		if (!groupId) return;
+		let previous = sessionStorage.getItem(groupId);
+		if (persist) previous ??= localStorage.getItem(groupId);
+		if (previous) setValue(previous);
+		const groupListeners = listeners.get(groupId) ?? /* @__PURE__ */ new Set();
+		groupListeners.add(setValue);
+		listeners.set(groupId, groupListeners);
+		return () => {
+			groupListeners.delete(setValue);
+		};
+	}, [
+		groupId,
+		persist,
+		setValue
+	]);
+	useLayoutEffect(() => {
+		const openFromHash = () => {
+			const hash = window.location.hash.slice(1);
+			if (!hash) return;
+			for (const [value, id] of valueToIdMap.entries()) if (id === hash) {
+				setValue(value);
+				tabsRef.current?.scrollIntoView();
+				return;
+			}
+			const target = document.getElementById(hash);
+			if (!target) return;
+			for (const [value, panel] of panels.entries()) {
+				if (!panel.contains(target)) continue;
+				setValue(value);
+				requestAnimationFrame(() => target.scrollIntoView());
+				return;
+			}
+		};
+		openFromHash();
+		window.addEventListener("hashchange", openFromHash);
+		return () => window.removeEventListener("hashchange", openFromHash);
+	}, [
+		setValue,
+		valueToIdMap,
+		panels
+	]);
+	return /* @__PURE__ */ jsx(Primitive.Tabs, {
+		ref: mergeRefs(ref, tabsRef),
+		value,
+		onValueChange: (v) => {
+			if (updateAnchor) {
+				const id = valueToIdMap.get(v);
+				if (id) window.history.replaceState(null, "", `#${id}`);
+			}
+			if (groupId) {
+				const groupListeners = listeners.get(groupId);
+				if (groupListeners) for (const listener of groupListeners) listener(v);
+				sessionStorage.setItem(groupId, v);
+				if (persist) localStorage.setItem(groupId, v);
+			} else setValue(v);
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(TabsContext, {
+			value: useMemo(() => ({
+				valueToIdMap,
+				panels
+			}), [valueToIdMap, panels]),
+			children: props.children
+		})
+	});
+}
+function TabsContent({ value, ref, ...props }) {
+	const { valueToIdMap, panels } = useTabContext();
+	if (props.id) valueToIdMap.set(value, props.id);
+	return /* @__PURE__ */ jsx(Primitive.TabsContent, {
+		ref: mergeRefs(ref, (element) => {
+			if (element) panels.set(value, element);
+			else panels.delete(value);
+		}),
+		value,
+		...props,
+		children: props.children
+	});
+}
+//#endregion
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/contexts/i18n.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+//#region src/contexts/i18n.d.ts
+interface LocaleItem {
+  name: string;
+  locale: string;
+}
+interface LocaleContextType {
+  locale?: string;
+  onChange?: (v: string) => void;
+  locales?: LocaleItem[];
+}
+declare function useI18n(): LocaleContextType;
+interface I18nProviderProps {
+  /**
+   * Current locale
+   */
+  locale?: string;
+  /**
+   * Handle changes to the locale, redirect user when not specified.
+   */
+  onLocaleChange?: (v: string) => void;
+  /**
+   * Translations of current locale
+   */
+  translations?: Partial<Record<string, string>>;
+  /**
+   * Available languages
+   */
+  locales?: LocaleItem[];
+  children?: ReactNode;
+}
+declare function I18nProvider({ locales, locale, onLocaleChange, children, translations }: I18nProviderProps): import("react").JSX.Element;
+//#endregion
+export { I18nProvider, I18nProviderProps, useI18n };

package/dist/contexts/i18n.js

@@ -0,0 +1,37 @@
+"use client";
+import { usePathname, useRouter } from "@vx-oss/docs-core/framework";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useMemo, useRef } from "react";
+import { TranslationProvider } from "@fuma-translate/react";
+//#region src/contexts/i18n.tsx
+const LocaleContext = createContext({});
+function useI18n() {
+	return use(LocaleContext);
+}
+const Empty = {};
+function I18nProvider({ locales = [], locale, onLocaleChange, children, translations = Empty }) {
+	const router = useRouter();
+	const pathname = usePathname();
+	const onChange = (value) => {
+		if (onLocaleChange) return onLocaleChange(value);
+		const segments = pathname.split("/").filter((v) => v.length > 0);
+		if (segments.length === 0 || segments[0] !== locale) segments.unshift(value);
+		else segments[0] = value;
+		router.push(`/${segments.join("/")}`);
+	};
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	return /* @__PURE__ */ jsx(LocaleContext, {
+		value: useMemo(() => ({
+			locale,
+			locales,
+			onChange: (v) => onChangeRef.current(v)
+		}), [locale, locales]),
+		children: /* @__PURE__ */ jsx(TranslationProvider, {
+			translations,
+			children
+		})
+	});
+}
+//#endregion
+export { I18nProvider, useI18n };