opin-ui 0.0.1

package/dist/components/dialog/search.js

@@ -0,0 +1,350 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../ui/button.js";
+import { useRouter } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, Hash, SearchIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { Fragment as Fragment$1, createContext, use, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { T, useTranslations } from "@fuma-translate/react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import scrollIntoView from "scroll-into-view-if-needed";
+import { Dialog, DialogContent, DialogOverlay, DialogTitle } from "@radix-ui/react-dialog";
+import { createMarkdownRenderer } from "fumadocs-core/content/md";
+import rehypeRaw from "rehype-raw";
+import { visit } from "unist-util-visit";
+//#region src/components/dialog/search.tsx
+const RootContext = createContext(null);
+const ListContext = createContext(null);
+const TagsListContext = createContext(null);
+const PreContext = createContext(false);
+const mdRenderer = createMarkdownRenderer({
+	remarkRehypeOptions: { allowDangerousHtml: true },
+	rehypePlugins: [rehypeRaw, rehypeCustomElements]
+});
+const mdComponents = {
+	mark(props) {
+		return /* @__PURE__ */ jsx("span", {
+			...props,
+			className: "text-fd-primary underline"
+		});
+	},
+	a: "span",
+	p(props) {
+		return /* @__PURE__ */ jsx("p", {
+			...props,
+			className: "min-w-0"
+		});
+	},
+	strong(props) {
+		return /* @__PURE__ */ jsx("strong", {
+			...props,
+			className: "text-fd-accent-foreground font-medium"
+		});
+	},
+	code(props) {
+		if (use(PreContext)) return /* @__PURE__ */ jsx("code", {
+			...props,
+			className: "mask-[linear-gradient(to_bottom,white,white_30px,transparent_80px)]"
+		});
+		return /* @__PURE__ */ jsx("code", {
+			...props,
+			className: "rounded-md px-px bg-fd-secondary text-fd-secondary-foreground"
+		});
+	},
+	custom({ _tagName = "fragment", children, ...rest }) {
+		return /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex max-w-full items-center gap-0.5 p-0.5 rounded-md bg-fd-card text-fd-card-foreground",
+			children: [
+				/* @__PURE__ */ jsx("code", {
+					className: "rounded-sm px-0.5 me-1 bg-fd-primary font-medium text-xs text-fd-primary-foreground",
+					children: _tagName
+				}),
+				Object.entries(rest).map(([k, v]) => {
+					if (typeof v !== "string") return;
+					return /* @__PURE__ */ jsxs("code", {
+						className: "truncate text-xs text-fd-muted-foreground px-1",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-fd-card-foreground",
+							children: [k, ": "]
+						}), v]
+					}, k);
+				}),
+				children && /* @__PURE__ */ jsx("span", {
+					className: "ps-1",
+					children
+				})
+			]
+		});
+	},
+	pre(props) {
+		return /* @__PURE__ */ jsx("pre", {
+			...props,
+			className: cn("flex flex-col rounded-md my-0.5 p-2 bg-fd-secondary text-fd-secondary-foreground max-h-20 overflow-hidden", props.className),
+			children: /* @__PURE__ */ jsx(PreContext, {
+				value: true,
+				children: props.children
+			})
+		});
+	}
+};
+function rehypeCustomElements() {
+	return (tree) => {
+		visit(tree, (node) => {
+			if (node.type === "element" && document.createElement(node.tagName) instanceof HTMLUnknownElement) {
+				node.properties._tagName = node.tagName;
+				node.tagName = "custom";
+			}
+		});
+	};
+}
+function SearchDialog({ open, onOpenChange, search, onSearchChange, isLoading = false, onSelect: onSelectProp, children }) {
+	const router = useRouter();
+	const onOpenChangeCallback = useRef(onOpenChange);
+	onOpenChangeCallback.current = onOpenChange;
+	const onSearchChangeCallback = useRef(onSearchChange);
+	onSearchChangeCallback.current = onSearchChange;
+	const onSelect = (item) => {
+		if (item.type === "action") item.onSelect();
+		else if (item.external) window.open(item.url, "_blank")?.focus();
+		else router.push(item.url);
+		onOpenChange(false);
+		onSelectProp?.(item);
+	};
+	const onSelectCallback = useRef(onSelect);
+	onSelectCallback.current = onSelect;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(RootContext, {
+			value: useMemo(() => ({
+				open,
+				search,
+				isLoading,
+				onOpenChange: (v) => onOpenChangeCallback.current(v),
+				onSearchChange: (v) => onSearchChangeCallback.current(v),
+				onSelect: (v) => onSelectCallback.current(v)
+			}), [
+				isLoading,
+				open,
+				search
+			]),
+			children
+		})
+	});
+}
+function SearchDialogHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex flex-row items-center gap-2 p-3", props.className)
+	});
+}
+function SearchDialogInput(props) {
+	const t = useTranslations({ note: "search dialog" });
+	const { search, onSearchChange } = useSearch();
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		value: search,
+		onChange: (e) => onSearchChange(e.target.value),
+		placeholder: t("Search"),
+		className: "w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none"
+	});
+}
+function SearchDialogClose({ children = "ESC", className, ...props }) {
+	const { onOpenChange } = useSearch();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": useTranslations({ note: "search dialog" })("Close Search", { note: "aria-label" }),
+		onClick: () => onOpenChange(false),
+		className: cn(buttonVariants({
+			color: "outline",
+			size: "sm",
+			className: "font-mono text-fd-muted-foreground"
+		}), className),
+		...props,
+		children
+	});
+}
+function SearchDialogFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("bg-fd-secondary/50 p-3 empty:hidden", props.className)
+	});
+}
+function SearchDialogOverlay(props) {
+	return /* @__PURE__ */ jsx(DialogOverlay, {
+		...props,
+		className: cn("fixed inset-0 z-50 backdrop-blur-xs bg-fd-overlay data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", props.className)
+	});
+}
+function SearchDialogContent({ children, ...props }) {
+	const t = useTranslations({ note: "search dialog" });
+	return /* @__PURE__ */ jsxs(DialogContent, {
+		"aria-describedby": void 0,
+		...props,
+		className: cn("fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-3xl bg-fd-popover overflow-hidden text-fd-popover-foreground data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in", "*:flex *:flex-col *:gap-0.5!", props.className),
+		children: [/* @__PURE__ */ jsx(DialogTitle, {
+			className: "hidden",
+			children: t("Search")
+		}), children]
+	});
+}
+function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div", {
+	className: "py-12 text-center text-sm text-fd-muted-foreground",
+	children: /* @__PURE__ */ jsx(T, {
+		text: "No results found",
+		note: "search dialog"
+	})
+}), Item = (props) => /* @__PURE__ */ jsx(SearchDialogListItem, { ...props }), ...props }) {
+	const ref = useRef(null);
+	const { onSelect } = useSearch();
+	const [active, setActive] = useState(() => items && items.length > 0 ? items[0].id : null);
+	const onKey = useEffectEvent((e) => {
+		if (!items || e.isComposing) return;
+		if (e.key === "ArrowDown" || e.key == "ArrowUp") {
+			let idx = items.findIndex((item) => item.id === active);
+			if (idx === -1) idx = 0;
+			else if (e.key === "ArrowDown") idx++;
+			else idx--;
+			setActive(items.at(idx % items.length)?.id ?? null);
+			e.preventDefault();
+		}
+		if (e.key === "Enter") {
+			const selected = items.find((item) => item.id === active);
+			if (selected) onSelect(selected);
+			e.preventDefault();
+		}
+	});
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const observer = new ResizeObserver(() => {
+			const viewport = element.firstElementChild;
+			element.style.setProperty("--fd-animated-height", `${viewport.clientHeight}px`);
+		});
+		const viewport = element.firstElementChild;
+		if (viewport) observer.observe(viewport);
+		window.addEventListener("keydown", onKey);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("keydown", onKey);
+		};
+	}, []);
+	useOnChange(items, () => {
+		if (items && items.length > 0) setActive(items[0].id);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"data-empty": items === null,
+		className: cn("overflow-hidden h-(--fd-animated-height) transition-[height]", props.className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("w-full flex flex-col overflow-y-auto max-h-[460px] p-1", !items && "hidden"),
+			children: /* @__PURE__ */ jsxs(ListContext, {
+				value: useMemo(() => ({
+					active,
+					setActive
+				}), [active]),
+				children: [items?.length === 0 && Empty(), items?.map((item) => /* @__PURE__ */ jsx(Fragment$1, { children: Item({
+					item,
+					onClick: () => onSelect(item)
+				}) }, item.id))]
+			})
+		})
+	});
+}
+function SearchDialogListItem({ item, className, children, renderMarkdown = (s) => /* @__PURE__ */ jsx(mdRenderer.Markdown, {
+	components: mdComponents,
+	children: s
+}), renderHighlights: _, ...props }) {
+	const { active: activeId, setActive } = useSearchList();
+	const active = item.id === activeId;
+	if (item.type === "action") children ??= item.node;
+	else children ??= /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "inline-flex items-center text-fd-muted-foreground text-xs empty:hidden",
+			children: item.breadcrumbs?.map((item, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:rotate-180" }), item] }, i))
+		}),
+		item.type !== "page" && /* @__PURE__ */ jsx("div", {
+			role: "none",
+			className: "absolute inset-s-3 inset-y-0 w-px bg-fd-border"
+		}),
+		item.type === "heading" && /* @__PURE__ */ jsx(Hash, { className: "absolute inset-s-6 top-2.5 size-4 text-fd-muted-foreground" }),
+		/* @__PURE__ */ jsx("div", {
+			className: cn("min-w-0", item.type === "text" && "ps-4", item.type === "heading" && "ps-8", item.type === "page" || item.type === "heading" ? "font-medium" : "text-fd-popover-foreground/80"),
+			children: typeof item.content === "string" ? renderMarkdown(item.content) : item.content
+		})
+	] });
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		ref: useCallback((element) => {
+			if (active && element) scrollIntoView(element, {
+				scrollMode: "if-needed",
+				block: "nearest",
+				boundary: element.parentElement
+			});
+		}, [active]),
+		"aria-selected": active,
+		className: cn("relative select-none shrink-0 px-2.5 py-2 text-start text-sm overflow-hidden rounded-2xl", active && "bg-fd-accent text-fd-accent-foreground", className),
+		onPointerMove: () => setActive(item.id),
+		...props,
+		children
+	});
+}
+function SearchDialogIcon(props) {
+	const { isLoading } = useSearch();
+	return /* @__PURE__ */ jsx(SearchIcon, {
+		...props,
+		className: cn("size-5 text-fd-muted-foreground", isLoading && "animate-pulse duration-400", props.className)
+	});
+}
+const itemVariants = cva("rounded-md bg-fd-secondary px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors", { variants: { active: { true: "bg-fd-accent text-fd-accent-foreground" } } });
+function TagsList({ tag, onTagChange, allowClear = false, ...props }) {
+	const onTagChangeCallback = useRef(onTagChange);
+	onTagChangeCallback.current = onTagChange;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex items-center gap-1 flex-wrap", props.className),
+		children: /* @__PURE__ */ jsx(TagsListContext, {
+			value: useMemo(() => ({
+				value: tag,
+				onValueChange: (v) => onTagChangeCallback.current(v),
+				allowClear
+			}), [allowClear, tag]),
+			children: props.children
+		})
+	});
+}
+function TagsListItem({ value, className, ...props }) {
+	const { onValueChange, value: selectedValue, allowClear } = useTagsList();
+	const selected = value === selectedValue;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-active": selected,
+		className: cn(itemVariants({
+			active: selected,
+			className
+		})),
+		onClick: () => onValueChange(selected && allowClear ? void 0 : value),
+		tabIndex: -1,
+		...props,
+		children: props.children
+	});
+}
+function useSearch() {
+	const ctx = use(RootContext);
+	if (!ctx) throw new Error("Missing <SearchDialog />");
+	return ctx;
+}
+function useTagsList() {
+	const ctx = use(TagsListContext);
+	if (!ctx) throw new Error("Missing <TagsList />");
+	return ctx;
+}
+function useSearchList() {
+	const ctx = use(ListContext);
+	if (!ctx) throw new Error("Missing <SearchDialogList />");
+	return ctx;
+}
+//#endregion
+export { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogListItem, SearchDialogOverlay, TagsList, TagsListItem, useSearch, useSearchList, useTagsList };

