@barodoc/theme-docs 0.0.1

package/src/components/mdx/DocCard.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { Card, CardHeader, CardTitle, CardDescription } from "../ui/card";
+import { cn } from "../../lib/utils";
+import { ChevronRight } from "lucide-react";
+
+interface DocCardProps {
+  title: string;
+  icon?: string;
+  href?: string;
+  children?: React.ReactNode;
+}
+
+export function DocCard({ title, icon, href, children }: DocCardProps) {
+  const Comp = href ? "a" : "div";
+  
+  return (
+    <Card
+      className={cn(
+        "group relative overflow-hidden transition-all duration-200",
+        href && "cursor-pointer hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-lg hover:shadow-primary-500/5"
+      )}
+    >
+      <Comp href={href} className="block">
+        <div className="absolute inset-0 bg-gradient-to-br from-primary-50/50 to-transparent dark:from-primary-950/30 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
+        <CardHeader className="relative">
+          {icon && (
+            <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--color-bg-secondary)] group-hover:bg-primary-50 dark:group-hover:bg-primary-950/50 mb-3 transition-colors">
+              <span className="text-xl">{icon}</span>
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            <CardTitle className="group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+              {title}
+            </CardTitle>
+            {href && (
+              <ChevronRight className="h-4 w-4 text-[var(--color-text-muted)] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
+            )}
+          </div>
+          {children && (
+            <CardDescription className="mt-1.5 leading-relaxed">
+              {children}
+            </CardDescription>
+          )}
+        </CardHeader>
+      </Comp>
+    </Card>
+  );
+}
+
+interface DocCardGroupProps {
+  cols?: 1 | 2 | 3 | 4;
+  children: React.ReactNode;
+}
+
+export function DocCardGroup({ cols = 2, children }: DocCardGroupProps) {
+  const gridCols: 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",
+  };
+
+  return (
+    <div className={cn("not-prose grid gap-4 my-6", gridCols[cols])}>
+      {children}
+    </div>
+  );
+}
+
+export default DocCard;

