blodemd 0.0.5 → 0.0.7

package/docs/components/mdx/badge.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+const colorStyles: Record<string, string> = {
+  blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+  gray: "bg-muted text-muted-foreground",
+  green: "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300",
+  orange:
+    "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
+  purple:
+    "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300",
+  red: "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300",
+  surface: "bg-card text-card-foreground",
+  white: "bg-white text-foreground dark:bg-white dark:text-black",
+  yellow:
+    "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300",
+};
+
+const strokeStyles: Record<string, string> = {
+  blue: "border-blue-300 text-blue-700 dark:border-blue-700 dark:text-blue-300",
+  gray: "border-border text-muted-foreground",
+  green:
+    "border-green-300 text-green-700 dark:border-green-700 dark:text-green-300",
+  orange:
+    "border-orange-300 text-orange-700 dark:border-orange-700 dark:text-orange-300",
+  purple:
+    "border-purple-300 text-purple-700 dark:border-purple-700 dark:text-purple-300",
+  red: "border-red-300 text-red-700 dark:border-red-700 dark:text-red-300",
+  surface: "border-border text-card-foreground",
+  white: "border-border text-foreground",
+  yellow:
+    "border-yellow-300 text-yellow-700 dark:border-yellow-700 dark:text-yellow-300",
+};
+
+const sizeStyles: Record<string, string> = {
+  lg: "px-3 py-1.5 text-sm",
+  md: "px-2.5 py-1 text-xs",
+  sm: "px-2 py-0.5 text-xs",
+  xs: "px-1.5 py-0.5 text-[10px]",
+};
+
+interface BadgeProps {
+  color?: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  shape?: "rounded" | "pill";
+  icon?: ReactNode;
+  stroke?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+export const Badge = ({
+  color = "gray",
+  size = "md",
+  shape = "rounded",
+  icon,
+  stroke = false,
+  disabled = false,
+  className,
+  children,
+}: BadgeProps) => (
+  <span
+    className={cn(
+      "inline-flex items-center gap-1 font-medium",
+      shape === "pill" ? "rounded-full" : "rounded-md",
+      stroke
+        ? cn("border bg-transparent", strokeStyles[color] ?? strokeStyles.gray)
+        : (colorStyles[color] ?? colorStyles.gray),
+      sizeStyles[size] ?? sizeStyles.md,
+      disabled && "opacity-50",
+      className
+    )}
+  >
+    {icon ? <span className="shrink-0">{icon}</span> : null}
+    {children}
+  </span>
+);

package/docs/components/mdx/callout.tsx

@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+const variantStyles: Record<string, string> = {
+  check:
+    "border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900",
+  danger: "border-red-600 bg-red-100 dark:border-red-400 dark:bg-red-900",
+  info: "bg-card border-border",
+  note: "bg-card border-border",
+  success:
+    "border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900",
+  tip: "border-blue-600 bg-blue-100 dark:border-blue-400 dark:bg-blue-900",
+  warning:
+    "border-amber-600 bg-amber-100 dark:border-amber-400 dark:bg-amber-900",
+};
+
+interface CalloutProps {
+  type?: "info" | "success" | "warning" | "danger" | "note" | "tip" | "check";
+  title?: string;
+  icon?: ReactNode;
+  color?: string;
+  children: ReactNode;
+}
+
+export const Callout = ({
+  type = "info",
+  title,
+  icon,
+  color,
+  children,
+}: CalloutProps) => (
+  <div
+    data-slot="alert"
+    role="alert"
+    data-variant="default"
+    className={cn(
+      "relative grid grid-cols-[0_1fr] items-start gap-y-0.5 rounded-xl border px-4 py-3 text-sm text-surface-foreground",
+      "has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3",
+      "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+      "**:[code]:border md:-mx-1",
+      variantStyles[type]
+    )}
+    style={
+      color
+        ? {
+            backgroundColor: `${color}10`,
+            borderColor: color,
+          }
+        : undefined
+    }
+  >
+    {icon}
+    <div
+      data-slot="alert-description"
+      className="col-start-2 grid justify-items-start gap-1 text-sm text-foreground [&_p]:leading-relaxed"
+    >
+      {title ? <strong className="font-medium">{title}</strong> : null}
+      <div className="text-sm [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&_p]:leading-relaxed [&_p:not(:first-child)]:mt-6">
+        {children}
+      </div>
+    </div>
+  </div>
+);
+
+export const Note = ({ children }: { children: ReactNode }) => (
+  <Callout type="note">{children}</Callout>
+);
+
+export const Warning = ({ children }: { children: ReactNode }) => (
+  <Callout type="warning">{children}</Callout>
+);
+
+export const Info = ({ children }: { children: ReactNode }) => (
+  <Callout type="info">{children}</Callout>
+);
+
+export const Tip = ({ children }: { children: ReactNode }) => (
+  <Callout type="tip">{children}</Callout>
+);
+
+export const Check = ({ children }: { children: ReactNode }) => (
+  <Callout type="check">{children}</Callout>
+);
+
+export const Danger = ({ children }: { children: ReactNode }) => (
+  <Callout type="danger">{children}</Callout>
+);

package/docs/components/mdx/card.tsx

@@ -0,0 +1,110 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+import { DocIcon } from "@/components/icons/doc-icon";
+import { cn } from "@/lib/utils";
+
+interface CardProps {
+  title?: string;
+  icon?: ReactNode;
+  color?: string;
+  href?: string;
+  horizontal?: boolean;
+  img?: string;
+  cta?: string;
+  children?: ReactNode;
+}
+
+const CardInner = ({
+  title,
+  icon,
+  color,
+  horizontal,
+  img,
+  cta,
+  href,
+  children,
+}: CardProps) => {
+  const resolvedIcon =
+    typeof icon === "string" ? <DocIcon icon={icon} size={18} /> : icon;
+
+  return (
+    <div
+      className={cn(
+        "group/card rounded-xl border border-border bg-card p-4 transition-colors",
+        href && "hover:border-primary/30 hover:bg-accent/50",
+        horizontal && "flex items-start gap-4"
+      )}
+    >
+      {img && !horizontal ? (
+        <div className="relative mb-3 aspect-video overflow-hidden rounded-lg">
+          <Image
+            alt={title ?? ""}
+            className="object-cover"
+            fill
+            sizes="(max-width: 768px) 100vw, 50vw"
+            src={img}
+            unoptimized
+          />
+        </div>
+      ) : null}
+      {resolvedIcon ? (
+        <div
+          className="mb-3 flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground"
+          style={color ? { color } : undefined}
+        >
+          {resolvedIcon}
+        </div>
+      ) : null}
+      <div className="min-w-0 flex-1">
+        {title ? (
+          <div className="mb-1 font-medium text-foreground">{title}</div>
+        ) : null}
+        {children ? (
+          <div className="text-sm text-muted-foreground [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+            {children}
+          </div>
+        ) : null}
+        {cta ? (
+          <div className="mt-2 text-sm font-medium text-primary">{cta}</div>
+        ) : null}
+      </div>
+      {href ? (
+        <svg
+          aria-hidden
+          className="mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform group-hover/card:translate-x-0.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M5 12h14M12 5l7 7-7 7"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : null}
+    </div>
+  );
+};
+
+export const Card = (props: CardProps) => {
+  if (props.href) {
+    const isExternal = props.href.startsWith("http");
+    if (isExternal) {
+      return (
+        <a href={props.href} rel="noopener noreferrer" target="_blank">
+          <CardInner {...props} />
+        </a>
+      );
+    }
+    return (
+      <Link href={props.href}>
+        <CardInner {...props} />
+      </Link>
+    );
+  }
+  return <CardInner {...props} />;
+};

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

@@ -0,0 +1,75 @@
+"use client";
+
+import { CheckIcon, ClipboardIcon } from "blode-icons-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+import { getTextContent } from "./get-text-content";
+
+export const CodeBlock = ({
+  children,
+  className,
+  style,
+  tabIndex,
+  ...props
+}: ComponentPropsWithoutRef<"pre"> & {
+  children: ReactNode;
+}) => {
+  const [copied, setCopied] = useState(false);
+  const code = useMemo(() => getTextContent(children), [children]);
+
+  useEffect(() => {
+    if (copied) {
+      const timer = setTimeout(() => setCopied(false), 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [copied]);
+
+  const handleCopy = useCallback(async () => {
+    if (!code) {
+      return;
+    }
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+  }, [code]);
+
+  const preStyle = style ? { ...style } : undefined;
+  if (preStyle) {
+    delete preStyle.backgroundColor;
+  }
+
+  return (
+    <figure data-rehype-pretty-code-figure="">
+      <pre
+        className={cn(
+          "no-scrollbar min-w-0 overflow-x-auto overflow-y-auto overscroll-y-auto overscroll-x-contain px-4 py-3.5 outline-none has-[[data-slot=tabs]]:p-0 has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0",
+          className
+        )}
+        style={preStyle}
+        tabIndex={tabIndex ?? 0}
+        {...props}
+      >
+        <Button
+          className="absolute top-3 right-2 z-10 size-7 bg-code hover:opacity-100 focus-visible:opacity-100"
+          data-copied={copied}
+          data-slot="copy-button"
+          onClick={handleCopy}
+          size="icon"
+          type="button"
+          variant="ghost"
+        >
+          <span className="sr-only">{copied ? "Copied" : "Copy"}</span>
+          {copied ? (
+            <CheckIcon aria-hidden="true" />
+          ) : (
+            <ClipboardIcon aria-hidden="true" />
+          )}
+        </Button>
+        {children}
+      </pre>
+    </figure>
+  );
+};

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