package/dist/components/dynamic-codeblock.core.d.ts

@@ -0,0 +1,34 @@
+import { CodeBlockProps } from "./codeblock.js";
+import { UseShikiOptions } from "fumadocs-core/highlight/shiki/react";
+import { HighlighterCore } from "shiki";
+
+//#region src/components/dynamic-codeblock.core.d.ts
+interface DynamicCodeblockProps {
+  highlighter: HighlighterCore | (() => HighlighterCore | PromiseLike<HighlighterCore>);
+  lang: string;
+  code: string;
+  /**
+   * Extra props for the underlying `<CodeBlock />` component.
+   *
+   * Ignored if you defined your own `pre` component in `options.components`.
+   */
+  codeblock?: CodeBlockProps;
+  /**
+   * Wrap in React `<Suspense />` and provide a fallback.
+   *
+   * @defaultValue true
+   */
+  wrapInSuspense?: boolean;
+  options: DistributiveOmit<UseShikiOptions, 'lang'>;
+}
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+declare function DynamicCodeBlock({
+  lang,
+  code,
+  codeblock,
+  options,
+  wrapInSuspense,
+  highlighter
+}: DynamicCodeblockProps): import("react").JSX.Element;
+//#endregion
+export { DynamicCodeBlock, DynamicCodeblockProps };

