@vx-oss/docs-react 1.0.4 → 1.0.5

package/dist/components/sidebar/base.js

@@ -1,277 +1 @@
-"use client";
-import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { cn } from "../../utils/cn.js";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
-import { ScrollArea, ScrollViewport } from "../ui/scroll-area.js";
-import Link from "@vx-oss/docs-core/link";
-import { usePathname } from "@vx-oss/docs-core/framework";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, ExternalLink } from "lucide-react";
-import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslations } from "@fuma-translate/react";
-import { useOnChange } from "@vx-oss/docs-core/utils/use-on-change";
-import { useMediaQuery } from "@vx-oss/docs-core/utils/use-media-query";
-import { Presence } from "@radix-ui/react-presence";
-import scrollIntoView from "scroll-into-view-if-needed";
-//#region src/components/sidebar/base.tsx
-var base_exports = /* @__PURE__ */ __exportAll({
-	SidebarCollapseTrigger: () => SidebarCollapseTrigger,
-	SidebarContent: () => SidebarContent,
-	SidebarDrawerContent: () => SidebarDrawerContent,
-	SidebarDrawerOverlay: () => SidebarDrawerOverlay,
-	SidebarFolder: () => SidebarFolder,
-	SidebarFolderContent: () => SidebarFolderContent,
-	SidebarFolderLink: () => SidebarFolderLink,
-	SidebarFolderTrigger: () => SidebarFolderTrigger,
-	SidebarItem: () => SidebarItem,
-	SidebarProvider: () => SidebarProvider,
-	SidebarSeparator: () => SidebarSeparator,
-	SidebarTrigger: () => SidebarTrigger,
-	SidebarViewport: () => SidebarViewport,
-	useAutoScroll: () => useAutoScroll,
-	useFolder: () => useFolder,
-	useFolderDepth: () => useFolderDepth,
-	useSidebar: () => useSidebar
-});
-const SidebarContext = createContext(null);
-const FolderContext = createContext(null);
-function SidebarProvider({ defaultOpenLevel = 0, prefetch, children }) {
-	const closeOnRedirect = useRef(true);
-	const [open, setOpen] = useState(false);
-	const [collapsed, setCollapsed] = useState(false);
-	const pathname = usePathname();
-	const mode = useMediaQuery("(width < 768px)") ? "drawer" : "full";
-	useOnChange(pathname, () => {
-		if (closeOnRedirect.current) setOpen(false);
-		closeOnRedirect.current = true;
-	});
-	return /* @__PURE__ */ jsx(SidebarContext, {
-		value: useMemo(() => ({
-			open,
-			setOpen,
-			collapsed,
-			setCollapsed,
-			closeOnRedirect,
-			defaultOpenLevel,
-			prefetch,
-			mode
-		}), [
-			open,
-			collapsed,
-			defaultOpenLevel,
-			prefetch,
-			mode
-		]),
-		children
-	});
-}
-function useSidebar() {
-	const ctx = use(SidebarContext);
-	if (!ctx) throw new Error("Missing SidebarContext, make sure you have wrapped the component in <DocsLayout /> and the context is available.");
-	return ctx;
-}
-function useFolder() {
-	return use(FolderContext);
-}
-function useFolderDepth() {
-	return use(FolderContext)?.depth ?? 0;
-}
-function SidebarContent({ mode: allowedMode = "full", children }) {
-	const { collapsed, mode } = useSidebar();
-	const [hover, setHover] = useState(false);
-	const ref = useRef(null);
-	const timerRef = useRef(0);
-	useOnChange(collapsed, () => {
-		if (collapsed) setHover(false);
-	});
-	if (allowedMode !== true && allowedMode !== mode) return;
-	function shouldIgnoreHover(e) {
-		const element = ref.current;
-		if (!element) return true;
-		return !collapsed || e.pointerType === "touch" || element.getAnimations().length > 0;
-	}
-	return children({
-		ref,
-		collapsed,
-		hovered: hover,
-		onPointerEnter(e) {
-			if (shouldIgnoreHover(e)) return;
-			window.clearTimeout(timerRef.current);
-			setHover(true);
-		},
-		onPointerLeave(e) {
-			if (shouldIgnoreHover(e)) return;
-			window.clearTimeout(timerRef.current);
-			timerRef.current = window.setTimeout(() => setHover(false), Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500);
-		}
-	});
-}
-function SidebarViewport({ area, viewport, children }) {
-	return /* @__PURE__ */ jsx(ScrollArea, {
-		...area,
-		className: cn("min-h-0 flex-1", area?.className),
-		children: /* @__PURE__ */ jsx(ScrollViewport, {
-			...viewport,
-			className: cn("*:flex! *:flex-col! *:gap-0.5! p-4 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]", viewport?.className),
-			children
-		})
-	});
-}
-function SidebarDrawerOverlay(props) {
-	const { open, setOpen, mode } = useSidebar();
-	if (mode !== "drawer") return;
-	return /* @__PURE__ */ jsx(Presence, {
-		present: open,
-		children: /* @__PURE__ */ jsx("div", {
-			"data-state": open ? "open" : "closed",
-			onClick: () => setOpen(false),
-			...props
-		})
-	});
-}
-function SidebarDrawerContent({ className, children, ...props }) {
-	const { open, mode } = useSidebar();
-	const state = open ? "open" : "closed";
-	if (mode !== "drawer") return;
-	return /* @__PURE__ */ jsx(Presence, {
-		present: open,
-		children: ({ present }) => /* @__PURE__ */ jsx("aside", {
-			id: "nd-sidebar-mobile",
-			"data-state": state,
-			className: cn(!present && "invisible", className),
-			...props,
-			children
-		})
-	});
-}
-function SidebarSeparator(props) {
-	return /* @__PURE__ */ jsx("p", { ...props });
-}
-function SidebarItem({ icon, active = false, children, ...props }) {
-	const ref = useRef(null);
-	const { prefetch } = useSidebar();
-	useAutoScroll(active, ref);
-	return /* @__PURE__ */ jsxs(Link, {
-		ref,
-		"data-active": active,
-		prefetch,
-		...props,
-		children: [icon ?? (props.external ? /* @__PURE__ */ jsx(ExternalLink, {}) : null), children]
-	});
-}
-function SidebarFolder({ defaultOpen: defaultOpenProp, collapsible = true, active = false, children, ...props }) {
-	const { defaultOpenLevel } = useSidebar();
-	const depth = useFolderDepth() + 1;
-	const defaultOpen = collapsible === false || active || (defaultOpenProp ?? defaultOpenLevel >= depth);
-	const [open, setOpen] = useState(defaultOpen);
-	useOnChange(defaultOpen, (v) => {
-		if (v) setOpen(v);
-	});
-	return /* @__PURE__ */ jsx(Collapsible, {
-		open,
-		onOpenChange: setOpen,
-		disabled: !collapsible,
-		...props,
-		children: /* @__PURE__ */ jsx(FolderContext, {
-			value: useMemo(() => ({
-				open,
-				setOpen,
-				depth,
-				collapsible
-			}), [
-				collapsible,
-				depth,
-				open
-			]),
-			children
-		})
-	});
-}
-function SidebarFolderTrigger({ children, ...props }) {
-	const { open, collapsible } = use(FolderContext);
-	if (collapsible) return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
-		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronDown, {
-			"data-icon": true,
-			className: cn("ms-auto transition-transform", !open && "-rotate-90 rtl:rotate-90")
-		})]
-	});
-	return /* @__PURE__ */ jsx("div", {
-		...props,
-		children
-	});
-}
-function SidebarFolderLink({ children, active = false, ...props }) {
-	const ref = useRef(null);
-	const { open, setOpen, collapsible } = use(FolderContext);
-	const { prefetch } = useSidebar();
-	useAutoScroll(active, ref);
-	return /* @__PURE__ */ jsxs(Link, {
-		ref,
-		"data-active": active,
-		onClick: (e) => {
-			if (!collapsible) return;
-			if (e.target instanceof Element && e.target.matches("[data-icon], [data-icon] *")) {
-				setOpen(!open);
-				e.preventDefault();
-			} else setOpen(active ? !open : true);
-		},
-		prefetch,
-		...props,
-		children: [children, collapsible && /* @__PURE__ */ jsx(ChevronDown, {
-			"data-icon": true,
-			className: cn("ms-auto transition-transform", !open && "-rotate-90 rtl:rotate-90")
-		})]
-	});
-}
-function SidebarFolderContent(props) {
-	return /* @__PURE__ */ jsx(CollapsibleContent, {
-		...props,
-		children: props.children
-	});
-}
-function SidebarTrigger({ children, ...props }) {
-	const { open, setOpen } = useSidebar();
-	const t = useTranslations({ note: "sidebar" });
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": open ? t("Close Sidebar", { note: "aria-label" }) : t("Open Sidebar", { note: "aria-label" }),
-		"aria-expanded": open,
-		"aria-controls": "nd-sidebar-mobile",
-		onClick: () => setOpen((prev) => !prev),
-		...props,
-		children
-	});
-}
-function SidebarCollapseTrigger(props) {
-	const { collapsed, setCollapsed } = useSidebar();
-	const t = useTranslations({ note: "sidebar" });
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": t("Collapse Sidebar", { note: "aria-label" }),
-		"data-collapsed": collapsed,
-		onClick: () => {
-			setCollapsed((prev) => !prev);
-		},
-		...props,
-		children: props.children
-	});
-}
-/**
-* scroll to the element if `active` is true
-*/
-function useAutoScroll(active, ref) {
-	const { mode } = useSidebar();
-	useEffect(() => {
-		if (active && ref.current) scrollIntoView(ref.current, {
-			boundary: document.getElementById(mode === "drawer" ? "nd-sidebar-mobile" : "nd-sidebar"),
-			scrollMode: "if-needed"
-		});
-	}, [
-		active,
-		mode,
-		ref
-	]);
-}
-//#endregion
-export { SidebarCollapseTrigger, SidebarContent, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarProvider, SidebarSeparator, SidebarTrigger, SidebarViewport, base_exports, useAutoScroll, useFolder, useFolderDepth, useSidebar };
+export * from '@vx-oss/docs-vezham-ui/components/sidebar/base';

