blodemd 0.0.5 → 0.0.6

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>;
+};

package/docs/components/mdx/tooltip.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import type { ReactNode } from "react";
+
+interface TooltipProps {
+  tip: string;
+  headline?: string;
+  cta?: string;
+  href?: string;
+  children: ReactNode;
+}
+
+export const Tooltip = ({
+  tip,
+  headline,
+  cta,
+  href,
+  children,
+}: TooltipProps) => {
+  const [open, setOpen] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+  const show = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setOpen(true);
+  }, []);
+
+  const hide = useCallback(() => {
+    timeoutRef.current = setTimeout(() => setOpen(false), 150);
+  }, []);
+
+  return (
+    <span className="relative inline-block">
+      <button
+        className="cursor-help border-b border-dashed border-muted-foreground bg-transparent p-0 text-inherit"
+        onBlur={hide}
+        onFocus={show}
+        onMouseEnter={show}
+        onMouseLeave={hide}
+        type="button"
+      >
+        {children}
+      </button>
+      {open ? (
+        <span
+          className="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-64 -translate-x-1/2 rounded-lg border border-border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-md"
+          onMouseEnter={show}
+          onMouseLeave={hide}
+          role="tooltip"
+        >
+          {headline ? (
+            <span className="mb-1 block font-semibold">{headline}</span>
+          ) : null}
+          <span className="block">{tip}</span>
+          {cta && href ? (
+            <a
+              className="mt-1 block text-primary hover:underline"
+              href={href}
+              rel="noopener noreferrer"
+            >
+              {cta}
+            </a>
+          ) : null}
+        </span>
+      ) : null}
+    </span>
+  );
+};

package/docs/components/mdx/tree.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface TreeFileProps {
+  name: string;
+}
+
+const TreeFile = ({ name }: TreeFileProps) => (
+  <div className="flex items-center gap-2 py-0.5 pl-5 text-sm">
+    <svg
+      aria-hidden
+      className="size-4 shrink-0 text-muted-foreground"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 2v4a2 2 0 0 0 2 2h4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+    <span className="text-foreground">{name}</span>
+  </div>
+);
+
+interface TreeFolderProps {
+  name: string;
+  defaultOpen?: boolean;
+  openable?: boolean;
+  children?: ReactNode;
+}
+
+const TreeFolder = ({
+  name,
+  defaultOpen = false,
+  openable = true,
+  children,
+}: TreeFolderProps) => {
+  const [open, setOpen] = useState(defaultOpen);
+
+  const toggle = useCallback(() => {
+    if (openable) {
+      setOpen((prev) => !prev);
+    }
+  }, [openable]);
+
+  return (
+    <div>
+      <button
+        className={cn(
+          "flex w-full items-center gap-2 py-0.5 text-sm border-none bg-transparent text-left",
+          openable && "cursor-pointer hover:bg-accent/50 rounded"
+        )}
+        disabled={!openable}
+        onClick={toggle}
+        type="button"
+      >
+        <svg
+          aria-hidden
+          className={cn(
+            "size-3 shrink-0 text-muted-foreground transition-transform",
+            open && "rotate-90"
+          )}
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+        <svg
+          aria-hidden
+          className="size-4 shrink-0 text-muted-foreground"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          viewBox="0 0 24 24"
+        >
+          {open ? (
+            <path
+              d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h4a2 2 0 0 1 2 2v1M5 19h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2Z"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          ) : (
+            <path
+              d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          )}
+        </svg>
+        <span className="font-medium text-foreground">{name}</span>
+      </button>
+      {open && children ? (
+        <div className="ml-3 border-l border-border pl-2">{children}</div>
+      ) : null}
+    </div>
+  );
+};
+
+const Tree = ({ children }: { children: ReactNode }) => (
+  <div className="my-4 rounded-xl border border-border bg-card p-4 font-mono text-sm">
+    {children}
+  </div>
+);
+
+Tree.Folder = TreeFolder;
+Tree.File = TreeFile;
+
+export { Tree };

