boltdocs 1.3.0 → 1.3.1

package/src/client/theme/components/Video/Video.tsx

@@ -1,84 +1,84 @@
-import React, { useRef, useState, useEffect } from "react";
-
-interface VideoProps {
-  /** Video source URL */
-  src?: string;
-  /** Poster/thumbnail image URL */
-  poster?: string;
-  /** Alt text for accessibility */
-  alt?: string;
-  /** Show native video controls (default: true) */
-  controls?: boolean;
-  /** Preload strategy (default: 'none') */
-  preload?: string;
-  /** Children (e.g. <source> elements) */
-  children?: React.ReactNode;
-  /** Allow any additional HTML video attributes */
-  [key: string]: any;
-}
-
-/**
- * Optimized video component with lazy loading via IntersectionObserver.
- * The `<video>` element is only rendered once it enters the viewport,
- * preventing unnecessary network downloads on initial page load.
- *
- * Usage in MDX:
- * ```mdx
- * <video src="/demo.mp4" poster="/demo-thumb.jpg" />
- * ```
- */
-export function Video({
-  src,
-  poster,
-  alt,
-  children,
-  controls,
-  preload = "metadata",
-  ...rest
-}: VideoProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.disconnect();
-        }
-      },
-      { rootMargin: "200px" },
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div ref={containerRef} className="boltdocs-video-wrapper">
-      {isVisible ? (
-        <video
-          className="boltdocs-video"
-          src={src}
-          poster={poster}
-          controls={true}
-          preload={preload}
-          playsInline
-          {...rest}
-        >
-          {children}
-          Your browser does not support the video tag.
-        </video>
-      ) : (
-        <div
-          className="boltdocs-video-placeholder"
-          role="img"
-          aria-label={alt || "Video"}
-        />
-      )}
-    </div>
-  );
-}
+import React, { useRef, useState, useEffect } from "react";
+
+interface VideoProps {
+  /** Video source URL */
+  src?: string;
+  /** Poster/thumbnail image URL */
+  poster?: string;
+  /** Alt text for accessibility */
+  alt?: string;
+  /** Show native video controls (default: true) */
+  controls?: boolean;
+  /** Preload strategy (default: 'none') */
+  preload?: string;
+  /** Children (e.g. <source> elements) */
+  children?: React.ReactNode;
+  /** Allow any additional HTML video attributes */
+  [key: string]: any;
+}
+
+/**
+ * Optimized video component with lazy loading via IntersectionObserver.
+ * The `<video>` element is only rendered once it enters the viewport,
+ * preventing unnecessary network downloads on initial page load.
+ *
+ * Usage in MDX:
+ * ```mdx
+ * <video src="/demo.mp4" poster="/demo-thumb.jpg" />
+ * ```
+ */
+export function Video({
+  src,
+  poster,
+  alt,
+  children,
+  controls,
+  preload = "metadata",
+  ...rest
+}: VideoProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "200px" },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={containerRef} className="boltdocs-video-wrapper">
+      {isVisible ? (
+        <video
+          className="boltdocs-video"
+          src={src}
+          poster={poster}
+          controls={true}
+          preload={preload}
+          playsInline
+          {...rest}
+        >
+          {children}
+          Your browser does not support the video tag.
+        </video>
+      ) : (
+        <div
+          className="boltdocs-video-placeholder"
+          role="img"
+          aria-label={alt || "Video"}
+        />
+      )}
+    </div>
+  );
+}

package/src/client/theme/components/Video/index.ts

@@ -1 +1 @@
-export { Video } from "./Video";
+export { Video } from "./Video";

package/src/client/theme/components/Video/video.css

@@ -1,41 +1,41 @@
-/* ─── Video ──────────────────────────────────────────────── */
-.boltdocs-video-wrapper {
-  margin: 1.5rem 0;
-  max-width: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  border-radius: var(--ld-radius-md);
-  overflow: hidden;
-  border: 1px solid var(--ld-border-subtle);
-  background-color: var(--ld-surface);
-}
-
-.boltdocs-video {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  height: auto;
-  border-radius: 0;
-  animation: ld-video-fade-in 0.4s ease-out;
-}
-
-.boltdocs-video-placeholder {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  background-color: var(--ld-surface);
-}
-
-/* Ensure video doesn't overflow boltdocs-page container */
-.boltdocs-page video {
-  max-width: 100%;
-  height: auto;
-}
-
-@keyframes ld-video-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
+/* ─── Video ──────────────────────────────────────────────── */
+.boltdocs-video-wrapper {
+  margin: 1.5rem 0;
+  max-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: var(--ld-radius-md);
+  overflow: hidden;
+  border: 1px solid var(--ld-border-subtle);
+  background-color: var(--ld-surface);
+}
+
+.boltdocs-video {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: 0;
+  animation: ld-video-fade-in 0.4s ease-out;
+}
+
+.boltdocs-video-placeholder {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background-color: var(--ld-surface);
+}
+
+/* Ensure video doesn't overflow boltdocs-page container */
+.boltdocs-page video {
+  max-width: 100%;
+  height: auto;
+}
+
+@keyframes ld-video-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/client/theme/components/mdx/Admonition.tsx

