blodemd 0.0.4 → 0.0.6

package/docs/components/mdx/code-group.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { isValidElement, useCallback, useMemo, useState } from "react";
+import type { MouseEvent, ReactElement, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface CodeGroupProps {
+  children: ReactNode;
+}
+
+export const CodeGroup = ({ children }: CodeGroupProps) => {
+  const items = useMemo(() => {
+    const nodes = Array.isArray(children) ? children : [children];
+    return nodes.filter((child): child is ReactElement =>
+      isValidElement(child)
+    );
+  }, [children]);
+
+  const [active, setActive] = useState(0);
+
+  const labels = useMemo(
+    () =>
+      items.map((item) => {
+        if (
+          !isValidElement<{
+            "data-rehype-pretty-code-title"?: string;
+            children?: ReactNode;
+          }>(item)
+        ) {
+          return "Code";
+        }
+        const title = item.props["data-rehype-pretty-code-title"];
+        if (title) {
+          return title;
+        }
+        const itemChildren = Array.isArray(item.props.children)
+          ? item.props.children
+          : [item.props.children];
+        const pre = itemChildren.find(
+          (c: unknown) => isValidElement(c) && c.type === "pre"
+        );
+        if (isValidElement<{ className?: string }>(pre)) {
+          const lang = pre.props.className
+            ?.split(" ")
+            .find((c: string) => c.startsWith("language-"))
+            ?.replace("language-", "");
+          if (lang) {
+            return lang;
+          }
+        }
+        return `Tab ${items.indexOf(item) + 1}`;
+      }),
+    [items]
+  );
+
+  const handleTabClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    const index = Number(event.currentTarget.dataset.index ?? "0");
+    setActive(index);
+  }, []);
+
+  if (items.length <= 1) {
+    return children as ReactElement;
+  }
+
+  return (
+    <div className="my-4 overflow-hidden rounded-xl border border-border bg-code">
+      <div
+        className="flex gap-1 border-b border-border bg-muted/50 px-2 pt-2"
+        role="tablist"
+      >
+        {labels.map((label, index) => (
+          <button
+            aria-selected={index === active}
+            className={cn(
+              "rounded-t-md border-b-2 px-3 py-1.5 font-mono text-xs transition-colors",
+              index === active
+                ? "border-primary text-foreground"
+                : "border-transparent text-muted-foreground hover:text-foreground"
+            )}
+            data-index={index}
+            key={label}
+            onClick={handleTabClick}
+            role="tab"
+            type="button"
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+      <div role="tabpanel">{items[active]}</div>
+    </div>
+  );
+};

package/docs/components/mdx/color.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface ColorItemProps {
+  name?: string;
+  value: string | { light: string; dark: string };
+}
+
+const ColorItem = ({ name, value }: ColorItemProps) => {
+  const lightValue = typeof value === "string" ? value : value.light;
+  const darkValue = typeof value === "string" ? value : value.dark;
+
+  return (
+    <div className="flex items-center gap-3">
+      <div
+        className="size-8 shrink-0 rounded-md border border-border"
+        style={{ backgroundColor: lightValue }}
+      >
+        {typeof value === "string" ? null : (
+          <div
+            className="hidden size-full rounded-md dark:block"
+            style={{ backgroundColor: darkValue }}
+          />
+        )}
+      </div>
+      <div className="min-w-0">
+        {name ? (
+          <div className="text-sm font-medium text-foreground">{name}</div>
+        ) : null}
+        <div className="font-mono text-xs text-muted-foreground">
+          {lightValue}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface ColorRowProps {
+  title?: string;
+  children: ReactNode;
+}
+
+const ColorRow = ({ title, children }: ColorRowProps) => (
+  <>
+    {title ? (
+      <tr>
+        <td
+          className="border-b border-border bg-muted/50 px-4 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+          colSpan={2}
+        >
+          {title}
+        </td>
+      </tr>
+    ) : null}
+    {children}
+  </>
+);
+
+interface ColorProps {
+  variant?: "compact" | "table";
+  children: ReactNode;
+}
+
+const Color = ({ variant = "compact", children }: ColorProps) => (
+  <div
+    className={cn(
+      "my-4",
+      variant === "compact" &&
+        "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4",
+      variant === "table" && "overflow-hidden rounded-xl border border-border"
+    )}
+  >
+    {variant === "table" ? (
+      <table className="w-full text-sm">
+        <tbody>{children}</tbody>
+      </table>
+    ) : (
+      children
+    )}
+  </div>
+);
+
+Color.Item = ColorItem;
+Color.Row = ColorRow;
+
+export { Color };

package/docs/components/mdx/columns.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface ColumnsProps {
+  cols?: 1 | 2 | 3 | 4;
+  children: ReactNode;
+}
+
+const colStyles: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+
+export const Columns = ({ cols = 2, children }: ColumnsProps) => (
+  <div className={cn("my-4 grid gap-4", colStyles[cols] ?? colStyles[2])}>
+    {children}
+  </div>
+);
+
+export const Column = ({ children }: { children: ReactNode }) => (
+  <div className="min-w-0">{children}</div>
+);

package/docs/components/mdx/expandable.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface ExpandableProps {
+  title?: string;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}
+
+export const Expandable = ({
+  title = "properties",
+  defaultOpen = false,
+  children,
+}: ExpandableProps) => {
+  const [open, setOpen] = useState(defaultOpen);
+  const toggle = useCallback(() => setOpen((prev) => !prev), []);
+
+  return (
+    <div className="mt-2 ml-4 border-l border-border pl-4">
+      <button
+        className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground"
+        onClick={toggle}
+        type="button"
+      >
+        <svg
+          aria-hidden
+          className={cn(
+            "size-3 transition-transform duration-150",
+            open && "rotate-90"
+          )}
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+        {open ? "Hide" : "Show"} {title}
+      </button>
+      {open ? <div className="mt-2">{children}</div> : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface FieldBadge {
+  label: string;
+  className?: string;
+}
+
+interface FieldLayoutProps {
+  name: string;
+  type?: string;
+  required?: boolean;
+  deprecated?: boolean;
+  defaultValue?: string;
+  badges?: FieldBadge[];
+  children?: ReactNode;
+}
+
+export const FieldLayout = ({
+  name,
+  type,
+  required,
+  deprecated,
+  defaultValue,
+  badges,
+  children,
+}: FieldLayoutProps) => (
+  <div className="border-b border-border py-4 first:pt-0 last:border-b-0">
+    <div className="flex flex-wrap items-center gap-2">
+      {badges
+        ?.filter((b) => b.label)
+        .map((badge) => (
+          <span
+            className={cn(
+              "rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground",
+              badge.className
+            )}
+            key={badge.label}
+          >
+            {badge.label}
+          </span>
+        ))}
+      <code className="rounded-md bg-muted px-1.5 py-0.5 font-mono text-sm font-medium">
+        {name}
+      </code>
+      {type ? (
+        <span className="text-xs text-muted-foreground">{type}</span>
+      ) : null}
+      {required ? (
+        <span className="text-xs font-medium text-red-600 dark:text-red-400">
+          required
+        </span>
+      ) : null}
+      {deprecated ? (
+        <span
+          className={cn(
+            "rounded-full bg-amber-100 px-2 py-0.5 text-xs text-amber-700",
+            "dark:bg-amber-900/40 dark:text-amber-300"
+          )}
+        >
+          deprecated
+        </span>
+      ) : null}
+      {defaultValue ? (
+        <span className="text-xs text-muted-foreground">
+          Default: <code className="font-mono">{defaultValue}</code>
+        </span>
+      ) : null}
+    </div>
+    {children ? (
+      <div className="mt-2 text-sm text-muted-foreground [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+        {children}
+      </div>
+    ) : null}
+  </div>
+);

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,56 @@
+import { cn } from "@/lib/utils";
+
+interface IconProps {
+  icon: string;
+  color?: string;
+  size?: number;
+  className?: string;
+}
+
+export const Icon = ({ icon, color, size = 16, className }: IconProps) => (
+  <span
+    aria-hidden
+    className={cn("inline-flex items-center justify-center", className)}
+    style={{
+      color: color ?? undefined,
+      height: size,
+      width: size,
+    }}
+  >
+    <svg
+      className="size-full"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+    >
+      <title>{icon}</title>
+      {icon === "flag" && (
+        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7" />
+      )}
+      {icon === "check" && <path d="M20 6 9 17l-5-5" />}
+      {icon === "star" && (
+        <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z" />
+      )}
+      {icon === "info" && (
+        <>
+          <circle cx="12" cy="12" r="10" />
+          <path d="M12 16v-4M12 8h.01" />
+        </>
+      )}
+      {icon === "alert-triangle" && (
+        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01" />
+      )}
+      {icon === "arrow-right" && <path d="M5 12h14M12 5l7 7-7 7" />}
+      {icon === "external-link" && (
+        <>
+          <path d="M15 3h6v6" />
+          <path d="M10 14 21 3" />
+          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+        </>
+      )}
+    </svg>
+  </span>
+);

package/docs/components/mdx/index.tsx

@@ -0,0 +1,96 @@
+import type { MDXComponents } from "mdx/types";
+import Link from "next/link";
+
+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 } from "./tree";
+import { TypeTable } from "./type-table";
+import { Update } from "./update";
+import { Video } from "./video";
+import { View, ViewGroup } from "./view";
+
+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>
+);