blodemd 0.0.5 → 0.0.7

package/docs/components/mdx/frame.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+interface FrameProps {
+  caption?: string;
+  hint?: string;
+  children: ReactNode;
+}
+
+export const Frame = ({ caption, hint, children }: FrameProps) => (
+  <figure className="my-4">
+    {hint ? (
+      <div className="mb-2 text-sm text-muted-foreground">{hint}</div>
+    ) : null}
+    <div className="overflow-hidden rounded-xl border border-border bg-card">
+      {children}
+    </div>
+    {caption ? (
+      <figcaption className="mt-2 text-center text-sm text-muted-foreground">
+        {caption}
+      </figcaption>
+    ) : null}
+  </figure>
+);

package/docs/components/mdx/get-text-content.ts

@@ -0,0 +1,18 @@
+import { isValidElement } from "react";
+import type { ReactNode } from "react";
+
+export const getTextContent = (node: ReactNode): string => {
+  if (typeof node === "string") {
+    return node;
+  }
+  if (typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(getTextContent).join("");
+  }
+  if (isValidElement<{ children?: ReactNode }>(node)) {
+    return getTextContent(node.props.children);
+  }
+  return "";
+};

package/docs/components/mdx/icon.tsx

@@ -0,0 +1,12 @@
+import { DocIcon } from "@/components/icons/doc-icon";
+
+interface IconProps {
+  icon: string;
+  color?: string;
+  size?: number;
+  className?: string;
+}
+
+export const Icon = ({ icon, color, size = 16, className }: IconProps) => (
+  <DocIcon className={className} color={color} icon={icon} size={size} />
+);

package/docs/components/mdx/index.tsx