package/dist/components/dynamic-codeblock.core.js

@@ -0,0 +1,51 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { CodeBlock, Pre } from "./codeblock.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useId } from "react";
+import { useShikiDynamic } from "fumadocs-core/highlight/shiki/react";
+//#region src/components/dynamic-codeblock.core.tsx
+const PropsContext = createContext(void 0);
+function DefaultPre(props) {
+	const extraProps = use(PropsContext);
+	return /* @__PURE__ */ jsx(CodeBlock, {
+		...props,
+		...extraProps,
+		className: cn("my-0", props.className, extraProps?.className),
+		children: /* @__PURE__ */ jsx(Pre, { children: props.children })
+	});
+}
+function DynamicCodeBlock({ lang, code, codeblock, options, wrapInSuspense = true, highlighter }) {
+	const id = useId();
+	const shikiOptions = {
+		lang,
+		defaultColor: false,
+		...options,
+		components: {
+			pre: DefaultPre,
+			...options.components
+		}
+	};
+	let node = useShikiDynamic(highlighter, code, shikiOptions, [
+		id,
+		lang,
+		code
+	]);
+	if (wrapInSuspense) node ??= /* @__PURE__ */ jsx(Placeholder, {
+		code,
+		components: shikiOptions.components
+	});
+	return /* @__PURE__ */ jsx(PropsContext, {
+		value: codeblock,
+		children: node
+	});
+}
+function Placeholder({ code, components = {} }) {
+	const { pre: Pre = "pre", code: Code = "code" } = components;
+	return /* @__PURE__ */ jsx(Pre, { children: /* @__PURE__ */ jsx(Code, { children: code.split("\n").map((line, i) => /* @__PURE__ */ jsx("span", {
+		className: "line",
+		children: line
+	}, i)) }) });
+}
+//#endregion
+export { DynamicCodeBlock };

