blodemd 0.1.0 → 0.2.0

package/docs/components/mdx/steps.tsx

@@ -1,92 +0,0 @@
-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-8 sm: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

@@ -1,193 +0,0 @@
-"use client";
-
-import { isValidElement, useCallback, useId, useMemo, useState } from "react";
-import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-interface TabProps {
-  title?: string;
-  label?: string;
-  icon?: ReactNode;
-  id?: string;
-  children: ReactNode;
-}
-
-interface ResolvedTabItem {
-  element: ReactElement<TabProps>;
-  key: string;
-  label: string;
-}
-
-interface TabsProps {
-  children: ReactNode;
-  defaultTabIndex?: number;
-  borderBottom?: boolean;
-}
-
-export const Tab = ({ children }: TabProps) => (
-  <div className="p-4">{children}</div>
-);
-
-const clampTabIndex = (index: number, total: number) => {
-  if (total <= 0) {
-    return 0;
-  }
-
-  return Math.min(Math.max(index, 0), total - 1);
-};
-
-const sanitizeDomId = (value: string) =>
-  value.replaceAll(/[^a-zA-Z0-9_-]/g, "-");
-
-const toNodeArray = (children: ReactNode): ReactNode[] =>
-  Array.isArray(children) ? children.flatMap(toNodeArray) : [children];
-
-const resolveTabItems = (children: ReactNode): ResolvedTabItem[] =>
-  toNodeArray(children)
-    .filter((child): child is ReactElement<TabProps> =>
-      isValidElement<TabProps>(child)
-    )
-    .map((element, index) => {
-      const label =
-        element.props.title ?? element.props.label ?? `Tab ${index + 1}`;
-      const key = sanitizeDomId(
-        String(element.props.id ?? element.key ?? `tab-${index + 1}`)
-      );
-
-      return {
-        element,
-        key,
-        label,
-      };
-    });
-
-export const Tabs = ({
-  children,
-  defaultTabIndex = 0,
-  borderBottom,
-}: TabsProps) => {
-  const items = useMemo(() => resolveTabItems(children), [children]);
-  const [active, setActive] = useState<number | null>(null);
-  const activeIndex = clampTabIndex(active ?? defaultTabIndex, items.length);
-  const activeItem = items[activeIndex];
-  const tabsId = useId();
-
-  const getTabId = useCallback(
-    (index: number) => `${tabsId}-${items[index]?.key ?? index}-tab`,
-    [items, tabsId]
-  );
-  const getPanelId = useCallback(
-    (index: number) => `${tabsId}-${items[index]?.key ?? index}-panel`,
-    [items, tabsId]
-  );
-  const focusTab = useCallback(
-    (index: number) => {
-      document.querySelector<HTMLElement>(`[id="${getTabId(index)}"]`)?.focus();
-    },
-    [getTabId]
-  );
-
-  const handleTabClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
-    const index = Number(event.currentTarget.dataset.index ?? "0");
-    setActive(index);
-  }, []);
-
-  const handleTabKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLButtonElement>) => {
-      if (!items.length) {
-        return;
-      }
-
-      const index = Number(event.currentTarget.dataset.index ?? activeIndex);
-      const lastIndex = items.length - 1;
-      let nextIndex: number | null = null;
-
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowRight": {
-          nextIndex = index === lastIndex ? 0 : index + 1;
-          break;
-        }
-        case "ArrowLeft":
-        case "ArrowUp": {
-          nextIndex = index === 0 ? lastIndex : index - 1;
-          break;
-        }
-        case "End": {
-          nextIndex = lastIndex;
-          break;
-        }
-        case "Home": {
-          nextIndex = 0;
-          break;
-        }
-        default: {
-          return;
-        }
-      }
-
-      event.preventDefault();
-      setActive(nextIndex);
-      focusTab(nextIndex);
-    },
-    [activeIndex, focusTab, items.length]
-  );
-
-  if (!activeItem) {
-    return null;
-  }
-
-  return (
-    <div
-      className={cn(
-        "overflow-hidden rounded-xl bg-code",
-        borderBottom && "border-b-2"
-      )}
-    >
-      <div
-        aria-orientation="horizontal"
-        className="flex gap-1 border-b border-border bg-muted/50 px-2 pt-2"
-        role="tablist"
-      >
-        {items.map((item, index) => {
-          const isSelected = index === activeIndex;
-
-          return (
-            <button
-              aria-controls={getPanelId(index)}
-              aria-selected={isSelected}
-              className={cn(
-                "inline-flex cursor-pointer items-center gap-1.5 rounded-t-md border-b-2 bg-transparent px-3 py-2 text-sm transition-colors",
-                isSelected
-                  ? "border-primary text-foreground"
-                  : "border-transparent text-muted-foreground hover:text-foreground"
-              )}
-              data-index={index}
-              id={getTabId(index)}
-              key={item.key}
-              onClick={handleTabClick}
-              onKeyDown={handleTabKeyDown}
-              role="tab"
-              tabIndex={isSelected ? 0 : -1}
-              type="button"
-            >
-              {item.element.props.icon ? (
-                <span className="shrink-0">{item.element.props.icon}</span>
-              ) : null}
-              {item.label}
-            </button>
-          );
-        })}
-      </div>
-      <div
-        aria-labelledby={getTabId(activeIndex)}
-        id={getPanelId(activeIndex)}
-        role="tabpanel"
-        tabIndex={0}
-      >
-        {activeItem.element}
-      </div>
-    </div>
-  );
-};

package/docs/components/mdx/tile.tsx

@@ -1,43 +0,0 @@
-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

@@ -1,71 +0,0 @@
-"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

@@ -1,120 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import type { ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-interface TreeFileProps {
-  name: string;
-}
-
-export 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;
-}
-
-export 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 TreeRoot = ({ children }: { children: ReactNode }) => (
-  <div className="my-4 rounded-xl border border-border bg-card p-4 font-mono text-sm">
-    {children}
-  </div>
-);
-
-export const Tree = Object.assign(TreeRoot, {
-  File: TreeFile,
-  Folder: TreeFolder,
-});

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

@@ -1,71 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,45 +0,0 @@
-import { cn } from "@/lib/utils";
-
-type AspectRatio = "16:9" | "4:3" | "1:1" | "21:9";
-
-const aspectRatioMap: Record<AspectRatio, string> = {
-  "16:9": "pt-[56.25%]",
-  "1:1": "pt-[100%]",
-  "21:9": "pt-[42.86%]",
-  "4:3": "pt-[75%]",
-};
-
-interface VideoProps {
-  src: string;
-  title?: string;
-  height?: number;
-  aspectRatio?: AspectRatio;
-}
-
-export const Video = ({
-  src,
-  title = "Video",
-  height,
-  aspectRatio = "16:9",
-}: VideoProps) => {
-  const useFixedHeight = typeof height === "number";
-
-  return (
-    <div
-      className={cn(
-        "relative overflow-hidden rounded-xl border border-border bg-black",
-        !useFixedHeight && aspectRatioMap[aspectRatio]
-      )}
-      style={useFixedHeight ? { height: `${height}px` } : undefined}
-    >
-      <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-same-origin allow-scripts"
-        src={src}
-        title={title}
-      />
-    </div>
-  );
-};