package/docs/components/mdx/type-table.tsx

@@ -0,0 +1,71 @@
+interface TypeField {
+  description?: string;
+  type?: string;
+  optional?: boolean;
+  required?: boolean;
+  default?: string;
+}
+
+export const TypeTable = ({ type }: { type: Record<string, TypeField> }) => {
+  const entries = Object.entries(type ?? {}).map(([name, field]) => ({
+    name,
+    ...field,
+  }));
+  const hasDefault = entries.some((entry) => entry.default);
+
+  return (
+    <div className="no-scrollbar my-4 w-full overflow-y-auto rounded-xl border border-border">
+      <table className="relative w-full overflow-hidden border-none text-sm">
+        <thead>
+          <tr>
+            <th className="border-b border-border bg-background/70 px-3 py-2.5 text-left text-xs uppercase tracking-wider text-muted-foreground">
+              Field
+            </th>
+            <th className="border-b border-border bg-background/70 px-3 py-2.5 text-left text-xs uppercase tracking-wider text-muted-foreground">
+              Type
+            </th>
+            <th className="border-b border-border bg-background/70 px-3 py-2.5 text-left text-xs uppercase tracking-wider text-muted-foreground">
+              Description
+            </th>
+            <th className="border-b border-border bg-background/70 px-3 py-2.5 text-left text-xs uppercase tracking-wider text-muted-foreground">
+              Required
+            </th>
+            {hasDefault ? (
+              <th className="border-b border-border bg-background/70 px-3 py-2.5 text-left text-xs uppercase tracking-wider text-muted-foreground">
+                Default
+              </th>
+            ) : null}
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map((entry) => {
+            const required = entry.required ?? !entry.optional;
+            return (
+              <tr key={entry.name}>
+                <td className="border-b border-border px-3 py-2.5 text-left align-top">
+                  <code className="rounded-md bg-muted px-1.5 py-0.5 font-mono text-xs">
+                    {entry.name}
+                  </code>
+                </td>
+                <td className="border-b border-border px-3 py-2.5 text-left align-top">
+                  {entry.type ?? "\u2014"}
+                </td>
+                <td className="border-b border-border px-3 py-2.5 text-left align-top">
+                  {entry.description ?? ""}
+                </td>
+                <td className="border-b border-border px-3 py-2.5 text-left align-top">
+                  {required ? "Yes" : "Optional"}
+                </td>
+                {hasDefault ? (
+                  <td className="border-b border-border px-3 py-2.5 text-left align-top">
+                    {entry.default ?? "\u2014"}
+                  </td>
+                ) : null}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/docs/components/mdx/update.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+
+interface UpdateProps {
+  label: string;
+  description?: string;
+  tags?: string[];
+  children: ReactNode;
+}
+
+export const Update = ({ label, description, tags, children }: UpdateProps) => {
+  const anchorId = label.toLowerCase().replaceAll(/\s+/g, "-");
+
+  return (
+    <div
+      className="relative border-b border-border py-8 first:pt-0 last:border-b-0"
+      id={anchorId}
+    >
+      <div className="mb-4 flex flex-wrap items-center gap-3">
+        <a
+          className="text-lg font-semibold text-foreground hover:underline"
+          href={`#${anchorId}`}
+        >
+          {label}
+        </a>
+        {description ? (
+          <span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
+            {description}
+          </span>
+        ) : null}
+        {tags?.map((tag) => (
+          <span
+            className="rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary"
+            key={tag}
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+      <div className="prose prose-sm text-muted-foreground [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+        {children}
+      </div>
+    </div>
+  );
+};

package/docs/components/mdx/video.tsx

@@ -0,0 +1,12 @@
+export const Video = ({ src }: { src: string }) => (
+  <div className="relative overflow-hidden rounded-xl border border-border bg-black pt-[56.25%]">
+    <iframe
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+      className="absolute inset-0 h-full w-full border-0"
+      sandbox="allow-popups allow-presentation allow-scripts"
+      src={src}
+      title="Video"
+    />
+  </div>
+);