@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/kernel/components/blocks/toc.js

@@ -0,0 +1,330 @@
+"use client";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/utils/heading-ids.ts
+import { isValidElement } from "react";
+var SELF_CLOSING_TAG_RE = new RegExp("<[^>]+/>", "g");
+var PAIRED_TAG_RE = /<\/?\w[^>]*>/g;
+var MDX_BOLD_RE = /\*\*(.*?)\*\*/g;
+var MDX_ITALIC_RE = /\*(.*?)\*/g;
+var MDX_UNDERLINE_BOLD_RE = /__(.*?)__/g;
+var MDX_UNDERLINE_ITALIC_RE = /_(.*?)_/g;
+var MDX_STRIKETHROUGH_RE = /~~(.*?)~~/g;
+var MDX_INLINE_CODE_RE = /`(.*?)`/g;
+var MDX_LINK_RE = /\[(.*?)\]\(.*?\)/g;
+var NON_ALPHANUMERIC_RE = /[^a-z0-9]+/g;
+var LEADING_TRAILING_HYPHEN_RE = /^-+|-+$/g;
+var LEADING_DIGIT_RE = /^(\d)/;
+var HEADING_RE = /^(#{1,6})[ \t]+(.+?)\s*#*\s*$/gm;
+var FENCED_CODE_RE = /```[\s\S]*?```|~~~[\s\S]*?~~~/g;
+function extractText(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (node == null || typeof node === "boolean") return "";
+  if (Array.isArray(node)) {
+    return node.map(extractText).join("");
+  }
+  if (isValidElement(node)) {
+    const element = node;
+    return element.props.children === void 0 ? "" : extractText(element.props.children);
+  }
+  return "";
+}
+function cleanHeadingText(input) {
+  const text = typeof input === "string" ? input : extractText(input);
+  return text.replace(SELF_CLOSING_TAG_RE, "").replace(PAIRED_TAG_RE, "").replace(MDX_BOLD_RE, "$1").replace(MDX_ITALIC_RE, "$1").replace(MDX_UNDERLINE_BOLD_RE, "$1").replace(MDX_UNDERLINE_ITALIC_RE, "$1").replace(MDX_STRIKETHROUGH_RE, "$1").replace(MDX_INLINE_CODE_RE, "$1").replace(MDX_LINK_RE, "$1").trim();
+}
+function slugify(text) {
+  return text.toLowerCase().replace(NON_ALPHANUMERIC_RE, "-").replace(LEADING_TRAILING_HYPHEN_RE, "").replace(LEADING_DIGIT_RE, "id-$1");
+}
+function headingToHTMLId(input) {
+  try {
+    const id = slugify(cleanHeadingText(input));
+    return id || "empty-heading";
+  } catch {
+    return "empty-heading";
+  }
+}
+function createHeadingIdGenerator() {
+  const usedIds = /* @__PURE__ */ new Map();
+  return (input) => {
+    const baseId = headingToHTMLId(input);
+    if (baseId === "empty-heading") return baseId;
+    const count = usedIds.get(baseId) ?? 0;
+    usedIds.set(baseId, count + 1);
+    return count === 0 ? baseId : `${baseId}-${count}`;
+  };
+}
+function extractMdxHeadings(content = "", levels) {
+  const [minDepth, maxDepth] = levels;
+  const headingId = createHeadingIdGenerator();
+  const headings = [];
+  const searchableContent = content.replace(FENCED_CODE_RE, "");
+  HEADING_RE.lastIndex = 0;
+  while (true) {
+    const match = HEADING_RE.exec(searchableContent);
+    if (!match) break;
+    const marker = match[1];
+    const rawText = match[2];
+    if (!marker || !rawText) continue;
+    const level = marker.length;
+    const text = cleanHeadingText(rawText);
+    const id = headingId(rawText);
+    if (!text || id === "empty-heading") continue;
+    if (level < minDepth || level > maxDepth) continue;
+    headings.push({ id, level, text });
+  }
+  return headings;
+}
+
+// src/kernel/components/blocks/toc.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_LEVELS = [2, 3];
+var ACTIVATION_OFFSET = 96;
+var BOTTOM_THRESHOLD = 2;
+var SCROLL_KEYS = /* @__PURE__ */ new Set([
+  " ",
+  "ArrowDown",
+  "ArrowUp",
+  "End",
+  "Home",
+  "PageDown",
+  "PageUp"
+]);
+function documentIsAtBottom() {
+  const root = document.documentElement;
+  return Math.ceil(window.scrollY + window.innerHeight) >= root.scrollHeight - BOTTOM_THRESHOLD;
+}
+function resolveActiveHeading(elements) {
+  if (documentIsAtBottom()) return elements.at(-1)?.id ?? "";
+  let nextActiveId = elements[0]?.id ?? "";
+  for (const element of elements) {
+    if (element.getBoundingClientRect().top <= ACTIVATION_OFFSET) {
+      nextActiveId = element.id;
+    } else {
+      break;
+    }
+  }
+  return nextActiveId;
+}
+function useTocActiveState(headingIds) {
+  const [activeId, setActiveId] = useState("");
+  const [indicatorStyle, setIndicatorStyle] = useState({
+    height: 0,
+    transform: 0
+  });
+  const [scrollMask, setScrollMask] = useState({
+    bottom: false,
+    top: false
+  });
+  const clickedIdRef = useRef(null);
+  const contentRef = useRef(null);
+  const frameRef = useRef(null);
+  const viewportRef = useRef(null);
+  const clearClickedId = useCallback(() => {
+    clickedIdRef.current = null;
+  }, []);
+  const updateActiveHeading = useCallback(() => {
+    if (clickedIdRef.current) {
+      setActiveId(
+        (current) => current === clickedIdRef.current ? current : clickedIdRef.current ?? ""
+      );
+      return;
+    }
+    const elements = headingIds.map((id) => document.getElementById(id)).filter((element) => Boolean(element));
+    if (elements.length === 0) return;
+    const nextActiveId = resolveActiveHeading(elements);
+    setActiveId(
+      (current) => current === nextActiveId ? current : nextActiveId
+    );
+  }, [headingIds]);
+  const updateIndicator = useCallback(() => {
+    const container = contentRef.current;
+    if (!container || !activeId) {
+      setIndicatorStyle({ height: 0, transform: 0 });
+      return;
+    }
+    const activeLink = Array.from(
+      container.querySelectorAll("[data-toc-link]")
+    ).find((link) => link.dataset.tocId === activeId);
+    if (!activeLink) {
+      setIndicatorStyle({ height: 0, transform: 0 });
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const activeRect = activeLink.getBoundingClientRect();
+    const nextStyle = {
+      height: activeRect.height,
+      transform: activeRect.top - containerRect.top
+    };
+    setIndicatorStyle(
+      (current) => current.height === nextStyle.height && current.transform === nextStyle.transform ? current : nextStyle
+    );
+  }, [activeId]);
+  const updateViewport = useCallback(() => {
+    updateIndicator();
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const hasOverflow = viewport.scrollHeight > viewport.clientHeight + 1;
+    const nextMask = {
+      bottom: hasOverflow && viewport.scrollTop + viewport.clientHeight < viewport.scrollHeight - 1,
+      top: hasOverflow && viewport.scrollTop > 0
+    };
+    setScrollMask(
+      (current) => current.top === nextMask.top && current.bottom === nextMask.bottom ? current : nextMask
+    );
+  }, [updateIndicator]);
+  useEffect(() => {
+    const scheduleUpdate = () => {
+      if (frameRef.current !== null) return;
+      frameRef.current = window.requestAnimationFrame(() => {
+        frameRef.current = null;
+        updateActiveHeading();
+        updateViewport();
+      });
+    };
+    const handleKeyDown = (event) => {
+      if (SCROLL_KEYS.has(event.key)) clearClickedId();
+    };
+    scheduleUpdate();
+    window.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate);
+    window.addEventListener("hashchange", scheduleUpdate);
+    window.addEventListener("wheel", clearClickedId, { passive: true });
+    window.addEventListener("touchstart", clearClickedId, { passive: true });
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+      window.removeEventListener("hashchange", scheduleUpdate);
+      window.removeEventListener("wheel", clearClickedId);
+      window.removeEventListener("touchstart", clearClickedId);
+      window.removeEventListener("keydown", handleKeyDown);
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [clearClickedId, updateActiveHeading, updateViewport]);
+  useEffect(() => {
+    updateViewport();
+  }, [updateViewport]);
+  const handleTocClick = useCallback((id) => {
+    clickedIdRef.current = id;
+    setActiveId(id);
+  }, []);
+  return {
+    activeId,
+    contentRef,
+    handleTocClick,
+    indicatorStyle,
+    scrollMask,
+    updateViewport,
+    viewportRef
+  };
+}
+function Toc({ className, content, levels = DEFAULT_LEVELS }) {
+  const headings = useMemo(
+    () => extractMdxHeadings(content, levels),
+    [content, levels]
+  );
+  const headingIds = useMemo(
+    () => headings.map((heading) => heading.id),
+    [headings]
+  );
+  const {
+    activeId,
+    contentRef,
+    handleTocClick,
+    indicatorStyle,
+    scrollMask,
+    updateViewport,
+    viewportRef
+  } = useTocActiveState(headingIds);
+  if (headings.length <= 1) return null;
+  const maskImage = scrollMask.top || scrollMask.bottom ? `linear-gradient(to bottom, ${scrollMask.top ? "transparent, black 14px" : "black 0, black 14px"}, ${scrollMask.bottom ? "black calc(100% - 14px), transparent" : "black calc(100% - 14px), black 100%"})` : void 0;
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "On this page", className: cn("text-sm", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-3 px-3 text-[11px] font-semibold uppercase leading-none tracking-wide text-foreground-3", children: "On this page" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: viewportRef,
+        className: "max-h-[calc(100dvh_-_var(--layout-global-nav-height)_-_3rem)] overflow-y-auto pr-2 [scrollbar-gutter:stable] supports-[top:anchor-size(--global-navbar_height)]:max-h-[calc(100dvh_-_anchor-size(--global-navbar_height,3.5rem)_-_3rem)]",
+        onScroll: updateViewport,
+        style: {
+          WebkitMaskImage: maskImage,
+          maskImage
+        },
+        children: /* @__PURE__ */ jsxs("div", { ref: contentRef, className: "relative min-w-0 py-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-1 left-0 top-1 w-px rounded-full bg-stroke-3" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute left-0 w-px rounded-full bg-accent-1 transition-all duration-300 ease-out will-change-transform",
+              style: {
+                height: indicatorStyle.height,
+                transform: `translateY(${indicatorStyle.transform}px) scaleY(${activeId ? 1 : 0.5})`,
+                transformOrigin: "top"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("ol", { className: "flex min-w-0 flex-col gap-0.5 pl-3", children: headings.map((heading, index) => {
+            const active = activeId === heading.id;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                style: {
+                  marginLeft: Math.max(heading.level - levels[0], 0) * 12,
+                  marginTop: heading.level === levels[0] && index > 0 ? 4 : 0
+                },
+                children: /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    "aria-current": active ? "location" : void 0,
+                    className: cn(
+                      "block rounded-button px-2 py-1 text-[13px] leading-snug text-foreground-3 no-underline transition-[background-color,color,font-weight] duration-200 hover:bg-surface-hover hover:text-foreground-1 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+                      active && "bg-surface-active font-medium text-accent-1 shadow-xs"
+                    ),
+                    "data-state": active ? "heading-active" : void 0,
+                    "data-toc-id": heading.id,
+                    "data-toc-link": "",
+                    href: `#${heading.id}`,
+                    onClick: () => handleTocClick(heading.id),
+                    children: /* @__PURE__ */ jsx("span", { className: "block min-w-0 text-wrap break-words", children: heading.text })
+                  }
+                )
+              },
+              heading.id
+            );
+          }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  Toc
+};

package/dist/kernel/components/mdx/components/blockquote.cjs

@@ -0,0 +1,66 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/mdx/components/blockquote.tsx
+var blockquote_exports = {};
+__export(blockquote_exports, {
+  Blockquote: () => Blockquote
+});
+module.exports = __toCommonJS(blockquote_exports);
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/mdx/components/blockquote.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Blockquote({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "blockquote",
+    {
+      className: cn(
+        "my-6 border-l-2 border-accent-1 pl-4 text-sm leading-7 text-foreground-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Blockquote
+});

package/dist/kernel/components/mdx/components/blockquote.d.cts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type BlockquoteProps = React.ComponentPropsWithoutRef<"blockquote">;
+declare function Blockquote({ className, ...props }: BlockquoteProps): react_jsx_runtime.JSX.Element;
+
+export { Blockquote, type BlockquoteProps };

package/dist/kernel/components/mdx/components/blockquote.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type BlockquoteProps = React.ComponentPropsWithoutRef<"blockquote">;
+declare function Blockquote({ className, ...props }: BlockquoteProps): react_jsx_runtime.JSX.Element;
+
+export { Blockquote, type BlockquoteProps };

package/dist/kernel/components/mdx/components/blockquote.js

@@ -0,0 +1,39 @@
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/kernel/components/mdx/components/blockquote.tsx
+import { jsx } from "react/jsx-runtime";
+function Blockquote({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      className: cn(
+        "my-6 border-l-2 border-accent-1 pl-4 text-sm leading-7 text-foreground-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Blockquote
+};

package/dist/kernel/components/mdx/components/callout.cjs

@@ -0,0 +1,137 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/mdx/components/callout.tsx
+var callout_exports = {};
+__export(callout_exports, {
+  Callout: () => Callout,
+  calloutVariants: () => calloutVariants
+});
+module.exports = __toCommonJS(callout_exports);
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/mdx/components/callout.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = require("react/jsx-runtime");
+var calloutVariants = (0, import_class_variance_authority.cva)(
+  "my-6 rounded-callout border p-4 text-sm leading-6 [--callout-bg:color-mix(in_oklab,var(--callout-color)_8%,var(--surface-2))] [--callout-border:color-mix(in_oklab,var(--callout-color)_36%,var(--stroke-2))] [--callout-fg:var(--foreground-2)] [--callout-solid:var(--callout-color)] [--callout-solid-fg:var(--accent-foreground)] [--callout-title:var(--foreground-1)]",
+  {
+    variants: {
+      color: {
+        blue: "[--callout-color:var(--blue-10,var(--accent-1))]",
+        brown: "[--callout-color:var(--brown-10,oklch(44%_0.07_65))]",
+        cyan: "[--callout-color:var(--cyan-10,oklch(48%_0.11_220))]",
+        default: "[--callout-color:var(--foreground-1)] [--callout-solid-fg:var(--surface-1)]",
+        gray: "[--callout-color:var(--foreground-1)] [--callout-solid-fg:var(--surface-1)]",
+        green: "[--callout-color:var(--green-10,oklch(47%_0.13_145))]",
+        lime: "[--callout-color:var(--lime-10,oklch(55%_0.14_125))]",
+        navy: "[--callout-color:var(--navy-10,oklch(34%_0.12_265))]",
+        orange: "[--callout-color:var(--orange-10,oklch(58%_0.16_55))]",
+        pink: "[--callout-color:var(--pink-10,oklch(55%_0.18_350))]",
+        purple: "[--callout-color:var(--purple-10,oklch(48%_0.18_300))]",
+        red: "[--callout-color:var(--red-10,oklch(52%_0.18_30))]",
+        teal: "[--callout-color:var(--teal-10,oklch(48%_0.12_185))]",
+        white: "[--callout-color:var(--surface-1)] [--callout-solid-fg:var(--foreground-1)]",
+        yellow: "[--callout-color:var(--yellow-10,oklch(62%_0.14_90))]"
+      },
+      variant: {
+        outline: "border-[var(--callout-border)] bg-transparent text-[var(--callout-fg)]",
+        soft: "border-[var(--callout-border)] bg-[var(--callout-bg)] text-[var(--callout-fg)]",
+        solid: "border-[var(--callout-solid)] bg-[var(--callout-solid)] text-[var(--callout-solid-fg)]"
+      }
+    },
+    defaultVariants: {
+      color: "default",
+      variant: "soft"
+    }
+  }
+);
+function Callout({
+  children,
+  className,
+  color,
+  icon,
+  title,
+  variant
+}) {
+  const resolvedVariant = variant ?? "soft";
+  const hasIcon = icon !== void 0 && icon !== null && icon !== false;
+  const hasTitle = title !== void 0 && title !== null && title !== false;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "aside",
+    {
+      "data-color": color ?? "default",
+      "data-variant": resolvedVariant,
+      className: cn(calloutVariants({ color, variant }), className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn(hasIcon ? "grid grid-cols-[auto_1fr] gap-x-3" : ""), children: [
+        hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "mt-[0.1875rem] flex size-4 shrink-0 items-center justify-center",
+              resolvedVariant === "solid" ? "text-inherit" : "text-[var(--callout-color)]",
+              "[&_svg]:size-4 [&_svg]:shrink-0"
+            ),
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          hasTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "p",
+            {
+              className: cn(
+                "font-medium",
+                resolvedVariant === "solid" ? "text-inherit" : "text-[var(--callout-title)]"
+              ),
+              children: title
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn(hasTitle ? "mt-1" : ""), children })
+        ] })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Callout,
+  calloutVariants
+});

package/dist/kernel/components/mdx/components/callout.d.cts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+
+declare const calloutVariants: (props?: ({
+    color?: "blue" | "brown" | "cyan" | "default" | "gray" | "green" | "lime" | "navy" | "orange" | "pink" | "purple" | "red" | "teal" | "white" | "yellow" | null | undefined;
+    variant?: "outline" | "soft" | "solid" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CalloutProps = VariantProps<typeof calloutVariants> & {
+    children?: ReactNode;
+    className?: string;
+    icon?: ReactNode;
+    title?: ReactNode;
+};
+declare function Callout({ children, className, color, icon, title, variant, }: CalloutProps): react_jsx_runtime.JSX.Element;
+
+export { Callout, type CalloutProps, calloutVariants };

package/dist/kernel/components/mdx/components/callout.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+
+declare const calloutVariants: (props?: ({
+    color?: "blue" | "brown" | "cyan" | "default" | "gray" | "green" | "lime" | "navy" | "orange" | "pink" | "purple" | "red" | "teal" | "white" | "yellow" | null | undefined;
+    variant?: "outline" | "soft" | "solid" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CalloutProps = VariantProps<typeof calloutVariants> & {
+    children?: ReactNode;
+    className?: string;
+    icon?: ReactNode;
+    title?: ReactNode;
+};
+declare function Callout({ children, className, color, icon, title, variant, }: CalloutProps): react_jsx_runtime.JSX.Element;
+
+export { Callout, type CalloutProps, calloutVariants };