@@ -0,0 +1,107 @@
+import type { MDXComponents } from "mdx/types";
+import Link from "next/link";
+import type { ComponentProps } from "react";
+
+import { Accordion, AccordionGroup } from "./accordion";
+import { Badge } from "./badge";
+import { Callout, Check, Danger, Info, Note, Tip, Warning } from "./callout";
+import { Card } from "./card";
+import { CodeBlock } from "./code-block";
+import { CodeGroup } from "./code-group";
+import { Color } from "./color";
+import { Column, Columns } from "./columns";
+import { Expandable } from "./expandable";
+import { Frame } from "./frame";
+import { Icon } from "./icon";
+import { Installer } from "./installer";
+import { Panel } from "./panel";
+import { ParamField } from "./param-field";
+import { Preview } from "./preview";
+import { Prompt } from "./prompt";
+import { RequestExample, ResponseExample } from "./request-example";
+import { ResponseField } from "./response-field";
+import { Step, Steps } from "./steps";
+import { Tab, Tabs } from "./tabs";
+import { Tile } from "./tile";
+import { Tooltip } from "./tooltip";
+import { Tree as TreeRoot, TreeFile, TreeFolder } from "./tree";
+import { TypeTable } from "./type-table";
+import { Update } from "./update";
+import { Video } from "./video";
+import { View, ViewGroup } from "./view";
+
+// Rebuild dotted MDX exports in the server module so Next's client references
+// still expose `Tree.Folder` and `Tree.File` during MDX evaluation.
+const Tree = Object.assign(
+  (props: ComponentProps<typeof TreeRoot>) => <TreeRoot {...props} />,
+  {
+    File: TreeFile,
+    Folder: TreeFolder,
+  }
+);
+
+const MdxLink = ({
+  href,
+  children,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  if (!href) {
+    return <a {...props}>{children}</a>;
+  }
+  const isExternal = href.startsWith("http");
+  if (isExternal) {
+    return (
+      <a {...props} href={href} rel="noopener noreferrer" target="_blank">
+        {children}
+      </a>
+    );
+  }
+  return (
+    <Link href={href} {...props}>
+      {children}
+    </Link>
+  );
+};
+
+export const mdxComponents: MDXComponents = {
+  Accordion,
+  AccordionGroup,
+  Badge,
+  Callout,
+  Card,
+  Check,
+  CodeGroup,
+  Color,
+  Column,
+  Columns,
+  Danger,
+  Expandable,
+  Frame,
+  Icon,
+  Info,
+  Installer,
+  Note,
+  Panel,
+  ParamField,
+  Preview,
+  Prompt,
+  RequestExample,
+  ResponseExample,
+  ResponseField,
+  Step,
+  Steps,
+  Tab,
+  Tabs,
+  Tile,
+  Tip,
+  Tooltip,
+  Tree,
+  TypeTable,
+  Update,
+  Video,
+  View,
+  ViewGroup,
+  Warning,
+  a: MdxLink,
+  pre: CodeBlock,
+};

package/docs/components/mdx/installer.tsx

@@ -0,0 +1,20 @@
+export const Installer = ({
+  path,
+  command,
+}: {
+  path: string;
+  command?: string;
+}) => {
+  const resolvedCommand =
+    command ?? `npx @vercel/platform-elements@latest ${path}`;
+  return (
+    <div className="my-4 grid gap-2.5 rounded-xl border border-border bg-background/70 p-3.5">
+      <div className="text-xs uppercase tracking-widest text-muted-foreground">
+        Install
+      </div>
+      <pre className="m-0 overflow-x-auto rounded-lg bg-code p-3 font-mono text-sm text-code-foreground">
+        <code>{resolvedCommand}</code>
+      </pre>
+    </div>
+  );
+};

package/docs/components/mdx/panel.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+interface PanelProps {
+  children: ReactNode;
+}
+
+export const Panel = ({ children }: PanelProps) => (
+  <aside className="my-4 rounded-xl border border-border bg-card p-4">
+    {children}
+  </aside>
+);

package/docs/components/mdx/param-field.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+
+import { FieldLayout } from "./field-layout";
+
+interface ParamFieldProps {
+  path?: string;
+  query?: string;
+  body?: string;
+  header?: string;
+  type?: string;
+  required?: boolean;
+  deprecated?: boolean;
+  default?: string;
+  placeholder?: string;
+  children?: ReactNode;
+}
+
+export const ParamField = ({
+  path,
+  query,
+  body,
+  header,
+  type,
+  required,
+  deprecated,
+  default: defaultValue,
+  children,
+}: ParamFieldProps) => {
+  const name = path ?? query ?? body ?? header ?? "";
+
+  let location: string | undefined;
+  if (path) {
+    location = "path";
+  } else if (query) {
+    location = "query";
+  } else if (body) {
+    location = "body";
+  } else if (header) {
+    location = "header";
+  }
+
+  const badges = location ? [{ label: location }] : undefined;
+
+  return (
+    <FieldLayout
+      badges={badges}
+      defaultValue={defaultValue}
+      deprecated={deprecated}
+      name={name}
+      required={required}
+      type={type}
+    >
+      {children}
+    </FieldLayout>
+  );
+};

package/docs/components/mdx/preview.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+
+export const Preview = ({
+  example,
+  source,
+  title = "Preview",
+  children,
+}: {
+  example?: string;
+  source?: string;
+  title?: string;
+  children?: ReactNode;
+}) => (
+  <div className="my-4 grid gap-3 rounded-xl border border-border bg-surface p-4">
+    <div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-wider text-muted-foreground">
+      <span className="font-semibold">{title}</span>
+      {example ? (
+        <span className="rounded-full border border-border bg-accent px-2.5 py-1 text-primary">
+          {example}
+        </span>
+      ) : null}
+      {source ? (
+        <span className="rounded-full border border-border bg-accent px-2.5 py-1 text-primary">
+          {source}
+        </span>
+      ) : null}
+    </div>
+    <div className="rounded-xl border border-dashed border-border bg-gradient-to-br from-primary/15 to-primary/5 p-4.5">
+      {children ?? (
+        <div className="text-sm text-muted-foreground">
+          Interactive preview placeholder
+        </div>
+      )}
+    </div>
+  </div>
+);

package/docs/components/mdx/prompt.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { CheckIcon, ClipboardIcon } from "blode-icons-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+
+import { getTextContent } from "./get-text-content";
+
+interface PromptProps {
+  description: string;
+  icon?: ReactNode;
+  children: ReactNode;
+}
+
+export const Prompt = ({ description, icon, children }: PromptProps) => {
+  const [copied, setCopied] = useState(false);
+  const text = useMemo(() => getTextContent(children), [children]);
+
+  useEffect(() => {
+    if (copied) {
+      const timer = setTimeout(() => setCopied(false), 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [copied]);
+
+  const handleCopy = useCallback(async () => {
+    if (!text) {
+      return;
+    }
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+  }, [text]);
+
+  return (
+    <div className="my-4 rounded-xl border border-border bg-card">
+      <div className="flex items-start gap-3 border-b border-border p-4">
+        {icon ? (
+          <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+            {icon}
+          </span>
+        ) : null}
+        <div className="min-w-0 flex-1 text-sm text-foreground">
+          {description}
+        </div>
+        <button
+          className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          onClick={handleCopy}
+          type="button"
+        >
+          <span className="sr-only">{copied ? "Copied" : "Copy prompt"}</span>
+          {copied ? (
+            <CheckIcon aria-hidden className="size-3.5" />
+          ) : (
+            <ClipboardIcon aria-hidden className="size-3.5" />
+          )}
+        </button>
+      </div>
+      <div className="p-4 text-sm text-muted-foreground [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+        {children}
+      </div>
+    </div>
+  );
+};

package/docs/components/mdx/request-example.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+
+interface RequestExampleProps {
+  children: ReactNode;
+}
+
+export const RequestExample = ({ children }: RequestExampleProps) => (
+  <div className="my-4">
+    <div className="mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+      Request
+    </div>
+    <div className="[&>pre]:mt-0 [&>[data-rehype-pretty-code-figure]]:mt-0">
+      {children}
+    </div>
+  </div>
+);
+
+export const ResponseExample = ({ children }: RequestExampleProps) => (
+  <div className="my-4">
+    <div className="mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+      Response
+    </div>
+    <div className="[&>pre]:mt-0 [&>[data-rehype-pretty-code-figure]]:mt-0">
+      {children}
+    </div>
+  </div>
+);

package/docs/components/mdx/response-field.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+
+import { FieldLayout } from "./field-layout";
+
+interface ResponseFieldProps {
+  name: string;
+  type: string;
+  default?: string;
+  required?: boolean;
+  deprecated?: boolean;
+  pre?: string[];
+  post?: string[];
+  children?: ReactNode;
+}
+
+export const ResponseField = ({
+  name,
+  type,
+  default: defaultValue,
+  required,
+  deprecated,
+  pre,
+  post,
+  children,
+}: ResponseFieldProps) => {
+  const preBadges = pre?.map((label) => ({ label })) ?? [];
+  const postBadges = post?.map((label) => ({ label })) ?? [];
+  const badges = [...preBadges, ...postBadges];
+
+  return (
+    <FieldLayout
+      badges={badges.length > 0 ? badges : undefined}
+      defaultValue={defaultValue}
+      deprecated={deprecated}
+      name={name}
+      required={required}
+      type={type}
+    >
+      {children}
+    </FieldLayout>
+  );
+};

package/docs/components/mdx/steps.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from "react";
+import { isValidElement } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface StepProps {
+  title: string;
+  children?: ReactNode;
+  icon?: ReactNode;
+  stepNumber?: number;
+  titleSize?: "p" | "h2" | "h3" | "h4";
+  id?: string;
+}
+
+export const Step = ({
+  title,
+  children,
+  icon,
+  stepNumber,
+  titleSize = "p",
+  id,
+}: StepProps) => {
+  const TitleTag = titleSize === "p" ? "div" : titleSize;
+  const anchorId = id ?? title.toLowerCase().replaceAll(/\s+/g, "-");
+
+  return (
+    <div className="relative pb-8 pl-10 last:pb-0" id={anchorId}>
+      <div
+        aria-hidden
+        className="absolute left-0 flex size-7 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs font-medium"
+      >
+        {icon ?? stepNumber ?? null}
+      </div>
+      <TitleTag
+        className={cn(
+          "font-semibold leading-7",
+          titleSize === "h2" && "text-xl",
+          titleSize === "h3" && "text-lg",
+          titleSize === "h4" && "text-base",
+          titleSize === "p" && "text-base"
+        )}
+      >
+        {title}
+      </TitleTag>
+      {children ? (
+        <div className="mt-2 text-sm text-muted-foreground">{children}</div>
+      ) : null}
+    </div>
+  );
+};
+
+interface StepsProps {
+  children: ReactNode;
+  titleSize?: "p" | "h2" | "h3" | "h4";
+}
+
+export const Steps = ({ children, titleSize }: StepsProps) => {
+  const items = Array.isArray(children) ? children : [children];
+
+  const hasStepChildren = items.some(
+    (child) => isValidElement(child) && child.type === Step
+  );
+
+  if (!hasStepChildren) {
+    return (
+      <div className="steps mb-12 [counter-reset:step] md:ml-4 md:border-l md:pl-8 [&>h3]:step">
+        {children}
+      </div>
+    );
+  }
+
+  let counter = 0;
+  const numberedChildren = items.map((child) => {
+    if (isValidElement<StepProps>(child) && child.type === Step) {
+      counter += 1;
+      const stepNumber = child.props.stepNumber ?? counter;
+      return (
+        <Step
+          key={child.props.id ?? child.props.title}
+          {...child.props}
+          stepNumber={stepNumber}
+          titleSize={child.props.titleSize ?? titleSize}
+        />
+      );
+    }
+    return child;
+  });
+
+  return (
+    <div className="my-6 border-l border-border pl-2">{numberedChildren}</div>
+  );
+};

package/docs/components/mdx/tabs.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { isValidElement, useCallback, useMemo, useState } from "react";
+import type { MouseEvent, ReactElement, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface TabProps {
+  title?: string;
+  label?: string;
+  icon?: ReactNode;
+  id?: string;
+  children: ReactNode;
+}
+
+export const Tab = ({ children }: TabProps) => (
+  <div className="p-4">{children}</div>
+);
+
+interface TabsProps {
+  children: ReactNode;
+  defaultTabIndex?: number;
+  borderBottom?: boolean;
+}
+
+export const Tabs = ({
+  children,
+  defaultTabIndex = 0,
+  borderBottom,
+}: TabsProps) => {
+  const items = useMemo(() => {
+    const nodes = Array.isArray(children) ? children : [children];
+    return nodes.filter((child): child is ReactElement<TabProps> =>
+      isValidElement<TabProps>(child)
+    );
+  }, [children]);
+
+  const [active, setActive] = useState(defaultTabIndex);
+  const activeItem = items[active];
+  const handleTabClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    const index = Number(event.currentTarget.dataset.index ?? "0");
+    setActive(index);
+  }, []);
+
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-xl border border-border bg-surface",
+        borderBottom && "border-b-2"
+      )}
+    >
+      <div className="flex gap-2 bg-muted p-2" role="tablist">
+        {items.map((item, index) => {
+          const tabLabel =
+            item.props.title ?? item.props.label ?? `Tab ${index + 1}`;
+          return (
+            <button
+              aria-selected={index === active}
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-full border-none bg-transparent px-3 py-2 text-sm cursor-pointer transition-colors",
+                index === active
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              )}
+              data-index={index}
+              key={String(item.key ?? tabLabel)}
+              onClick={handleTabClick}
+              role="tab"
+              type="button"
+            >
+              {item.props.icon ? (
+                <span className="shrink-0">{item.props.icon}</span>
+              ) : null}
+              {tabLabel}
+            </button>
+          );
+        })}
+      </div>
+      <div className="p-4" role="tabpanel">
+        {activeItem}
+      </div>
+    </div>
+  );
+};

package/docs/components/mdx/tile.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+interface TileProps {
+  href: string;
+  title?: string;
+  description?: string;
+  children: ReactNode;
+}
+
+export const Tile = ({ href, title, description, children }: TileProps) => {
+  const isExternal = href.startsWith("http");
+
+  const inner = (
+    <div className="group/tile overflow-hidden rounded-xl border border-border bg-card transition-colors hover:border-primary/30 hover:bg-accent/50">
+      <div className="flex items-center justify-center bg-muted/50 p-6">
+        {children}
+      </div>
+      {title || description ? (
+        <div className="border-t border-border p-3">
+          {title ? (
+            <div className="text-sm font-medium text-foreground">{title}</div>
+          ) : null}
+          {description ? (
+            <div className="mt-0.5 text-xs text-muted-foreground">
+              {description}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+
+  if (isExternal) {
+    return (
+      <a href={href} rel="noopener noreferrer" target="_blank">
+        {inner}
+      </a>
+    );
+  }
+
+  return <Link href={href}>{inner}</Link>;
+};