package/src/components/mdx/DocTabs.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
+import { cn } from "../../lib/utils";
+
+interface TabItem {
+  label: string;
+  value: string;
+  children: React.ReactNode;
+}
+
+interface DocTabsProps {
+  items: TabItem[];
+  defaultValue?: string;
+  className?: string;
+}
+
+export function DocTabs({ items, defaultValue, className }: DocTabsProps) {
+  const defaultTab = defaultValue || items[0]?.value;
+
+  return (
+    <Tabs defaultValue={defaultTab} className={cn("not-prose my-6", className)}>
+      <TabsList className="w-full justify-start bg-[var(--color-bg-secondary)] rounded-lg p-1">
+        {items.map((item) => (
+          <TabsTrigger 
+            key={item.value} 
+            value={item.value}
+            className="data-[state=active]:bg-[var(--color-bg)] data-[state=active]:shadow-sm"
+          >
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {items.map((item) => (
+        <TabsContent 
+          key={item.value} 
+          value={item.value}
+          className="mt-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-4"
+        >
+          <div className="text-sm">
+            {item.children}
+          </div>
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}
+
+export default DocTabs;

package/src/components/mdx/Expandable.tsx

@@ -0,0 +1,107 @@
+import * as React from "react";
+import { ChevronDown, Plus, Minus } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+
+interface ExpandableProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+export function Expandable({
+  title,
+  children,
+  defaultOpen = false,
+  className,
+}: ExpandableProps) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+  return (
+    <div
+      className={cn(
+        "not-prose border border-[var(--color-border)] rounded-lg overflow-hidden my-4",
+        className
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full items-center justify-between px-4 py-3 bg-[var(--color-bg-secondary)] hover:bg-[var(--color-bg-tertiary)] transition-colors text-left"
+      >
+        <span className="text-sm font-medium text-[var(--color-text)]">
+          {title}
+        </span>
+        <ChevronDown
+          className={cn(
+            "h-4 w-4 text-[var(--color-text-muted)] transition-transform",
+            isOpen && "rotate-180"
+          )}
+        />
+      </button>
+      {isOpen && (
+        <div className="px-4 py-3 bg-[var(--color-bg)] border-t border-[var(--color-border)] text-sm text-[var(--color-text-secondary)]">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ExpandableListProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function ExpandableList({ children, className }: ExpandableListProps) {
+  return (
+    <div className={cn("space-y-2 my-4", className)}>
+      {children}
+    </div>
+  );
+}
+
+interface ExpandableItemProps {
+  title: string;
+  type?: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+export function ExpandableItem({
+  title,
+  type,
+  children,
+  defaultOpen = false,
+}: ExpandableItemProps) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+  return (
+    <div className="not-prose border-l-2 border-[var(--color-border)] pl-4">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 text-left group"
+      >
+        {isOpen ? (
+          <Minus className="h-3 w-3 text-[var(--color-text-muted)]" />
+        ) : (
+          <Plus className="h-3 w-3 text-[var(--color-text-muted)]" />
+        )}
+        <code className="font-mono text-sm text-[var(--color-text)] group-hover:text-primary-600 dark:group-hover:text-primary-400">
+          {title}
+        </code>
+        {type && (
+          <span className="font-mono text-xs text-[var(--color-text-muted)]">
+            {type}
+          </span>
+        )}
+      </button>
+      {isOpen && (
+        <div className="mt-2 ml-5 text-sm text-[var(--color-text-secondary)]">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/mdx/FileTree.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+
+interface FileTreeProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function FileTree({ children, className }: FileTreeProps) {
+  return (
+    <div className={cn("not-prose my-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-4 font-mono text-sm", className)}>
+      <ul className="space-y-1">{children}</ul>
+    </div>
+  );
+}
+
+interface FileProps {
+  name: string;
+  icon?: React.ReactNode;
+}
+
+export function TreeFile({ name, icon }: FileProps) {
+  return (
+    <li className="flex items-center gap-2 py-0.5 text-[var(--color-text-secondary)]">
+      {icon || <File className="h-4 w-4 text-[var(--color-text-muted)]" />}
+      <span>{name}</span>
+    </li>
+  );
+}
+
+interface FolderProps {
+  name: string;
+  children?: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+export function TreeFolder({ name, children, defaultOpen = false }: FolderProps) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  const hasChildren = React.Children.count(children) > 0;
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full items-center gap-1 py-0.5 text-[var(--color-text)] hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+      >
+        {hasChildren && (
+          <ChevronRight
+            className={cn(
+              "h-3 w-3 text-[var(--color-text-muted)] transition-transform",
+              isOpen && "rotate-90"
+            )}
+          />
+        )}
+        {!hasChildren && <span className="w-3" />}
+        {isOpen ? (
+          <FolderOpen className="h-4 w-4 text-primary-500" />
+        ) : (
+          <Folder className="h-4 w-4 text-primary-500" />
+        )}
+        <span className="font-medium">{name}</span>
+      </button>
+      {isOpen && hasChildren && (
+        <ul className="ml-4 border-l border-[var(--color-border)] pl-3 mt-1 space-y-1">
+          {children}
+        </ul>
+      )}
+    </li>
+  );
+}

package/src/components/mdx/Frame.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+interface FrameProps {
+  children: React.ReactNode;
+  caption?: string;
+  className?: string;
+}
+
+export function Frame({ children, caption, className }: FrameProps) {
+  return (
+    <figure className={cn("not-prose my-6", className)}>
+      <div className="overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
+        {children}
+      </div>
+      {caption && (
+        <figcaption className="mt-2 text-center text-sm text-[var(--color-text-muted)]">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}

package/src/components/mdx/Icon.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { icons, type LucideIcon as LucideIconType } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+
+interface IconProps {
+  name: string;
+  size?: number | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  color?: string;
+}
+
+const sizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+};
+
+export function Icon({ name, size = "md", className, color }: IconProps) {
+  // Convert name to PascalCase (e.g., "chevron-right" -> "ChevronRight")
+  const iconName = name
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+
+  const LucideIcon = icons[iconName as keyof typeof icons] as LucideIconType | undefined;
+
+  if (!LucideIcon) {
+    console.warn(`Icon "${name}" not found in lucide-react`);
+    return null;
+  }
+
+  const numericSize = typeof size === "number" ? size : sizeMap[size];
+
+  return (
+    <LucideIcon
+      size={numericSize}
+      className={cn("inline-block", className)}
+      style={color ? { color } : undefined}
+    />
+  );
+}
+
+// Pre-built icon components for common use cases
+export function CheckIcon({ className }: { className?: string }) {
+  return <Icon name="check" className={cn("text-green-500", className)} />;
+}
+
+export function XIcon({ className }: { className?: string }) {
+  return <Icon name="x" className={cn("text-red-500", className)} />;
+}
+
+export function InfoIcon({ className }: { className?: string }) {
+  return <Icon name="info" className={cn("text-blue-500", className)} />;
+}
+
+export function WarningIcon({ className }: { className?: string }) {
+  return <Icon name="alert-triangle" className={cn("text-yellow-500", className)} />;
+}

package/src/components/mdx/Mermaid.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+interface MermaidProps {
+  chart: string;
+  className?: string;
+}
+
+export function Mermaid({ chart, className }: MermaidProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [svg, setSvg] = React.useState<string>("");
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let isMounted = true;
+
+    async function renderChart() {
+      try {
+        // Dynamically import mermaid
+        const mermaid = (await import("mermaid")).default;
+        
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: document.documentElement.classList.contains("dark") ? "dark" : "default",
+          securityLevel: "loose",
+        });
+
+        const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+        const { svg } = await mermaid.render(id, chart);
+        
+        if (isMounted) {
+          setSvg(svg);
+          setError(null);
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : "Failed to render diagram");
+        }
+      }
+    }
+
+    renderChart();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [chart]);
+
+  // Re-render on theme change
+  React.useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === "class") {
+          // Theme changed, re-render
+          setSvg("");
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  if (error) {
+    return (
+      <div className="not-prose my-4 rounded-lg border border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30 p-4">
+        <p className="text-sm text-red-600 dark:text-red-400">
+          Mermaid diagram error: {error}
+        </p>
+        <pre className="mt-2 text-xs text-red-500 overflow-auto">{chart}</pre>
+      </div>
+    );
+  }
+
+  if (!svg) {
+    return (
+      <div className={cn("not-prose my-4 flex items-center justify-center p-8 bg-[var(--color-bg-secondary)] rounded-lg", className)}>
+        <div className="text-sm text-[var(--color-text-muted)]">Loading diagram...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("not-prose my-4 flex justify-center overflow-x-auto rounded-lg bg-[var(--color-bg)] p-4", className)}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

package/src/components/mdx/ParamField.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+interface ParamFieldProps {
+  name: string;
+  type?: string;
+  required?: boolean;
+  default?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function ParamField({
+  name,
+  type,
+  required,
+  default: defaultValue,
+  children,
+  className,
+}: ParamFieldProps) {
+  return (
+    <div
+      className={cn(
+        "not-prose border-b border-[var(--color-border)] py-4 last:border-b-0",
+        className
+      )}
+    >
+      <div className="flex flex-wrap items-baseline gap-2">
+        <code className="font-mono text-sm font-semibold text-[var(--color-text)]">
+          {name}
+        </code>
+        {type && (
+          <span className="font-mono text-xs text-[var(--color-text-muted)]">
+            {type}
+          </span>
+        )}
+        {required && (
+          <span className="rounded bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400">
+            required
+          </span>
+        )}
+        {defaultValue && (
+          <span className="text-xs text-[var(--color-text-muted)]">
+            default: <code className="font-mono">{defaultValue}</code>
+          </span>
+        )}
+      </div>
+      {children && (
+        <div className="mt-2 text-sm text-[var(--color-text-secondary)] prose prose-sm dark:prose-invert max-w-none">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ParamFieldGroupProps {
+  children: React.ReactNode;
+  title?: string;
+  className?: string;
+}
+
+export function ParamFieldGroup({ children, title, className }: ParamFieldGroupProps) {
+  return (
+    <div className={cn("my-6", className)}>
+      {title && (
+        <h4 className="text-sm font-semibold text-[var(--color-text)] mb-4 uppercase tracking-wide">
+          {title}
+        </h4>
+      )}
+      <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg)] px-4">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/mdx/ResponseField.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+interface ResponseFieldProps {
+  name: string;
+  type?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function ResponseField({
+  name,
+  type,
+  children,
+  className,
+}: ResponseFieldProps) {
+  return (
+    <div
+      className={cn(
+        "not-prose border-b border-[var(--color-border)] py-4 first:pt-0 last:border-b-0",
+        className
+      )}
+    >
+      <div className="flex flex-wrap items-baseline gap-2">
+        <code className="font-mono text-sm font-semibold text-[var(--color-text)]">
+          {name}
+        </code>
+        {type && (
+          <span className="font-mono text-xs text-[var(--color-text-muted)]">
+            {type}
+          </span>
+        )}
+      </div>
+      {children && (
+        <div className="mt-2 text-sm text-[var(--color-text-secondary)] prose prose-sm dark:prose-invert max-w-none">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ResponseFieldGroupProps {
+  children: React.ReactNode;
+  title?: string;
+  className?: string;
+}
+
+export function ResponseFieldGroup({ children, title, className }: ResponseFieldGroupProps) {
+  return (
+    <div className={cn("my-6", className)}>
+      {title && (
+        <h4 className="text-sm font-semibold text-[var(--color-text)] mb-4 uppercase tracking-wide">
+          {title}
+        </h4>
+      )}
+      <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg)] px-4">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/mdx/Step.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<div class="relative">
+  <h3 class="font-semibold text-[var(--color-text)] mb-2">{title}</h3>
+  <div class="text-sm text-[var(--color-text-secondary)]">
+    <slot />
+  </div>
+</div>

package/src/components/mdx/Steps.astro

@@ -0,0 +1,37 @@
+---
+// Steps component for step-by-step guides
+---
+
+<div class="not-prose my-6 space-y-4 border-l-2 border-[var(--color-border)] pl-6 ml-2">
+  <slot />
+</div>
+
+<style>
+  div :global(> *) {
+    position: relative;
+  }
+  
+  div :global(> *::before) {
+    content: counter(step);
+    counter-increment: step;
+    position: absolute;
+    left: -2.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    background-color: var(--color-bg);
+    border: 2px solid var(--color-border);
+    border-radius: 9999px;
+  }
+</style>
+
+<script>
+  // Initialize step counter
+  document.querySelectorAll('.not-prose.space-y-4').forEach(container => {
+    container.style.counterReset = 'step';
+  });
+</script>