package/dist/components/sidebar/link-item.js

@@ -1,37 +1 @@
-"use client";
-import { isLinkItemActive } from "../../layouts/shared/index.js";
-import { usePathname } from "@vx-oss/docs-core/framework";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/sidebar/link-item.tsx
-function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem }) {
-	/**
-	* Render sidebar items from page tree
-	*/
-	return function SidebarLinkItem({ item, ...props }) {
-		const pathname = usePathname();
-		const active = isLinkItemActive(item, pathname);
-		if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
-			...props,
-			children: item.children
-		});
-		if (item.type === "menu") return /* @__PURE__ */ jsxs(SidebarFolder, {
-			...props,
-			children: [item.url ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
-				href: item.url,
-				active,
-				external: item.external,
-				children: [item.icon, item.text]
-			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: item.items.map((child, i) => /* @__PURE__ */ jsx(SidebarLinkItem, { item: child }, i)) })]
-		});
-		return /* @__PURE__ */ jsx(SidebarItem, {
-			href: item.url,
-			icon: item.icon,
-			external: item.external,
-			active,
-			...props,
-			children: item.text
-		});
-	};
-}
-//#endregion
-export { createLinkItemRenderer };
+export * from '@vx-oss/docs-vezham-ui/components/sidebar/link-item';

