@vx-oss/docs-react 1.0.3

package/dist/components/dialog/search-orama.d.ts

@@ -0,0 +1,32 @@
+import { SearchLink, SharedProps, TagItem } from "../../contexts/search.js";
+import "./search.js";
+import { ReactNode } from "react";
+import { OramaCloudOptions } from "@vx-oss/docs-core/search/client";
+//#region src/components/dialog/search-orama.d.ts
+interface OramaSearchDialogProps extends SharedProps {
+  links?: SearchLink[];
+  client: OramaCloudOptions['client'];
+  searchOptions?: OramaCloudOptions['params'];
+  index?: OramaCloudOptions['index'];
+  footer?: ReactNode;
+  defaultTag?: string;
+  tags?: TagItem[];
+  /**
+   * Add the "Powered by Orama" label
+   *
+   * @defaultValue true
+   */
+  showOrama?: boolean;
+  /**
+   * Allow to clear tag filters
+   *
+   * @defaultValue false
+   */
+  allowClear?: boolean;
+}
+/**
+ * Orama Cloud integration
+ */
+declare function OramaSearchDialog({ client, searchOptions, tags, defaultTag, showOrama, allowClear, index, footer, links, ...props }: OramaSearchDialogProps): import("react").JSX.Element;
+//#endregion
+export { OramaSearchDialogProps, OramaSearchDialog as default };

package/dist/components/dialog/search-orama.js

@@ -0,0 +1,69 @@
+"use client";
+import { useI18n } from "../../contexts/i18n.js";
+import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem } from "./search.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useOnChange } from "@vx-oss/docs-core/utils/use-on-change";
+import { useDocsSearch } from "@vx-oss/docs-core/search/client";
+import { oramaCloudClient } from "@vx-oss/docs-core/search/client/orama-cloud";
+//#region src/components/dialog/search-orama.tsx
+/**
+* Orama Cloud integration
+*/
+function OramaSearchDialog({ client, searchOptions, tags = [], defaultTag, showOrama = true, allowClear = false, index, footer, links = [], ...props }) {
+	const { locale } = useI18n();
+	const [tag, setTag] = useState(defaultTag);
+	const { search, setSearch, query } = useDocsSearch({ client: oramaCloudClient({
+		client,
+		index,
+		params: searchOptions,
+		locale,
+		tag
+	}) });
+	const defaultItems = useMemo(() => {
+		if (links.length === 0) return null;
+		return links.map(([name, link]) => ({
+			type: "page",
+			id: name,
+			content: name,
+			url: link
+		}));
+	}, [links]);
+	useOnChange(defaultTag, (v) => {
+		setTag(v);
+	});
+	const label = showOrama && /* @__PURE__ */ jsx(Label, {});
+	return /* @__PURE__ */ jsxs(SearchDialog, {
+		search,
+		onSearchChange: setSearch,
+		isLoading: query.isLoading,
+		...props,
+		children: [/* @__PURE__ */ jsx(SearchDialogOverlay, {}), /* @__PURE__ */ jsxs(SearchDialogContent, { children: [
+			/* @__PURE__ */ jsxs(SearchDialogHeader, { children: [
+				/* @__PURE__ */ jsx(SearchDialogIcon, {}),
+				/* @__PURE__ */ jsx(SearchDialogInput, {}),
+				/* @__PURE__ */ jsx(SearchDialogClose, {})
+			] }),
+			/* @__PURE__ */ jsx(SearchDialogList, { items: query.data !== "empty" ? query.data : defaultItems }),
+			/* @__PURE__ */ jsxs(SearchDialogFooter, { children: [tags.length > 0 ? /* @__PURE__ */ jsxs(TagsList, {
+				tag,
+				onTagChange: setTag,
+				allowClear,
+				children: [tags.map((tag) => /* @__PURE__ */ jsx(TagsListItem, {
+					value: tag.value,
+					children: tag.name
+				}, tag.value)), label]
+			}) : label, footer] })
+		] })]
+	});
+}
+function Label() {
+	return /* @__PURE__ */ jsx("a", {
+		href: "https://orama.com",
+		rel: "noreferrer noopener",
+		className: "ms-auto text-xs text-fd-muted-foreground",
+		children: "Search powered by Orama"
+	});
+}
+//#endregion
+export { OramaSearchDialog as default };

package/dist/components/dialog/search.d.ts

