@publish.os/nextjs 0.0.1-alpha.5 → 0.0.1-alpha.7

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

@@ -1,110 +1,13 @@
 "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
+// src/components/block/navigation/toc.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
+import {
+  extractMdxHeadings
+} from "@publish.os/nextjs/utils/heading-ids";
 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([
+var DEFAULT_LEVELS = [2, 3], ACTIVATION_OFFSET = 96, BOTTOM_THRESHOLD = 2, SCROLL_KEYS = /* @__PURE__ */ new Set([
   " ",
   "ArrowDown",
   "ArrowUp",
@@ -114,81 +17,66 @@ var SCROLL_KEYS = /* @__PURE__ */ new Set([
   "PageUp"
 ]);
 function documentIsAtBottom() {
-  const root = document.documentElement;
+  let 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) {
+  for (let element of elements)
+    if (element.getBoundingClientRect().top <= ACTIVATION_OFFSET)
       nextActiveId = element.id;
-    } else {
+    else
       break;
-    }
-  }
   return nextActiveId;
 }
 function useTocActiveState(headingIds) {
-  const [activeId, setActiveId] = useState("");
-  const [indicatorStyle, setIndicatorStyle] = useState({
+  let [activeId, setActiveId] = useState(""), [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(() => {
+  }), [scrollMask, setScrollMask] = useState({
+    bottom: !1,
+    top: !1
+  }), clickedIdRef = useRef(null), contentRef = useRef(null), frameRef = useRef(null), viewportRef = useRef(null), clearClickedId = useCallback(() => {
     clickedIdRef.current = null;
-  }, []);
-  const updateActiveHeading = useCallback(() => {
+  }, []), 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));
+    let elements = headingIds.map((id) => document.getElementById(id)).filter((element) => !!element);
     if (elements.length === 0) return;
-    const nextActiveId = resolveActiveHeading(elements);
+    let nextActiveId = resolveActiveHeading(elements);
     setActiveId(
       (current) => current === nextActiveId ? current : nextActiveId
     );
-  }, [headingIds]);
-  const updateIndicator = useCallback(() => {
-    const container = contentRef.current;
+  }, [headingIds]), updateIndicator = useCallback(() => {
+    let container = contentRef.current;
     if (!container || !activeId) {
       setIndicatorStyle({ height: 0, transform: 0 });
       return;
     }
-    const activeLink = Array.from(
+    let 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 = {
+    let containerRect = container.getBoundingClientRect(), activeRect = activeLink.getBoundingClientRect(), 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(() => {
+  }, [activeId]), updateViewport = useCallback(() => {
     updateIndicator();
-    const viewport = viewportRef.current;
+    let viewport = viewportRef.current;
     if (!viewport) return;
-    const hasOverflow = viewport.scrollHeight > viewport.clientHeight + 1;
-    const nextMask = {
+    let hasOverflow = viewport.scrollHeight > viewport.clientHeight + 1, nextMask = {
       bottom: hasOverflow && viewport.scrollTop + viewport.clientHeight < viewport.scrollHeight - 1,
       top: hasOverflow && viewport.scrollTop > 0
     };
@@ -197,43 +85,21 @@ function useTocActiveState(headingIds) {
     );
   }, [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();
+    let scheduleUpdate = () => {
+      frameRef.current === null && (frameRef.current = window.requestAnimationFrame(() => {
+        frameRef.current = null, updateActiveHeading(), updateViewport();
+      }));
+    }, handleKeyDown = (event) => {
+      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;
-      }
+    return scheduleUpdate(), window.addEventListener("scroll", scheduleUpdate, { passive: !0 }), window.addEventListener("resize", scheduleUpdate), window.addEventListener("hashchange", scheduleUpdate), window.addEventListener("wheel", clearClickedId, { passive: !0 }), window.addEventListener("touchstart", clearClickedId, { passive: !0 }), window.addEventListener("keydown", handleKeyDown), () => {
+      window.removeEventListener("scroll", scheduleUpdate), window.removeEventListener("resize", scheduleUpdate), window.removeEventListener("hashchange", scheduleUpdate), window.removeEventListener("wheel", clearClickedId), window.removeEventListener("touchstart", clearClickedId), window.removeEventListener("keydown", handleKeyDown), frameRef.current !== null && (window.cancelAnimationFrame(frameRef.current), frameRef.current = null);
     };
-  }, [clearClickedId, updateActiveHeading, updateViewport]);
-  useEffect(() => {
+  }, [clearClickedId, updateActiveHeading, updateViewport]), useEffect(() => {
     updateViewport();
   }, [updateViewport]);
-  const handleTocClick = useCallback((id) => {
-    clickedIdRef.current = id;
-    setActiveId(id);
+  let handleTocClick = useCallback((id) => {
+    clickedIdRef.current = id, setActiveId(id);
   }, []);
   return {
     activeId,
@@ -246,15 +112,13 @@ function useTocActiveState(headingIds) {
   };
 }
 function Toc({ className, content, levels = DEFAULT_LEVELS }) {
-  const headings = useMemo(
+  let headings = useMemo(
     () => extractMdxHeadings(content, levels),
     [content, levels]
-  );
-  const headingIds = useMemo(
+  ), headingIds = useMemo(
     () => headings.map((heading) => heading.id),
     [headings]
-  );
-  const {
+  ), {
     activeId,
     contentRef,
     handleTocClick,
@@ -264,7 +128,7 @@ function Toc({ className, content, levels = DEFAULT_LEVELS }) {
     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;
+  let 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(
@@ -292,7 +156,7 @@ function Toc({ className, content, levels = DEFAULT_LEVELS }) {
             }
           ),
           /* @__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;
+            let active = activeId === heading.id;
             return /* @__PURE__ */ jsx(
               "li",
               {
@@ -305,7 +169,7 @@ function Toc({ className, content, levels = DEFAULT_LEVELS }) {
                   {
                     "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",
+                      "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-stroke",
                       active && "bg-surface-active font-medium text-accent-1 shadow-xs"
                     ),
                     "data-state": active ? "heading-active" : void 0,

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

@@ -1,33 +1,12 @@
-// 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
+// src/components/mdx/blockquote.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 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",
+        "my-6 border-l-2 border-typography-quote-stroke pl-4 text-sm leading-7 text-typography-quote-foreground",
         className
       ),
       ...props

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

@@ -4,7 +4,7 @@ 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;
+    color?: "default" | "accent" | "danger" | "info" | "success" | "warning" | null | undefined;
     variant?: "outline" | "soft" | "solid" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CalloutProps = VariantProps<typeof calloutVariants> & {

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

@@ -1,53 +1,23 @@
-// 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/callout.tsx
+// src/components/mdx/callout.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 var calloutVariants = 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)]",
+  "my-6 rounded-callout border p-4 text-sm leading-6 [--callout-emphasis-foreground:var(--typography-heading-foreground)] [--callout-foreground:var(--typography-body-foreground)] [--callout-solid-foreground:var(--surface-1)] [--callout-solid-surface:var(--foreground-1)] [--callout-stroke:var(--typography-rule-stroke)] [--callout-surface:var(--surface-2)] [--callout-title-foreground:var(--typography-heading-foreground)]",
   {
     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))]"
+        accent: "[--callout-emphasis-foreground:var(--accent-1)] [--callout-solid-foreground:var(--accent-1-foreground)] [--callout-solid-surface:var(--accent-1)] [--callout-stroke:var(--accent-3-stroke)] [--callout-surface:var(--accent-3)]",
+        danger: "[--callout-emphasis-foreground:var(--danger-1100)] [--callout-foreground:var(--danger-1100)] [--callout-solid-foreground:var(--danger-100)] [--callout-solid-surface:var(--danger-900)] [--callout-stroke:var(--danger-600)] [--callout-surface:var(--danger-200)]",
+        default: "",
+        info: "[--callout-emphasis-foreground:var(--info-1100)] [--callout-foreground:var(--info-1100)] [--callout-solid-foreground:var(--info-100)] [--callout-solid-surface:var(--info-900)] [--callout-stroke:var(--info-600)] [--callout-surface:var(--info-200)]",
+        success: "[--callout-emphasis-foreground:var(--success-1100)] [--callout-foreground:var(--success-1100)] [--callout-solid-foreground:var(--success-100)] [--callout-solid-surface:var(--success-900)] [--callout-stroke:var(--success-600)] [--callout-surface:var(--success-200)]",
+        warning: "[--callout-emphasis-foreground:var(--warning-1100)] [--callout-foreground:var(--warning-1100)] [--callout-solid-foreground:var(--warning-100)] [--callout-solid-surface:var(--warning-900)] [--callout-stroke:var(--warning-600)] [--callout-surface:var(--warning-200)]"
       },
       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)]"
+        outline: "border-[var(--callout-stroke)] bg-transparent text-[var(--callout-foreground)]",
+        soft: "border-[var(--callout-stroke)] bg-[var(--callout-surface)] text-[var(--callout-foreground)]",
+        solid: "border-[var(--callout-solid-surface)] bg-[var(--callout-solid-surface)] text-[var(--callout-solid-foreground)]"
       }
     },
     defaultVariants: {
@@ -64,9 +34,7 @@ function Callout({
   title,
   variant
 }) {
-  const resolvedVariant = variant ?? "soft";
-  const hasIcon = icon !== void 0 && icon !== null && icon !== false;
-  const hasTitle = title !== void 0 && title !== null && title !== false;
+  let resolvedVariant = variant ?? "soft", hasIcon = icon != null && icon !== !1, hasTitle = title != null && title !== !1;
   return /* @__PURE__ */ jsx(
     "aside",
     {
@@ -80,7 +48,7 @@ function Callout({
             "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)]",
+              resolvedVariant === "solid" ? "text-inherit" : "text-[var(--callout-emphasis-foreground)]",
               "[&_svg]:size-4 [&_svg]:shrink-0"
             ),
             children: icon
@@ -92,7 +60,7 @@ function Callout({
             {
               className: cn(
                 "font-medium",
-                resolvedVariant === "solid" ? "text-inherit" : "text-[var(--callout-title)]"
+                resolvedVariant === "solid" ? "text-inherit" : "text-[var(--callout-title-foreground)]"
               ),
               children: title
             }

package/dist/kernel/components/mdx/components/code-block.js

@@ -1,5 +1,5 @@
-// src/kernel/components/mdx/components/code-block.tsx
-import { Pre } from "./pre.js";
+// src/components/mdx/code-block.tsx
+import { Pre } from "@publish.os/nextjs/kernel/components/mdx/components/pre";
 import { jsx } from "react/jsx-runtime";
 function CodeBlock({
   children,

package/dist/kernel/components/mdx/components/figure-caption.js

@@ -1,32 +1,14 @@
-// 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/figure-caption.tsx
+// src/components/mdx/figure-caption.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function FigureCaption({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "figcaption",
     {
-      className: cn("mt-2 text-sm leading-6 text-foreground-3", className),
+      className: cn(
+        "mt-2 text-sm leading-6 text-typography-caption-foreground",
+        className
+      ),
       ...props
     }
   );

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

@@ -1,29 +1,6 @@
-// src/kernel/components/mdx/components/figure.tsx
-import { FigureCaption } from "./figure-caption.js";
-
-// 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/figure.tsx
+// src/components/mdx/figure.tsx
+import { FigureCaption } from "@publish.os/nextjs/kernel/components/mdx/components/figure-caption";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { Children, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Figure({
@@ -32,18 +9,14 @@ function Figure({
   className,
   ...props
 }) {
-  let authoredCaption = caption;
-  const mediaChildren = [];
-  Children.forEach(children, (child) => {
-    if (isValidElement(child)) {
-      if (child.type === "figcaption") {
-        authoredCaption = child.props.children;
-        return;
-      }
+  let authoredCaption = caption, mediaChildren = [];
+  return Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === "figcaption") {
+      authoredCaption = child.props.children;
+      return;
     }
     mediaChildren.push(child);
-  });
-  return /* @__PURE__ */ jsxs("figure", { className: cn("not-markdown-prose my-8", className), ...props, children: [
+  }), /* @__PURE__ */ jsxs("figure", { className: cn("not-markdown-prose my-8", className), ...props, children: [
     /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-3", children: mediaChildren }),
     authoredCaption ? /* @__PURE__ */ jsx(FigureCaption, { className: "mx-auto max-w-prose text-center", children: authoredCaption }) : null
   ] });

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

@@ -1,33 +1,12 @@
-// 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/footnotes.tsx
+// src/components/mdx/footnotes.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function Footnotes({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "section",
     {
       className: cn(
-        "mt-10 border-t border-stroke-3 pt-6 text-sm leading-6 text-foreground-3",
+        "mt-10 border-t border-typography-rule-stroke pt-6 text-sm leading-6 text-typography-caption-foreground",
         className
       ),
       ...props