@vx-oss/docs-react 1.0.3

package/dist/components/files.js

@@ -0,0 +1,40 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileIcon, FolderIcon, FolderOpen } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { useState } from "react";
+//#region src/components/files.tsx
+const itemVariants = cva("flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4");
+function Files({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("not-prose rounded-md border bg-fd-card p-2", className),
+		...props,
+		children: props.children
+	});
+}
+function File({ name, icon = /* @__PURE__ */ jsx(FileIcon, {}), className, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(itemVariants({ className })),
+		...rest,
+		children: [icon, name]
+	});
+}
+function Folder({ name, defaultOpen = false, ...props }) {
+	const [open, setOpen] = useState(defaultOpen);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		...props,
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: cn(itemVariants({ className: "w-full" })),
+			children: [open ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(FolderIcon, {}), name]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
+			className: "ms-2 flex flex-col border-l ps-2",
+			children: props.children
+		}) })]
+	});
+}
+//#endregion
+export { File, Files, Folder };

package/dist/components/github-info.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+//#region src/components/github-info.d.ts
+interface FetchRepositoryInfoOptions {
+  owner: string;
+  repo: string;
+  baseUrl?: string;
+  token?: string;
+  fetchOptions?: RequestInit;
+}
+interface RepositoryInfo {
+  stars: number;
+  forks: number;
+}
+interface GithubInfoProps extends ComponentProps<'a'>, FetchRepositoryInfoOptions {
+  locale?: Intl.LocalesArgument;
+}
+declare function fetchRepositoryInfo({ owner, repo, token, baseUrl, fetchOptions }: FetchRepositoryInfoOptions): Promise<RepositoryInfo>;
+declare function GithubInfo({ repo, owner, token, baseUrl, fetchOptions, locale, ...props }: GithubInfoProps): import("react").JSX.Element;
+//#endregion
+export { FetchRepositoryInfoOptions, GithubInfo, GithubInfoProps, RepositoryInfo, fetchRepositoryInfo };

package/dist/components/github-info.js

@@ -0,0 +1,75 @@
+import { cn } from "../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GitFork, Star } from "lucide-react";
+import { use } from "react";
+//#region src/components/github-info.tsx
+async function fetchRepositoryInfo({ owner, repo, token, baseUrl = "https://api.github.com", fetchOptions = { next: { revalidate: 60 } } }) {
+	const endpoint = `${baseUrl}/repos/${owner}/${repo}`;
+	const headers = new Headers(fetchOptions.headers);
+	headers.set("Content-Type", "application/json");
+	if (token) headers.set("Authorization", `Bearer ${token}`);
+	const response = await fetch(endpoint, {
+		...fetchOptions,
+		headers
+	});
+	if (!response.ok) {
+		const message = await response.text();
+		throw new Error(`Failed to fetch repository data: ${message}`);
+	}
+	const data = await response.json();
+	return {
+		stars: data.stargazers_count,
+		forks: data.forks_count
+	};
+}
+/**
+* Uses compact notation (e.g., 1.5K, 2.3M).
+*/
+const formatterOptions = {
+	notation: "compact",
+	maximumFractionDigits: 1
+};
+const defaultFormatter = new Intl.NumberFormat(void 0, formatterOptions);
+const promises = {};
+function GithubInfo({ repo, owner, token, baseUrl, fetchOptions, locale, ...props }) {
+	const options = {
+		repo,
+		owner,
+		token,
+		baseUrl,
+		fetchOptions
+	};
+	const { stars, forks } = use(promises[JSON.stringify(options)] ??= fetchRepositoryInfo(options));
+	const formatter = locale ? new Intl.NumberFormat(locale, formatterOptions) : defaultFormatter;
+	return /* @__PURE__ */ jsxs("a", {
+		href: `https://github.com/${owner}/${repo}`,
+		rel: "noreferrer noopener",
+		target: "_blank",
+		...props,
+		className: cn("flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 transition-colors hover:text-fd-accent-foreground hover:bg-fd-accent", props.className),
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "flex items-center gap-2 truncate",
+			children: [
+				/* @__PURE__ */ jsxs("svg", {
+					fill: "currentColor",
+					viewBox: "0 0 24 24",
+					className: "size-3.5",
+					children: [/* @__PURE__ */ jsx("title", { children: "GitHub" }), /* @__PURE__ */ jsx("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" })]
+				}),
+				owner,
+				"/",
+				repo
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex text-xs items-center gap-1 text-fd-muted-foreground",
+			children: [
+				/* @__PURE__ */ jsx(Star, { className: "size-3" }),
+				/* @__PURE__ */ jsx("span", { children: formatter.format(stars) }),
+				/* @__PURE__ */ jsx(GitFork, { className: "size-3 ms-2" }),
+				/* @__PURE__ */ jsx("span", { children: formatter.format(forks) })
+			]
+		})]
+	});
+}
+//#endregion
+export { GithubInfo, fetchRepositoryInfo };

