@docubook/mdx 1.0.0

package/dist/adapters/react-router/index.js

@@ -0,0 +1,252 @@
+// src/adapters/react-router/index.tsx
+import { Link as RouterLink } from "react-router-dom";
+
+// src/core/components/Button.tsx
+import * as Icons from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Button({
+  icon,
+  text,
+  href,
+  target,
+  size = "md",
+  variation = "primary",
+  LinkComponent
+}) {
+  const baseStyles = "inline-flex items-center justify-center rounded font-medium focus:outline-none transition no-underline";
+  const sizeStyles = {
+    sm: "px-3 py-1 my-6 text-sm",
+    md: "px-4 py-2 my-6 text-base",
+    lg: "px-5 py-3 my-6 text-lg"
+  };
+  const variationStyles = {
+    primary: "bg-primary text-white hover:bg-primary/90",
+    accent: "bg-accent text-white hover:bg-accent/90",
+    outline: "border border-accent text-accent hover:bg-accent/10"
+  };
+  const Icon = icon ? Icons[icon] : null;
+  const className = `${baseStyles} ${sizeStyles[size]} ${variationStyles[variation]}`;
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    text && /* @__PURE__ */ jsx("span", { children: text }),
+    Icon && /* @__PURE__ */ jsx(Icon, { className: "mr-2 h-5 w-5" })
+  ] });
+  if (LinkComponent) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href,
+        target,
+        rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        className,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      target,
+      rel: target === "_blank" ? "noopener noreferrer" : void 0,
+      className,
+      children: inner
+    }
+  );
+}
+
+// src/core/components/Card.tsx
+import * as Icons2 from "lucide-react";
+import clsx from "clsx";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Card({
+  title,
+  icon,
+  href,
+  horizontal,
+  children,
+  className,
+  LinkComponent
+}) {
+  const Icon = icon ? Icons2[icon] : null;
+  const content = /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: clsx(
+        "border rounded-lg shadow-sm p-4 transition-all duration-200",
+        "bg-card text-card-foreground border-border",
+        "hover:bg-accent/5 hover:border-accent/30",
+        "flex gap-2",
+        horizontal ? "flex-row items-start gap-1" : "flex-col space-y-1",
+        className
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx2(Icon, { className: clsx("w-5 h-5 text-primary shrink-0", horizontal && "mt-0.5") }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx2("div", { className: "text-base font-semibold text-foreground leading-6", children: title }),
+          /* @__PURE__ */ jsx2("div", { className: "text-sm text-muted-foreground -mt-3", children })
+        ] })
+      ]
+    }
+  );
+  if (!href) return content;
+  if (LinkComponent) {
+    return /* @__PURE__ */ jsx2(LinkComponent, { href, className: "no-underline block", children: content });
+  }
+  return /* @__PURE__ */ jsx2("a", { className: "no-underline block", href, children: content });
+}
+
+// src/core/components/Image.tsx
+import { createPortal } from "react-dom";
+import { X, ZoomIn } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Image({
+  src,
+  alt = "alt",
+  width = 800,
+  height = 350,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const scrollYRef = useRef(0);
+  useEffect(() => {
+    if (!isOpen) return;
+    scrollYRef.current = window.scrollY;
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollYRef.current}px`;
+    document.body.style.width = "100%";
+    const handleEsc = (e) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => {
+      document.body.style.position = "";
+      document.body.style.top = "";
+      document.body.style.width = "";
+      window.scrollTo(0, scrollYRef.current);
+      window.removeEventListener("keydown", handleEsc);
+    };
+  }, [isOpen]);
+  if (!src) return null;
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        className: "relative group cursor-zoom-in my-6 w-full flex justify-center rounded-lg",
+        onClick: () => setIsOpen(true),
+        "aria-label": "Zoom image",
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors z-10 flex items-center justify-center opacity-0 group-hover:opacity-100 rounded-lg", children: /* @__PURE__ */ jsx3(ZoomIn, { className: "w-8 h-8 text-white drop-shadow-md" }) }),
+          /* @__PURE__ */ jsx3(
+            "img",
+            {
+              src: typeof src === "string" ? src : "",
+              alt,
+              width,
+              height,
+              className: "w-full h-auto rounded-lg transition-transform duration-300 group-hover:scale-[1.01]",
+              ...props
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "fixed inset-0 z-99999 flex items-center justify-center bg-black/90 backdrop-blur-md p-4 md:p-10 cursor-zoom-out",
+        onClick: () => setIsOpen(false),
+        children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              className: "absolute top-4 right-4 z-50 p-2 text-white/70 hover:text-white bg-black/20 hover:bg-white/10 rounded-full transition-colors",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsOpen(false);
+              },
+              children: /* @__PURE__ */ jsx3(X, { className: "w-6 h-6" })
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: "relative max-w-7xl w-full h-full flex items-center justify-center",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: "relative w-full h-full flex items-center justify-center",
+                  onClick: () => setIsOpen(false),
+                  children: /* @__PURE__ */ jsx3(
+                    "img",
+                    {
+                      src: typeof src === "string" ? src : "",
+                      alt,
+                      width: 1920,
+                      height: 1080,
+                      className: "object-contain max-h-[90vh] w-auto h-auto rounded-md shadow-2xl"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          alt && alt !== "alt" && /* @__PURE__ */ jsx3("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-full text-sm font-medium backdrop-blur-md border border-white/10", children: alt })
+        ]
+      }
+    ) })
+  ] });
+}
+function Portal({ children }) {
+  if (typeof window === "undefined") return null;
+  return createPortal(children, document.body);
+}
+
+// src/adapters/react-router/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function isExternalHref(href) {
+  return /^(https?:|mailto:|tel:)/i.test(href);
+}
+function ReactRouterLinkMdx({ href, ...props }) {
+  if (!href) return null;
+  if (isExternalHref(href)) {
+    return /* @__PURE__ */ jsx4(
+      "a",
+      {
+        href,
+        ...props,
+        target: props.target ?? "_blank",
+        rel: props.rel ?? "noopener noreferrer"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(RouterLink, { to: href, ...props });
+}
+var RouterLinkRenderer = ({ href, ...props }) => {
+  if (isExternalHref(href)) {
+    return /* @__PURE__ */ jsx4(
+      "a",
+      {
+        href,
+        ...props,
+        target: props.target ?? "_blank",
+        rel: props.rel ?? "noopener noreferrer"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(RouterLink, { to: href, ...props });
+};
+function ReactRouterButtonMdx(props) {
+  return /* @__PURE__ */ jsx4(Button, { ...props, LinkComponent: RouterLinkRenderer });
+}
+function ReactRouterCardMdx(props) {
+  return /* @__PURE__ */ jsx4(Card, { ...props, LinkComponent: RouterLinkRenderer });
+}
+export {
+  ReactRouterButtonMdx,
+  ReactRouterCardMdx,
+  Image as ReactRouterImageMdx,
+  ReactRouterLinkMdx
+};