boltdocs 2.7.9 → 2.7.11

package/dist/image-DtrI2cw3.cjs

@@ -0,0 +1,268 @@
+/**
+ * Boltdocs - https://boltdocs.vercel.app
+ * Copyright (c) 2026 Jesus Alcala
+ * Licensed under the MIT License.
+ */
+const require_icons_dev = require('./icons-dev-3cZMyt8r.cjs');
+let react = require("react");
+react = require_icons_dev.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+react_aria_components = require_icons_dev.__toESM(react_aria_components);
+
+//#region src/client/app/theme-context.tsx
+const THEME_CONTEXT_SYMBOL = Symbol.for("__BDOCS_THEME_CONTEXT__");
+const THEME_INSTANCE_SYMBOL = Symbol.for("__BDOCS_THEME_INSTANCE__");
+const THEME_EVENT = "boltdocs-theme-change";
+const ThemeContext = globalThis[THEME_CONTEXT_SYMBOL] || (globalThis[THEME_CONTEXT_SYMBOL] = (0, react.createContext)(void 0));
+function ThemeProvider({ children }) {
+	const [theme, setThemeState] = (0, react.useState)("system");
+	const [resolvedTheme, setResolvedTheme] = (0, react.useState)("dark");
+	const applyTheme = (targetTheme) => {
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const isDark = targetTheme === "dark" || targetTheme === "system" && mediaQuery.matches;
+		const root = window.document.documentElement;
+		root.classList.toggle("dark", isDark);
+		root.dataset.theme = isDark ? "dark" : "light";
+		setResolvedTheme(isDark ? "dark" : "light");
+	};
+	(0, react.useEffect)(() => {
+		const savedTheme = localStorage.getItem("boltdocs-theme");
+		if (savedTheme) {
+			setThemeState(savedTheme);
+			applyTheme(savedTheme);
+		} else applyTheme("system");
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const listener = () => {
+			if ((localStorage.getItem("boltdocs-theme") || "system") === "system") applyTheme("system");
+		};
+		mediaQuery.addEventListener("change", listener);
+		return () => mediaQuery.removeEventListener("change", listener);
+	}, []);
+	const setTheme = (newTheme) => {
+		setThemeState(newTheme);
+		localStorage.setItem("boltdocs-theme", newTheme);
+		applyTheme(newTheme);
+		if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent(THEME_EVENT, { detail: newTheme }));
+	};
+	const value = {
+		theme,
+		resolvedTheme,
+		setTheme
+	};
+	if (typeof globalThis !== "undefined") globalThis[THEME_INSTANCE_SYMBOL] = value;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+function useTheme() {
+	const context = (0, react.use)(ThemeContext);
+	const [, forceUpdate] = (0, react.useState)({});
+	(0, react.useEffect)(() => {
+		if (context) return;
+		const handler = () => forceUpdate({});
+		window.addEventListener(THEME_EVENT, handler);
+		return () => window.removeEventListener(THEME_EVENT, handler);
+	}, [context]);
+	if (!context && typeof globalThis !== "undefined" && globalThis[THEME_INSTANCE_SYMBOL]) return globalThis[THEME_INSTANCE_SYMBOL];
+	if (context === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+	return context;
+}
+
+//#endregion
+//#region src/client/components/primitives/heading.tsx
+const Heading = react.forwardRef(({ level, id, children, className, showAnchor = true, anchorPosition = "wrap", anchorIcon, anchorClassName, ...props }, ref) => {
+	const Tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`;
+	const hasAnchor = !!(id && showAnchor);
+	const defaultIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_dev.Link$1, {
+		className: require_icons_dev.cn("transition-all duration-200", anchorPosition === "wrap" ? "opacity-0 ml-2 text-muted/50 group-hover:text-primary-500 group-hover:opacity-100" : "text-muted/50 hover:text-primary-500"),
+		size: 16
+	});
+	const icon = anchorIcon ?? defaultIcon;
+	const renderContent = () => {
+		if (!hasAnchor) return children;
+		if (anchorPosition === "wrap") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_icons_dev.Link, {
+			href: `#${id}`,
+			className: require_icons_dev.cn("header-anchor flex flex-row items-center no-underline text-inherit", anchorClassName),
+			"aria-label": "Anchor",
+			children: [children, icon]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			anchorPosition === "before" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_dev.Link, {
+				href: `#${id}`,
+				className: require_icons_dev.cn("header-anchor mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200", anchorClassName),
+				"aria-label": "Anchor",
+				children: icon
+			}),
+			children,
+			anchorPosition === "after" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_dev.Link, {
+				href: `#${id}`,
+				className: require_icons_dev.cn("header-anchor ml-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200", anchorClassName),
+				"aria-label": "Anchor",
+				children: icon
+			})
+		] });
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		ref,
+		id,
+		className: require_icons_dev.cn("boltdocs-heading relative group flex items-center scroll-mt-24", className),
+		...props,
+		children: renderContent()
+	});
+});
+Heading.displayName = "Heading";
+
+//#endregion
+//#region src/client/components/primitives/code-block.tsx
+/**
+* Root component for code blocks.
+* Handles background, borders, and general layout.
+*/
+const CodeBlock = ({ children, className, plain = false, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_icons_dev.cn("not-prose boltdocs-code-block", "group relative overflow-hidden bg-(--color-code-bg)", "contain-layout contain-paint", { "my-6 rounded-xl border border-subtle": !plain }, className),
+		...props,
+		children
+	});
+};
+/**
+* Header section of the code block.
+* Usually contains the title, language label, and action buttons.
+*/
+const CodeBlockHeader = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_icons_dev.cn("flex h-9 items-center justify-between px-4 py-1.5", "text-[13px] font-medium text-muted", className),
+		...props,
+		children
+	});
+};
+/**
+* Horizontal group for organizing items within the header (e.g., logo + label).
+*/
+const CodeBlockGroup = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_icons_dev.cn("flex items-center space-x-2", className),
+		...props,
+		children
+	});
+};
+/**
+* Content area of the code block.
+* Wraps the `<pre>` or `<div>` containing the code.
+*/
+const CodeBlockContent = ({ className, children, shouldTruncate = false, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_icons_dev.cn("relative", { "[&>pre]:max-h-[300px] [&>pre]:overflow-hidden [&>div>pre]:max-h-[300px] [&>div>pre]:overflow-hidden": shouldTruncate }, className),
+		...props,
+		children
+	});
+};
+CodeBlock.Header = CodeBlockHeader;
+CodeBlock.Group = CodeBlockGroup;
+CodeBlock.Content = CodeBlockContent;
+
+//#endregion
+//#region src/client/components/primitives/tooltip.tsx
+/**
+* Modern, accessible Tooltip component built with React Aria Components.
+* Featuring glassmorphism, animations, and smart positioning.
+*/
+const TooltipContent = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Tooltip, {
+		...props,
+		offset: 8,
+		className: (values) => require_icons_dev.cn("group z-50 overflow-visible rounded-md bg-surface px-2.5 py-1.5 text-xs font-medium text-body ring-1 ring-subtle outline-hidden select-none", "data-entering:animate-in data-entering:fade-in data-entering:zoom-in-95 data-entering:duration-100", "data-exiting:animate-out data-exiting:fade-out data-exiting:zoom-out-95 data-exiting:duration-75", "data-[placement=top]:slide-in-from-bottom-1", "data-[placement=bottom]:slide-in-from-top-1", "data-[placement=left]:slide-in-from-right-1", "data-[placement=right]:slide-in-from-left-1", typeof className === "function" ? className(values) : className),
+		children: (values) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.OverlayArrow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			width: 8,
+			height: 8,
+			viewBox: "0 0 8 8",
+			className: "fill-bg-surface/90 stroke-border-subtle group-data-[placement=bottom]:rotate-180 group-data-[placement=left]:-rotate-90 group-data-[placement=right]:rotate-90",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: "Arrow" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M0 0 L4 4 L8 0" })]
+		}) }), typeof children === "function" ? children(values) : children] })
+	});
+};
+const Tooltip = ({ content, children, delay = 500, closeDelay = 0, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.TooltipTrigger, {
+		delay,
+		closeDelay,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
+			...props,
+			children: content
+		})]
+	});
+};
+Tooltip.Root = Tooltip;
+Tooltip.Content = TooltipContent;
+
+//#endregion
+//#region src/client/components/primitives/image.tsx
+/**
+* A responsive image component that automatically supports dark and light theme variations
+* via the `theme` prop.
+*/
+function Image({ theme, className, ...props }) {
+	const { resolvedTheme } = useTheme();
+	if (theme && theme !== resolvedTheme) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		className: require_icons_dev.cn("max-w-full h-auto rounded-lg my-8", className),
+		...props
+	});
+}
+
+//#endregion
+Object.defineProperty(exports, 'CodeBlock', {
+  enumerable: true,
+  get: function () {
+    return CodeBlock;
+  }
+});
+Object.defineProperty(exports, 'CodeBlockContent', {
+  enumerable: true,
+  get: function () {
+    return CodeBlockContent;
+  }
+});
+Object.defineProperty(exports, 'CodeBlockGroup', {
+  enumerable: true,
+  get: function () {
+    return CodeBlockGroup;
+  }
+});
+Object.defineProperty(exports, 'CodeBlockHeader', {
+  enumerable: true,
+  get: function () {
+    return CodeBlockHeader;
+  }
+});
+Object.defineProperty(exports, 'Heading', {
+  enumerable: true,
+  get: function () {
+    return Heading;
+  }
+});
+Object.defineProperty(exports, 'Image', {
+  enumerable: true,
+  get: function () {
+    return Image;
+  }
+});
+Object.defineProperty(exports, 'ThemeProvider', {
+  enumerable: true,
+  get: function () {
+    return ThemeProvider;
+  }
+});
+Object.defineProperty(exports, 'Tooltip', {
+  enumerable: true,
+  get: function () {
+    return Tooltip;
+  }
+});
+Object.defineProperty(exports, 'useTheme', {
+  enumerable: true,
+  get: function () {
+    return useTheme;
+  }
+});