package/dist/components/heading.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/heading.d.ts
+type Types = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HeadingProps<T extends Types> = Omit<ComponentPropsWithoutRef<T>, 'as'> & {
+  as?: T;
+};
+declare function Heading<T extends Types = 'h1'>({ as, ...props }: HeadingProps<T>): import("react").JSX.Element;
+//#endregion
+export { Heading };

package/dist/components/heading.js

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { buttonVariants } from "./ui/button.js";
+import { useCopyButton } from "../utils/use-copy-button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CopyCheckIcon, LinkIcon } from "lucide-react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/components/heading.tsx
+function Heading({ as, ...props }) {
+	const As = as ?? "h1";
+	const t = useTranslations({ note: "heading anchor" });
+	const [isChecked, onCopy] = useCopyButton(() => {
+		if (!props.id) return;
+		const url = new URL(window.location.href);
+		url.hash = props.id;
+		return navigator.clipboard.writeText(url.href);
+	});
+	if (!props.id) return /* @__PURE__ */ jsx(As, { ...props });
+	return /* @__PURE__ */ jsxs(As, {
+		...props,
+		className: cn("group/heading flex scroll-m-28 flex-row items-center gap-1", props.className),
+		children: [/* @__PURE__ */ jsx("a", {
+			"data-card": "",
+			href: `#${props.id}`,
+			children: props.children
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": t("Copy Anchor Link", { note: "aria-label" }),
+			className: cn(buttonVariants({
+				variant: "ghost",
+				size: "icon-xs"
+			}), "not-prose shrink-0 text-fd-muted-foreground opacity-0 transition-opacity group-hover/heading:opacity-100"),
+			onClick: onCopy,
+			children: isChecked ? /* @__PURE__ */ jsx(CopyCheckIcon, {}) : /* @__PURE__ */ jsx(LinkIcon, {})
+		})]
+	});
+}
+//#endregion
+export { Heading };

package/dist/components/image-zoom.d.ts

@@ -0,0 +1,18 @@
+import { UncontrolledProps } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/uncontrolled.js";
+import "../node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/index.js";
+import { ImageProps } from "@vx-oss/docs-core/framework";
+import { ComponentProps } from "react";
+//#region src/components/image-zoom.d.ts
+type ImageZoomProps = ImageProps & {
+  /**
+   * Image props when zoom in
+   */
+  zoomInProps?: ComponentProps<'img'>;
+  /**
+   * Props for `react-medium-image-zoom`
+   */
+  rmiz?: UncontrolledProps;
+};
+declare function ImageZoom({ zoomInProps, children, rmiz, ...props }: ImageZoomProps): import("react").JSX.Element;
+//#endregion
+export { ImageZoom, ImageZoomProps };

package/dist/components/image-zoom.js