@@ -1,80 +1,80 @@
-import React from "react";
-import {
-  Info,
-  Lightbulb,
-  AlertTriangle,
-  ShieldAlert,
-  Bookmark,
-} from "lucide-react";
-
-const ICON_MAP: Record<string, React.ReactNode> = {
-  note: <Bookmark size={18} />,
-  tip: <Lightbulb size={18} />,
-  info: <Info size={18} />,
-  warning: <AlertTriangle size={18} />,
-  danger: <ShieldAlert size={18} />,
-};
-
-const LABEL_MAP: Record<string, string> = {
-  note: "Note",
-  tip: "Tip",
-  info: "Info",
-  warning: "Warning",
-  danger: "Danger",
-};
-
-export interface AdmonitionProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Admonition type — controls color and icon */
-  type?: "note" | "tip" | "info" | "warning" | "danger";
-  /** Override the default title */
-  title?: string;
-  children: React.ReactNode;
-}
-
-/**
- * Callout / admonition box for notes, warnings, etc.
- *
- * ```mdx
- * <Admonition type="warning" title="Breaking Change">
- *   This API has changed in v2.
- * </Admonition>
- * ```
- */
-export function Admonition({
-  type = "note",
-  title,
-  children,
-  className = "",
-  ...rest
-}: AdmonitionProps) {
-  return (
-    <div
-      className={`ld-admonition ld-admonition--${type} ${className}`.trim()}
-      role={type === "warning" || type === "danger" ? "alert" : "note"}
-      {...rest}
-    >
-      <div className="ld-admonition__header">
-        <span className="ld-admonition__icon">{ICON_MAP[type]}</span>
-        <span className="ld-admonition__title">{title || LABEL_MAP[type]}</span>
-      </div>
-      <div className="ld-admonition__body">{children}</div>
-    </div>
-  );
-}
-
-/* ─── Convenience aliases ─────────────────────────────────── */
-export const Note = (props: Omit<AdmonitionProps, "type">) => (
-  <Admonition type="note" {...props} />
-);
-export const Tip = (props: Omit<AdmonitionProps, "type">) => (
-  <Admonition type="tip" {...props} />
-);
-export const Warning = (props: Omit<AdmonitionProps, "type">) => (
-  <Admonition type="warning" {...props} />
-);
-export const Danger = (props: Omit<AdmonitionProps, "type">) => (
-  <Admonition type="danger" {...props} />
-);
-export const InfoBox = (props: Omit<AdmonitionProps, "type">) => (
-  <Admonition type="info" {...props} />
-);
+import React from "react";
+import {
+  Info,
+  Lightbulb,
+  AlertTriangle,
+  ShieldAlert,
+  Bookmark,
+} from "lucide-react";
+
+const ICON_MAP: Record<string, React.ReactNode> = {
+  note: <Bookmark size={18} />,
+  tip: <Lightbulb size={18} />,
+  info: <Info size={18} />,
+  warning: <AlertTriangle size={18} />,
+  danger: <ShieldAlert size={18} />,
+};
+
+const LABEL_MAP: Record<string, string> = {
+  note: "Note",
+  tip: "Tip",
+  info: "Info",
+  warning: "Warning",
+  danger: "Danger",
+};
+
+export interface AdmonitionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Admonition type — controls color and icon */
+  type?: "note" | "tip" | "info" | "warning" | "danger";
+  /** Override the default title */
+  title?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Callout / admonition box for notes, warnings, etc.
+ *
+ * ```mdx
+ * <Admonition type="warning" title="Breaking Change">
+ *   This API has changed in v2.
+ * </Admonition>
+ * ```
+ */
+export function Admonition({
+  type = "note",
+  title,
+  children,
+  className = "",
+  ...rest
+}: AdmonitionProps) {
+  return (
+    <div
+      className={`ld-admonition ld-admonition--${type} ${className}`.trim()}
+      role={type === "warning" || type === "danger" ? "alert" : "note"}
+      {...rest}
+    >
+      <div className="ld-admonition__header">
+        <span className="ld-admonition__icon">{ICON_MAP[type]}</span>
+        <span className="ld-admonition__title">{title || LABEL_MAP[type]}</span>
+      </div>
+      <div className="ld-admonition__body">{children}</div>
+    </div>
+  );
+}
+
+/* ─── Convenience aliases ─────────────────────────────────── */
+export const Note = (props: Omit<AdmonitionProps, "type">) => (
+  <Admonition type="note" {...props} />
+);
+export const Tip = (props: Omit<AdmonitionProps, "type">) => (
+  <Admonition type="tip" {...props} />
+);
+export const Warning = (props: Omit<AdmonitionProps, "type">) => (
+  <Admonition type="warning" {...props} />
+);
+export const Danger = (props: Omit<AdmonitionProps, "type">) => (
+  <Admonition type="danger" {...props} />
+);
+export const InfoBox = (props: Omit<AdmonitionProps, "type">) => (
+  <Admonition type="info" {...props} />
+);