@@ -0,0 +1,76 @@
+import { SharedProps } from "../../contexts/search.js";
+import { ComponentProps, ReactNode } from "react";
+import { DialogContent, DialogOverlay } from "@radix-ui/react-dialog";
+import { HighlightedText, ReactSortedResult } from "@vx-oss/docs-core/search";
+//#region src/components/dialog/search.d.ts
+type SearchItemType = (ReactSortedResult & {
+  external?: boolean;
+}) | {
+  id: string;
+  type: 'action';
+  node: ReactNode;
+  onSelect: () => void;
+};
+interface SearchDialogProps extends SharedProps {
+  search: string;
+  onSearchChange: (v: string) => void;
+  onSelect?: (item: SearchItemType) => void;
+  isLoading?: boolean;
+  children: ReactNode;
+}
+declare function SearchDialog({ open, onOpenChange, search, onSearchChange, isLoading, onSelect: onSelectProp, children }: SearchDialogProps): import("react").JSX.Element;
+declare function SearchDialogHeader(props: ComponentProps<'div'>): import("react").JSX.Element;
+declare function SearchDialogInput(props: ComponentProps<'input'>): import("react").JSX.Element;
+declare function SearchDialogClose({ children, className, ...props }: ComponentProps<'button'>): import("react").JSX.Element;
+declare function SearchDialogFooter(props: ComponentProps<'div'>): import("react").JSX.Element;
+declare function SearchDialogOverlay(props: ComponentProps<typeof DialogOverlay>): import("react").JSX.Element;
+declare function SearchDialogContent({ children, ...props }: ComponentProps<typeof DialogContent>): import("react").JSX.Element;
+declare function SearchDialogList({ items, Empty, Item, ...props }: Omit<ComponentProps<'div'>, 'children'> & {
+  items: SearchItemType[] | null | undefined;
+  /**
+   * Renderer for empty list UI
+   */
+  Empty?: () => ReactNode;
+  /**
+   * Renderer for items
+   */
+  Item?: (props: {
+    item: SearchItemType;
+    onClick: () => void;
+  }) => ReactNode;
+}): import("react").JSX.Element;
+declare function SearchDialogListItem({ item, className, children, renderMarkdown, renderHighlights: _, ...props }: ComponentProps<'button'> & {
+  renderMarkdown?: (v: string) => ReactNode;
+  /** @deprecated highlight blocks is now wrapped in `<mark />`, use `renderMarkdown` to handle instead. */
+  renderHighlights?: (blocks: HighlightedText<ReactNode>[]) => ReactNode;
+  item: SearchItemType;
+}): import("react").JSX.Element;
+declare function SearchDialogIcon(props: ComponentProps<'svg'>): import("react").JSX.Element;
+interface TagsListProps extends ComponentProps<'div'> {
+  tag?: string;
+  onTagChange: (tag: string | undefined) => void;
+  allowClear?: boolean;
+}
+declare function TagsList({ tag, onTagChange, allowClear, ...props }: TagsListProps): import("react").JSX.Element;
+declare function TagsListItem({ value, className, ...props }: ComponentProps<'button'> & {
+  value: string;
+}): import("react").JSX.Element;
+declare function useSearch(): {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  search: string;
+  onSearchChange: (v: string) => void;
+  onSelect: (item: SearchItemType) => void;
+  isLoading: boolean;
+};
+declare function useTagsList(): {
+  value?: string;
+  onValueChange: (value: string | undefined) => void;
+  allowClear: boolean;
+};
+declare function useSearchList(): {
+  active: string | null;
+  setActive: (v: string | null) => void;
+};
+//#endregion
+export { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogListItem, SearchDialogOverlay, SearchDialogProps, SearchItemType, type SharedProps, TagsList, TagsListItem, TagsListProps, useSearch, useSearchList, useTagsList };

package/dist/components/dialog/search.js

@@ -0,0 +1,351 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../ui/button.js";
+import { useRouter } from "@vx-oss/docs-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 "@vx-oss/docs-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 "@vx-oss/docs-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: "border 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 border p-0.5 rounded-md bg-fd-card text-fd-card-foreground divide-x divide-fd-border",
+			children: [
+				/* @__PURE__ */ jsx("code", {
+					className: "rounded-sm px-0.5 me-1 bg-fd-primary font-medium text-xs text-fd-primary-foreground border-none",
+					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 border 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();
+	const t = useTranslations({ note: "search dialog" });
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": t("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-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl shadow-black/50 overflow-hidden data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in", "*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0", 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 || e.keyCode === 229) 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-lg", 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 border 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,26 @@
+import { CodeBlockProps } from "./codeblock.js";
+import { UseShikiOptions } from "@vx-oss/docs-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 "@vx-oss/docs-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,8 @@
+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 "@vx-oss/docs-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,21 @@
+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 };