package/dist/components/sidebar/page-tree.js

@@ -1,69 +1 @@
-import { useTreeContext, useTreePath } from "../../contexts/tree.js";
-import { isActive } from "../../utils/urls.js";
-import { usePathname } from "@vx-oss/docs-core/framework";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
-//#region src/components/sidebar/page-tree.tsx
-const RendererContext = createContext(null);
-function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem }) {
-	function renderList(nodes) {
-		return nodes.map((node, i) => /* @__PURE__ */ jsx(PageTreeNode, { node }, i));
-	}
-	function PageTreeNode({ node }) {
-		const { Separator, Item, Folder, pathname } = use(RendererContext);
-		if (node.type === "separator") {
-			if (Separator) return /* @__PURE__ */ jsx(Separator, { item: node });
-			return /* @__PURE__ */ jsxs(SidebarSeparator, { children: [node.icon, node.name] });
-		}
-		if (node.type === "folder") {
-			const path = useTreePath();
-			if (Folder) return /* @__PURE__ */ jsx(Folder, {
-				item: node,
-				children: renderList(node.children)
-			});
-			return /* @__PURE__ */ jsxs(SidebarFolder, {
-				collapsible: node.collapsible,
-				active: path.includes(node),
-				defaultOpen: node.defaultOpen,
-				children: [node.index ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
-					href: node.index.url,
-					active: isActive(node.index.url, pathname),
-					external: node.index.external,
-					children: [node.icon, node.name]
-				}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [node.icon, node.name] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: renderList(node.children) })]
-			});
-		}
-		if (Item) return /* @__PURE__ */ jsx(Item, { item: node });
-		return /* @__PURE__ */ jsx(SidebarItem, {
-			href: node.url,
-			external: node.external,
-			active: isActive(node.url, pathname),
-			icon: node.icon,
-			children: node.name
-		});
-	}
-	/**
-	* Render sidebar items from page tree
-	*/
-	return function SidebarPageTree(components) {
-		const { Folder, Item, Separator } = components;
-		const { root } = useTreeContext();
-		const pathname = usePathname();
-		return /* @__PURE__ */ jsx(RendererContext, {
-			value: useMemo(() => ({
-				Folder,
-				Item,
-				Separator,
-				pathname
-			}), [
-				Folder,
-				Item,
-				Separator,
-				pathname
-			]),
-			children: /* @__PURE__ */ jsx(Fragment$1, { children: renderList(root.children) }, root.$id)
-		});
-	};
-}
-//#endregion
-export { createPageTreeRenderer };
+export * from '@vx-oss/docs-vezham-ui/components/sidebar/page-tree';