package/src/client/theme/components/mdx/Badge.tsx

@@ -1,31 +1,31 @@
-import React from "react";
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Color variant */
-  variant?: "default" | "primary" | "success" | "warning" | "danger" | "info";
-  children: React.ReactNode;
-}
-
-/**
- * Inline badge / pill for labels, statuses, or tags.
- *
- * ```mdx
- * <Badge variant="success">Stable</Badge>
- * <Badge variant="warning">Beta</Badge>
- * ```
- */
-export function Badge({
-  variant = "default",
-  children,
-  className = "",
-  ...rest
-}: BadgeProps) {
-  return (
-    <span
-      className={`ld-badge ld-badge--${variant} ${className}`.trim()}
-      {...rest}
-    >
-      {children}
-    </span>
-  );
-}
+import React from "react";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Color variant */
+  variant?: "default" | "primary" | "success" | "warning" | "danger" | "info";
+  children: React.ReactNode;
+}
+
+/**
+ * Inline badge / pill for labels, statuses, or tags.
+ *
+ * ```mdx
+ * <Badge variant="success">Stable</Badge>
+ * <Badge variant="warning">Beta</Badge>
+ * ```
+ */
+export function Badge({
+  variant = "default",
+  children,
+  className = "",
+  ...rest
+}: BadgeProps) {
+  return (
+    <span
+      className={`ld-badge ld-badge--${variant} ${className}`.trim()}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+}

package/src/client/theme/components/mdx/Button.tsx

@@ -1,50 +1,50 @@
-import React from "react";
-
-export type ButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    /** Visual variant */
-    variant?: "primary" | "secondary" | "outline" | "ghost";
-    /** Size */
-    size?: "sm" | "md" | "lg";
-    /** If provided, renders as a link */
-    href?: string;
-    children: React.ReactNode;
-  };
-
-/**
- * A versatile button/link component for use in MDX pages and the home page.
- *
- * ```mdx
- * <Button variant="primary" href="/docs/getting-started">Get Started →</Button>
- * <Button variant="secondary" href="https://github.com">GitHub</Button>
- * ```
- */
-export function Button({
-  variant = "primary",
-  size = "md",
-  href,
-  children,
-  className = "",
-  ...rest
-}: ButtonProps) {
-  const cls = `ld-btn ld-btn--${variant} ld-btn--${size} ${className}`.trim();
-
-  if (href) {
-    return (
-      <a
-        href={href}
-        style={{ textDecoration: "none" }}
-        className={cls}
-        {...(rest as any)}
-      >
-        {children}
-      </a>
-    );
-  }
-
-  return (
-    <button className={cls} {...(rest as any)}>
-      {children}
-    </button>
-  );
-}
+import React from "react";
+
+export type ButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Visual variant */
+    variant?: "primary" | "secondary" | "outline" | "ghost";
+    /** Size */
+    size?: "sm" | "md" | "lg";
+    /** If provided, renders as a link */
+    href?: string;
+    children: React.ReactNode;
+  };
+
+/**
+ * A versatile button/link component for use in MDX pages and the home page.
+ *
+ * ```mdx
+ * <Button variant="primary" href="/docs/getting-started">Get Started →</Button>
+ * <Button variant="secondary" href="https://github.com">GitHub</Button>
+ * ```
+ */
+export function Button({
+  variant = "primary",
+  size = "md",
+  href,
+  children,
+  className = "",
+  ...rest
+}: ButtonProps) {
+  const cls = `ld-btn ld-btn--${variant} ld-btn--${size} ${className}`.trim();
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        style={{ textDecoration: "none" }}
+        className={cls}
+        {...(rest as any)}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button className={cls} {...(rest as any)}>
+      {children}
+    </button>
+  );
+}