package/dist/components/dynamic-codeblock.d.ts

@@ -0,0 +1,9 @@
+import { DynamicCodeblockProps as DynamicCodeblockProps$1 } from "./dynamic-codeblock.core.js";
+
+//#region src/components/dynamic-codeblock.d.ts
+type DynamicCodeblockProps = Omit<DynamicCodeblockProps$1, 'highlighter' | 'options'> & {
+  options?: DynamicCodeblockProps$1['options'];
+};
+declare function DynamicCodeBlock(props: DynamicCodeblockProps): import("react").JSX.Element;
+//#endregion
+export { DynamicCodeBlock, DynamicCodeblockProps };

package/dist/components/dynamic-codeblock.js

@@ -0,0 +1,17 @@
+"use client";
+import { DynamicCodeBlock as DynamicCodeBlock$1 } from "./dynamic-codeblock.core.js";
+import { jsx } from "react/jsx-runtime";
+import { defaultShikiFactory } from "fumadocs-core/highlight/shiki/full";
+//#region src/components/dynamic-codeblock.tsx
+function DynamicCodeBlock(props) {
+	return /* @__PURE__ */ jsx(DynamicCodeBlock$1, {
+		highlighter: () => defaultShikiFactory.getOrInit(),
+		options: { themes: {
+			light: "github-light",
+			dark: "github-dark"
+		} },
+		...props
+	});
+}
+//#endregion
+export { DynamicCodeBlock };

package/dist/components/files.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes, ReactNode } from "react";
+
+//#region src/components/files.d.ts
+declare function Files({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): React.ReactElement;
+interface FileProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  icon?: ReactNode;
+}
+interface FolderProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  disabled?: boolean;
+  /**
+   * Open folder by default
+   *
+   * @defaultValue false
+   */
+  defaultOpen?: boolean;
+}
+declare function File({
+  name,
+  icon,
+  className,
+  ...rest
+}: FileProps): React.ReactElement;
+declare function Folder({
+  name,
+  defaultOpen,
+  ...props
+}: FolderProps): React.ReactElement;
+//#endregion
+export { File, FileProps, Files, Folder, FolderProps };

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-2xl 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-3xl 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 ps-3",
+			children: props.children
+		}) })]
+	});
+}
+//#endregion
+export { File, Files, Folder };

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

@@ -0,0 +1,35 @@
+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,13 @@
+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 };