package/dist/components/sidebar/tabs/dropdown.js

@@ -1,83 +1 @@
-"use client";
-import { cn } from "../../../utils/cn.js";
-import { useTabsGroups } from "../../../contexts/tree.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
-import { isLayoutTabActive } from "../../../layouts/shared/index.js";
-import { useSidebar } from "../base.js";
-import Link from "@vx-oss/docs-core/link";
-import { usePathname } from "@vx-oss/docs-core/framework";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Check, ChevronsUpDown } from "lucide-react";
-import { useMemo, useState } from "react";
-//#region src/components/sidebar/tabs/dropdown.tsx
-/**
-* Renders the given tabs as a dropdown per tabs group, one for each root folder on the
-* current page's path, letting users switch between root folders of the same type.
-*/
-function SidebarTabsDropdown({ options, placeholder, ...props }) {
-	return useTabsGroups(options).map((group, i) => /* @__PURE__ */ jsx(Dropdown, {
-		options: group.options,
-		placeholder,
-		...props
-	}, i));
-}
-function Dropdown({ options, placeholder, ...props }) {
-	const [open, setOpen] = useState(false);
-	const { closeOnRedirect } = useSidebar();
-	const pathname = usePathname();
-	const selected = useMemo(() => {
-		return options.findLast((item) => isLayoutTabActive(item, pathname));
-	}, [options, pathname]);
-	const onClick = () => {
-		closeOnRedirect.current = false;
-		setOpen(false);
-	};
-	const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "size-9 shrink-0 empty:hidden md:size-5",
-		children: selected.icon
-	}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-		className: "text-sm font-medium",
-		children: selected.title
-	}), /* @__PURE__ */ jsx("p", {
-		className: "text-sm text-fd-muted-foreground empty:hidden md:hidden",
-		children: selected.description
-	})] })] }) : placeholder;
-	return /* @__PURE__ */ jsxs(Popover, {
-		open,
-		onOpenChange: setOpen,
-		children: [item && /* @__PURE__ */ jsxs(PopoverTrigger, {
-			...props,
-			className: cn("flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground", props.className),
-			children: [item, /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })]
-		}), /* @__PURE__ */ jsx(PopoverContent, {
-			className: "flex flex-col gap-1 w-(--radix-popover-trigger-width) p-1 fd-scroll-container",
-			children: options.map((item) => {
-				const isActive = selected && item.url === selected.url;
-				if (!isActive && item.unlisted) return;
-				return /* @__PURE__ */ jsxs(Link, {
-					href: item.url,
-					onClick,
-					...item.props,
-					className: cn("flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item.props?.className),
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: "shrink-0 size-9 md:mb-auto md:size-5 empty:hidden",
-							children: item.icon
-						}),
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-							className: "text-sm font-medium leading-none",
-							children: item.title
-						}), /* @__PURE__ */ jsx("p", {
-							className: "text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden",
-							children: item.description
-						})] }),
-						/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive && "invisible") })
-					]
-				}, item.url);
-			})
-		})]
-	});
-}
-const isTabActive = isLayoutTabActive;
-//#endregion
-export { SidebarTabsDropdown, isTabActive };
+export * from '@vx-oss/docs-vezham-ui/components/sidebar/tabs/dropdown';