@@ -0,0 +1,32 @@
+"use client";
+import { Uncontrolled } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/uncontrolled.js";
+import "./image-zoom2.css";
+import { Image } from "@vx-oss/docs-core/framework";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/image-zoom.tsx
+function getImageSrc(src) {
+	if (typeof src === "string") return src;
+	if (typeof src === "object") {
+		if ("default" in src) return src.default.src;
+		return src.src;
+	}
+	return "";
+}
+function ImageZoom({ zoomInProps, children, rmiz, ...props }) {
+	return /* @__PURE__ */ jsx(Uncontrolled, {
+		zoomMargin: 20,
+		wrapElement: "span",
+		...rmiz,
+		zoomImg: {
+			src: getImageSrc(props.src),
+			sizes: void 0,
+			...zoomInProps
+		},
+		children: children ?? /* @__PURE__ */ jsx(Image, {
+			sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px",
+			...props
+		})
+	});
+}
+//#endregion
+export { ImageZoom };

package/dist/components/image-zoom2.css

@@ -0,0 +1,71 @@
+[data-rmiz] {
+  display: block;
+  position: relative;
+}
+
+[data-rmiz-ghost] {
+  pointer-events: none;
+  position: absolute;
+}
+
+[data-rmiz-btn-zoom], [data-rmiz-btn-unzoom] {
+  display: none;
+}
+
+[data-rmiz-content="found"] img {
+  cursor: zoom-in;
+}
+
+[data-rmiz-modal][open] {
+  background-color: #0000;
+  width: 100dvw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  overflow: hidden;
+}
+
+[data-rmiz-modal]:focus-visible {
+  outline: none;
+}
+
+[data-rmiz-modal-overlay] {
+  transition: background-color .3s;
+  position: absolute;
+  inset: 0;
+}
+
+[data-rmiz-modal-overlay="visible"] {
+  background-color: var(--color-fd-background);
+}
+
+[data-rmiz-modal-overlay="hidden"] {
+  background-color: #0000;
+}
+
+[data-rmiz-modal-content] {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+[data-rmiz-modal]::backdrop {
+  display: none;
+}
+
+[data-rmiz-modal-img] {
+  cursor: zoom-out;
+  image-rendering: high-quality;
+  transform-origin: 0 0;
+  transition: transform .3s;
+  position: absolute;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-rmiz-modal-overlay], [data-rmiz-modal-img] {
+    transition-duration: .01ms !important;
+  }
+}

package/dist/components/inline-toc.d.ts

@@ -0,0 +1,10 @@
+import { Collapsible } from "./ui/collapsible.js";
+import { ComponentProps } from "react";
+import { TOCItemType } from "@vx-oss/docs-core/toc";
+//#region src/components/inline-toc.d.ts
+interface InlineTocProps extends ComponentProps<typeof Collapsible> {
+  items: TOCItemType[];
+}
+declare function InlineTOC({ items, ...props }: InlineTocProps): import("react").JSX.Element;
+//#endregion
+export { InlineTOC, InlineTocProps };

package/dist/components/inline-toc.js

@@ -0,0 +1,28 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/components/inline-toc.tsx
+function InlineTOC({ items, ...props }) {
+	const t = useTranslations({ note: "inline table of contents" });
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		...props,
+		className: cn("not-prose rounded-lg border bg-fd-card text-fd-card-foreground", props.className),
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "group inline-flex w-full items-center justify-between px-4 py-2.5 font-medium",
+			children: [props.children ?? t("Table of Contents"), /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" })]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col p-4 pt-0 text-sm text-fd-muted-foreground",
+			children: items.map((item) => /* @__PURE__ */ jsx("a", {
+				href: item.url,
+				className: "border-s py-1.5 hover:text-fd-accent-foreground",
+				style: { paddingInlineStart: 12 * Math.max(item.depth - 1, 0) },
+				children: item.title
+			}, item.url))
+		}) })]
+	});
+}
+//#endregion
+export { InlineTOC };

package/dist/components/sidebar/base.d.ts