package/dist/image-jxPb-2iV.js

@@ -0,0 +1,214 @@
+/**
+ * Boltdocs - https://boltdocs.vercel.app
+ * Copyright (c) 2026 Jesus Alcala
+ * Licensed under the MIT License.
+ */
+import { _ as Link$1, y as cn, z as Link } from "./icons-dev-Df8OQ481.js";
+import * as React$1 from "react";
+import { createContext, use, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as RAC from "react-aria-components";
+
+//#region src/client/app/theme-context.tsx
+const THEME_CONTEXT_SYMBOL = Symbol.for("__BDOCS_THEME_CONTEXT__");
+const THEME_INSTANCE_SYMBOL = Symbol.for("__BDOCS_THEME_INSTANCE__");
+const THEME_EVENT = "boltdocs-theme-change";
+const ThemeContext = globalThis[THEME_CONTEXT_SYMBOL] || (globalThis[THEME_CONTEXT_SYMBOL] = createContext(void 0));
+function ThemeProvider({ children }) {
+	const [theme, setThemeState] = useState("system");
+	const [resolvedTheme, setResolvedTheme] = useState("dark");
+	const applyTheme = (targetTheme) => {
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const isDark = targetTheme === "dark" || targetTheme === "system" && mediaQuery.matches;
+		const root = window.document.documentElement;
+		root.classList.toggle("dark", isDark);
+		root.dataset.theme = isDark ? "dark" : "light";
+		setResolvedTheme(isDark ? "dark" : "light");
+	};
+	useEffect(() => {
+		const savedTheme = localStorage.getItem("boltdocs-theme");
+		if (savedTheme) {
+			setThemeState(savedTheme);
+			applyTheme(savedTheme);
+		} else applyTheme("system");
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const listener = () => {
+			if ((localStorage.getItem("boltdocs-theme") || "system") === "system") applyTheme("system");
+		};
+		mediaQuery.addEventListener("change", listener);
+		return () => mediaQuery.removeEventListener("change", listener);
+	}, []);
+	const setTheme = (newTheme) => {
+		setThemeState(newTheme);
+		localStorage.setItem("boltdocs-theme", newTheme);
+		applyTheme(newTheme);
+		if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent(THEME_EVENT, { detail: newTheme }));
+	};
+	const value = {
+		theme,
+		resolvedTheme,
+		setTheme
+	};
+	if (typeof globalThis !== "undefined") globalThis[THEME_INSTANCE_SYMBOL] = value;
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+function useTheme() {
+	const context = use(ThemeContext);
+	const [, forceUpdate] = useState({});
+	useEffect(() => {
+		if (context) return;
+		const handler = () => forceUpdate({});
+		window.addEventListener(THEME_EVENT, handler);
+		return () => window.removeEventListener(THEME_EVENT, handler);
+	}, [context]);
+	if (!context && typeof globalThis !== "undefined" && globalThis[THEME_INSTANCE_SYMBOL]) return globalThis[THEME_INSTANCE_SYMBOL];
+	if (context === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+	return context;
+}
+
+//#endregion
+//#region src/client/components/primitives/heading.tsx
+const Heading = React$1.forwardRef(({ level, id, children, className, showAnchor = true, anchorPosition = "wrap", anchorIcon, anchorClassName, ...props }, ref) => {
+	const Tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`;
+	const hasAnchor = !!(id && showAnchor);
+	const defaultIcon = /* @__PURE__ */ jsx(Link, {
+		className: cn("transition-all duration-200", anchorPosition === "wrap" ? "opacity-0 ml-2 text-muted/50 group-hover:text-primary-500 group-hover:opacity-100" : "text-muted/50 hover:text-primary-500"),
+		size: 16
+	});
+	const icon = anchorIcon ?? defaultIcon;
+	const renderContent = () => {
+		if (!hasAnchor) return children;
+		if (anchorPosition === "wrap") return /* @__PURE__ */ jsxs(Link$1, {
+			href: `#${id}`,
+			className: cn("header-anchor flex flex-row items-center no-underline text-inherit", anchorClassName),
+			"aria-label": "Anchor",
+			children: [children, icon]
+		});
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			anchorPosition === "before" && /* @__PURE__ */ jsx(Link$1, {
+				href: `#${id}`,
+				className: cn("header-anchor mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200", anchorClassName),
+				"aria-label": "Anchor",
+				children: icon
+			}),
+			children,
+			anchorPosition === "after" && /* @__PURE__ */ jsx(Link$1, {
+				href: `#${id}`,
+				className: cn("header-anchor ml-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200", anchorClassName),
+				"aria-label": "Anchor",
+				children: icon
+			})
+		] });
+	};
+	return /* @__PURE__ */ jsx(Tag, {
+		ref,
+		id,
+		className: cn("boltdocs-heading relative group flex items-center scroll-mt-24", className),
+		...props,
+		children: renderContent()
+	});
+});
+Heading.displayName = "Heading";
+
+//#endregion
+//#region src/client/components/primitives/code-block.tsx
+/**
+* Root component for code blocks.
+* Handles background, borders, and general layout.
+*/
+const CodeBlock = ({ children, className, plain = false, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("not-prose boltdocs-code-block", "group relative overflow-hidden bg-(--color-code-bg)", "contain-layout contain-paint", { "my-6 rounded-xl border border-subtle": !plain }, className),
+		...props,
+		children
+	});
+};
+/**
+* Header section of the code block.
+* Usually contains the title, language label, and action buttons.
+*/
+const CodeBlockHeader = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-9 items-center justify-between px-4 py-1.5", "text-[13px] font-medium text-muted", className),
+		...props,
+		children
+	});
+};
+/**
+* Horizontal group for organizing items within the header (e.g., logo + label).
+*/
+const CodeBlockGroup = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center space-x-2", className),
+		...props,
+		children
+	});
+};
+/**
+* Content area of the code block.
+* Wraps the `<pre>` or `<div>` containing the code.
+*/
+const CodeBlockContent = ({ className, children, shouldTruncate = false, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative", { "[&>pre]:max-h-[300px] [&>pre]:overflow-hidden [&>div>pre]:max-h-[300px] [&>div>pre]:overflow-hidden": shouldTruncate }, className),
+		...props,
+		children
+	});
+};
+CodeBlock.Header = CodeBlockHeader;
+CodeBlock.Group = CodeBlockGroup;
+CodeBlock.Content = CodeBlockContent;
+
+//#endregion
+//#region src/client/components/primitives/tooltip.tsx
+/**
+* Modern, accessible Tooltip component built with React Aria Components.
+* Featuring glassmorphism, animations, and smart positioning.
+*/
+const TooltipContent = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(RAC.Tooltip, {
+		...props,
+		offset: 8,
+		className: (values) => cn("group z-50 overflow-visible rounded-md bg-surface px-2.5 py-1.5 text-xs font-medium text-body ring-1 ring-subtle outline-hidden select-none", "data-entering:animate-in data-entering:fade-in data-entering:zoom-in-95 data-entering:duration-100", "data-exiting:animate-out data-exiting:fade-out data-exiting:zoom-out-95 data-exiting:duration-75", "data-[placement=top]:slide-in-from-bottom-1", "data-[placement=bottom]:slide-in-from-top-1", "data-[placement=left]:slide-in-from-right-1", "data-[placement=right]:slide-in-from-left-1", typeof className === "function" ? className(values) : className),
+		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RAC.OverlayArrow, { children: /* @__PURE__ */ jsxs("svg", {
+			width: 8,
+			height: 8,
+			viewBox: "0 0 8 8",
+			className: "fill-bg-surface/90 stroke-border-subtle group-data-[placement=bottom]:rotate-180 group-data-[placement=left]:-rotate-90 group-data-[placement=right]:rotate-90",
+			children: [/* @__PURE__ */ jsx("title", { children: "Arrow" }), /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" })]
+		}) }), typeof children === "function" ? children(values) : children] })
+	});
+};
+const Tooltip = ({ content, children, delay = 500, closeDelay = 0, ...props }) => {
+	return /* @__PURE__ */ jsxs(RAC.TooltipTrigger, {
+		delay,
+		closeDelay,
+		children: [children, /* @__PURE__ */ jsx(TooltipContent, {
+			...props,
+			children: content
+		})]
+	});
+};
+Tooltip.Root = Tooltip;
+Tooltip.Content = TooltipContent;
+
+//#endregion
+//#region src/client/components/primitives/image.tsx
+/**
+* A responsive image component that automatically supports dark and light theme variations
+* via the `theme` prop.
+*/
+function Image({ theme, className, ...props }) {
+	const { resolvedTheme } = useTheme();
+	if (theme && theme !== resolvedTheme) return null;
+	return /* @__PURE__ */ jsx("img", {
+		className: cn("max-w-full h-auto rounded-lg my-8", className),
+		...props
+	});
+}
+
+//#endregion
+export { CodeBlockGroup as a, ThemeProvider as c, CodeBlockContent as i, useTheme as l, Tooltip as n, CodeBlockHeader as o, CodeBlock as r, Heading as s, Image as t };