<Callout type="info">
  This is an informational callout component with custom styling.
</Callout>

<Tabs>
  <Tab title="JavaScript">
    ```js
    console.log("Hello, World!")
    ```
  </Tab>
  <Tab title="TypeScript">
    ```ts
    console.log("Hello, World!" as string)
    ```
  </Tab>
</Tabs>

<Chart data={chartData} type="line" />

<Button onClick={() => alert('Clicked!')}>
  Interactive Button
</Button>

<Callout type="info">
  This is an informational message
</Callout>

<Callout type="warning">
  This is a warning
</Callout>

<Callout type="error">
  This is an error message
</Callout>

<Callout type="success">
  Operation completed successfully
</Callout>

<Button>Default Button</Button>

<Button variant="primary">Primary Action</Button>

<Button variant="secondary">Secondary Action</Button>

<Button variant="danger">Delete</Button>

<Button href="/docs">Link Button</Button>

<Card title="Getting Started">
  Follow this guide to get started with MDX
</Card>

<Card title="API Reference" icon="📚">
  Complete API documentation
</Card>

<Grid cols={3}>
  <Card title="SDK">TypeScript SDK</Card>
  <Card title="CLI">Command-line tool</Card>
  <Card title="MCP">Protocol server</Card>
</Grid>

<Grid cols={2} gap="large">
  <div>Column 1</div>
  <div>Column 2</div>
</Grid>

<Flex direction="row" align="center" justify="space-between">
  <div>Left content</div>
  <div>Right content</div>
</Flex>

<Flex direction="column" gap="medium">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Flex>

<Container>
  <h1>Page Title</h1>
  <p>This content is centered and has a maximum width</p>
</Container>

<Container size="small">
  Narrow container
</Container>

<Container size="large">
  Wide container
</Container>