@@ -0,0 +1,85 @@
+import { CollapsibleContentProps, CollapsibleTriggerProps } from "../ui/collapsible.js";
+import { ScrollArea, ScrollViewport } from "../ui/scroll-area.js";
+import { LinkProps } from "@vx-oss/docs-core/link";
+import { ComponentProps, PointerEvent, ReactNode, RefObject } from "react";
+declare namespace base_d_exports {
+  export { SidebarCollapseTrigger, SidebarContent, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarProvider, SidebarProviderProps, SidebarSeparator, SidebarTrigger, SidebarViewport, useAutoScroll, useFolder, useFolderDepth, useSidebar };
+}
+interface SidebarContext {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  collapsed: boolean;
+  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * When set to false, don't close the sidebar when navigate to another page
+   */
+  closeOnRedirect: RefObject<boolean>;
+  defaultOpenLevel: number;
+  prefetch?: boolean;
+  mode: Mode;
+}
+interface SidebarProviderProps {
+  /**
+   * Open folders by default if their level is lower or equal to a specific level
+   * (Starting from 1)
+   *
+   * @defaultValue 0
+   */
+  defaultOpenLevel?: number;
+  /**
+   * Prefetch links, default behaviour depends on your React.js framework.
+   */
+  prefetch?: boolean;
+  children?: ReactNode;
+}
+type Mode = 'drawer' | 'full';
+declare const SidebarContext: import("react").Context<SidebarContext | null>;
+declare function SidebarProvider({ defaultOpenLevel, prefetch, children }: SidebarProviderProps): import("react").JSX.Element;
+declare function useSidebar(): SidebarContext;
+declare function useFolder(): {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  depth: number;
+  collapsible: boolean;
+} | null;
+declare function useFolderDepth(): number;
+declare function SidebarContent({ mode: allowedMode, children }: {
+  mode?: Mode | true;
+  children: (state: {
+    ref: RefObject<HTMLElement | null>;
+    collapsed: boolean;
+    hovered: boolean;
+    onPointerEnter: (event: PointerEvent) => void;
+    onPointerLeave: (event: PointerEvent) => void;
+  }) => ReactNode;
+}): ReactNode;
+declare function SidebarViewport({ area, viewport, children }: {
+  area?: ComponentProps<typeof ScrollArea>;
+  viewport?: ComponentProps<typeof ScrollViewport>;
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare function SidebarDrawerOverlay(props: ComponentProps<'div'>): import("react").JSX.Element | undefined;
+declare function SidebarDrawerContent({ className, children, ...props }: ComponentProps<'aside'>): import("react").JSX.Element | undefined;
+declare function SidebarSeparator(props: ComponentProps<'p'>): import("react").JSX.Element;
+declare function SidebarItem({ icon, active, children, ...props }: LinkProps & {
+  active?: boolean;
+  icon?: ReactNode;
+}): import("react").JSX.Element;
+declare function SidebarFolder({ defaultOpen: defaultOpenProp, collapsible, active, children, ...props }: ComponentProps<'div'> & {
+  active?: boolean;
+  defaultOpen?: boolean;
+  collapsible?: boolean;
+}): import("react").JSX.Element;
+declare function SidebarFolderTrigger({ children, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+declare function SidebarFolderLink({ children, active, ...props }: LinkProps & {
+  active?: boolean;
+}): import("react").JSX.Element;
+declare function SidebarFolderContent(props: CollapsibleContentProps): import("react").JSX.Element;
+declare function SidebarTrigger({ children, ...props }: ComponentProps<'button'>): import("react").JSX.Element;
+declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): import("react").JSX.Element;
+/**
+ * scroll to the element if `active` is true
+ */
+declare function useAutoScroll(active: boolean, ref: RefObject<HTMLElement | null>): void;
+//#endregion
+export { SidebarCollapseTrigger, SidebarContent, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarProvider, SidebarProviderProps, SidebarSeparator, SidebarTrigger, SidebarViewport, base_d_exports, useAutoScroll, useFolder, useFolderDepth, useSidebar };