package/dist/components/sidebar/tabs/index.js

@@ -1,46 +1 @@
-import { jsx } from "react/jsx-runtime";
-//#region src/components/sidebar/tabs/index.tsx
-const defaultTransform = (option, node) => {
-	if (!node.icon) return option;
-	return {
-		...option,
-		icon: /* @__PURE__ */ jsx("div", {
-			className: "size-full [&_svg]:size-full max-md:p-1.5 max-md:rounded-md max-md:border max-md:bg-fd-secondary",
-			children: node.icon
-		})
-	};
-};
-function getSidebarTabs(tree, { transform = defaultTransform } = {}) {
-	const results = [];
-	function scanOptions(node, unlisted) {
-		if ("root" in node && node.root) {
-			const urls = getFolderUrls(node);
-			if (urls.size > 0) {
-				const option = {
-					url: urls.values().next().value ?? "",
-					title: node.name,
-					icon: node.icon,
-					unlisted,
-					description: node.description,
-					urls
-				};
-				const mapped = transform ? transform(option, node) : option;
-				if (mapped) results.push(mapped);
-			}
-		}
-		for (const child of node.children) if (child.type === "folder") scanOptions(child, unlisted);
-	}
-	scanOptions(tree);
-	if (tree.fallback) scanOptions(tree.fallback, true);
-	return results;
-}
-function getFolderUrls(folder, output = /* @__PURE__ */ new Set()) {
-	if (folder.index) output.add(folder.index.url);
-	for (const child of folder.children) {
-		if (child.type === "page" && !child.external) output.add(child.url);
-		if (child.type === "folder") getFolderUrls(child, output);
-	}
-	return output;
-}
-//#endregion
-export { getSidebarTabs };
+export * from '@vx-oss/docs-vezham-ui/components/sidebar/tabs';

package/dist/components/steps.js