<Tabs>
  <Tab title="Installation">
    ## Installation

    Install using pnpm:
    \`\`\`bash
    pnpm install mdxld
    \`\`\`
  </Tab>

  <Tab title="Usage">
    ## Usage

    Import and use:
    \`\`\`typescript
    import { parse } from 'mdxld'
    \`\`\`
  </Tab>

  <Tab title="Examples">
    ## Examples

    See examples below...
  </Tab>
</Tabs>

<Accordion>
  <AccordionItem title="What is MDX?">
    MDX is a format that combines Markdown with JSX.
  </AccordionItem>

  <AccordionItem title="How do I get started?">
    Install the package and import components.
  </AccordionItem>

  <AccordionItem title="Is it production ready?">
    Yes, MDX is used by many production applications.
  </AccordionItem>
</Accordion>

'use client'

import { useState } from 'react'

export function ModalDemo() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        Open Modal
      </Button>

      <Modal open={open} onClose={() => setOpen(false)}>
        <h2>Modal Title</h2>
        <p>Modal content goes here</p>
      </Modal>
    </>
  )
}

<ModalDemo />

<Table
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'role', label: 'Role' },
    { key: 'status', label: 'Status' }
  ]}
  data={[
    { name: 'Alice', role: 'Developer', status: 'Active' },
    { name: 'Bob', role: 'Designer', status: 'Active' },
    { name: 'Carol', role: 'Manager', status: 'Away' }
  ]}
/>

export const salesData = [
  { month: 'Jan', sales: 4000 },
  { month: 'Feb', sales: 3000 },
  { month: 'Mar', sales: 5000 },
  { month: 'Apr', sales: 4500 },
]

<Chart
  type="line"
  data={salesData}
  xKey="month"
  yKey="sales"
  title="Monthly Sales"
/>

<Chart
  type="bar"
  data={salesData}
  xKey="month"
  yKey="sales"
/>

<Stats
  items={[
    { label: 'Total Users', value: '10,245', change: '+12%' },
    { label: 'Revenue', value: '$45.2K', change: '+23%' },
    { label: 'Conversion', value: '3.2%', change: '-2%' }
  ]}
/>

<Hero
  title="Welcome to .do Platform"
  subtitle="Business-as-Code for autonomous operations"
  cta={
    <Button variant="primary" size="large" href="/get-started">
      Get Started
    </Button>
  }
  image="/hero-image.png"
/>

<Features
  items={[
    {
      icon: "⚡",
      title: "Fast",
      description: "Edge-first architecture for global performance"
    },
    {
      icon: "🔒",
      title: "Secure",
      description: "Built-in security and compliance"
    },
    {
      icon: "🌍",
      title: "Global",
      description: "Worldwide distribution on Cloudflare"
    }
  ]}
/>

<Pricing
  plans={[
    {
      name: 'Starter',
      price: '$0',
      features: ['10 projects', '100 GB storage', 'Community support'],
      cta: <Button>Start Free</Button>
    },
    {
      name: 'Pro',
      price: '$29',
      features: ['Unlimited projects', '1 TB storage', 'Priority support'],
      cta: <Button variant="primary">Upgrade to Pro</Button>,
      highlighted: true
    },
    {
      name: 'Enterprise',
      price: 'Custom',
      features: ['Custom limits', 'Dedicated support', 'SLA'],
      cta: <Button>Contact Sales</Button>
    }
  ]}
/>

<Testimonials
  items={[
    {
      quote: "MDX transformed how we build documentation",
      author: "Jane Developer",
      role: "CTO at TechCorp",
      avatar: "/avatars/jane.jpg"
    },
    {
      quote: "The best way to combine code and content",
      author: "John Designer",
      role: "Lead Designer at StartupCo",
      avatar: "/avatars/john.jpg"
    }
  ]}
/>

'use client'

import { useState } from 'react'

export function InputDemo() {
  const [value, setValue] = useState('')

  return (
    <Input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Enter text..."
      label="Name"
    />
  )
}

<InputDemo />

<Select
  options={[
    { value: 'js', label: 'JavaScript' },
    { value: 'ts', label: 'TypeScript' },
    { value: 'py', label: 'Python' }
  ]}
  placeholder="Choose language"
  label="Programming Language"
/>

'use client'

export function ContactForm() {
  const handleSubmit = (e) => {
    e.preventDefault()
    // Handle form submission
  }

  return (
    <Form onSubmit={handleSubmit}>
      <Input name="name" label="Name" required />
      <Input name="email" label="Email" type="email" required />
      <Textarea name="message" label="Message" rows={4} />
      <Button type="submit">Send Message</Button>
    </Form>
  )
}

<ContactForm />

// components/Badge.tsx
export interface BadgeProps {
  children: React.ReactNode
  variant?: 'default' | 'success' | 'warning' | 'error'
}

export function Badge({ children, variant = 'default' }: BadgeProps) {
  return (
    <span className={`badge badge-${variant}`}>
      {children}
    </span>
  )
}

import { Badge } from '@/components/Badge'

<Badge variant="success">New</Badge>
<Badge variant="warning">Beta</Badge>
<Badge variant="error">Deprecated</Badge>

pnpm install mdxui

import { Hero, Features, Pricing } from 'mdxui'

<Hero
  title="Build with MDXUI"
  cta={<Button>Get Started</Button>}
/>

<Features items={featureList} />

<Pricing plans={pricingPlans} />

import { Button, Card } from '@shadcn/ui'
import { LineChart } from 'recharts'
import { Accordion } from '@radix-ui/react-accordion'

<Button>shadcn/ui Button</Button>
<LineChart data={chartData} />
<Accordion>...</Accordion>

<div className="bg-blue-500 text-white p-4 rounded-lg">
  Styled with Tailwind
</div>

import styled from 'styled-components'

export const StyledBox = styled.div`
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 0.5rem;
`

<StyledBox>Styled content</StyledBox>

import styles from './component.module.css'

<div className={styles.container}>
  Styled with CSS modules
</div>

<Button
  aria-label="Close dialog"
  aria-pressed={isPressed}
>
  Close
</Button>

<Tabs>
  {/* Tabs support arrow key navigation */}
  <Tab title="Tab 1">Content 1</Tab>
  <Tab title="Tab 2">Content 2</Tab>
</Tabs>

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>