@@ -1,16 +1 @@
-import { jsx } from "react/jsx-runtime";
-//#region src/components/steps.tsx
-function Steps({ children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "fd-steps",
-		children
-	});
-}
-function Step({ children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "fd-step",
-		children
-	});
-}
-//#endregion
-export { Step, Steps };
+export * from '@vx-oss/docs-vezham-ui/components/steps';

package/dist/components/tabs.js

@@ -1,95 +1 @@
-"use client";
-import { cn } from "../utils/cn.js";
-import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1 } from "./ui/tabs.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
-//#region src/components/tabs.tsx
-const TabsContext = createContext(null);
-function useTabContext() {
-	const ctx = useContext(TabsContext);
-	if (!ctx) throw new Error("You must wrap your component in <Tabs>");
-	return ctx;
-}
-function TabsList(props) {
-	return /* @__PURE__ */ jsx(TabsList$1, {
-		...props,
-		className: cn("flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose", props.className)
-	});
-}
-function TabsTrigger(props) {
-	return /* @__PURE__ */ jsx(TabsTrigger$1, {
-		...props,
-		className: cn("inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-fd-primary data-[state=active]:text-fd-primary", props.className)
-	});
-}
-function Tabs({ ref, className, items, label, defaultIndex = 0, defaultValue = items ? escapeValue(items[defaultIndex]) : void 0, ...props }) {
-	const [value, setValue] = useState(defaultValue);
-	const collection = useMemo(() => [], []);
-	return /* @__PURE__ */ jsxs(Tabs$1, {
-		ref,
-		className: cn("flex flex-col overflow-hidden rounded-xl border bg-fd-secondary my-4", className),
-		value,
-		onValueChange: (v) => {
-			if (items && !items.some((item) => escapeValue(item) === v)) return;
-			setValue(v);
-		},
-		...props,
-		children: [items && /* @__PURE__ */ jsxs(TabsList, { children: [label && /* @__PURE__ */ jsx("span", {
-			className: "text-sm font-medium my-auto me-auto",
-			children: label
-		}), items.map((item) => /* @__PURE__ */ jsx(TabsTrigger, {
-			value: escapeValue(item),
-			children: item
-		}, item))] }), /* @__PURE__ */ jsx(TabsContext.Provider, {
-			value: useMemo(() => ({
-				items,
-				collection
-			}), [collection, items]),
-			children: props.children
-		})]
-	});
-}
-function Tab({ value, ...props }) {
-	const { items } = useTabContext();
-	const resolved = value ?? items?.at(useCollectionIndex());
-	if (!resolved) throw new Error("Failed to resolve tab `value`, please pass a `value` prop to the Tab component.");
-	return /* @__PURE__ */ jsx(TabsContent, {
-		value: escapeValue(resolved),
-		...props,
-		children: props.children
-	});
-}
-function TabsContent({ value, className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsContent$1, {
-		value,
-		className: cn("p-4 text-[0.9375rem] bg-fd-background rounded-xl outline-none prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none", className),
-		...props,
-		children: props.children
-	});
-}
-/**
-* Inspired by Headless UI.
-*
-* Return the index of children, this is made possible by registering the order of render from children using React context.
-* This is supposed by work with pre-rendering & pure client-side rendering.
-*/
-function useCollectionIndex() {
-	const key = useId();
-	const { collection } = useTabContext();
-	useEffect(() => {
-		return () => {
-			const idx = collection.indexOf(key);
-			if (idx !== -1) collection.splice(idx, 1);
-		};
-	}, [key, collection]);
-	if (!collection.includes(key)) collection.push(key);
-	return collection.indexOf(key);
-}
-/**
-* only escape whitespaces in values in simple mode
-*/
-function escapeValue(v) {
-	return v.toLowerCase().replace(/\s/, "-");
-}
-//#endregion
-export { Tab, Tabs, TabsContent, TabsList, TabsTrigger };
+export * from '@vx-oss/docs-vezham-ui/components/tabs';