[
  {
    "path": ".eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "github: Logging-Studio\n"
  },
  {
    "path": ".github/workflows/deploy.yml",
    "content": "name: \"Deploy to VPS\"\n\non:\n  release:\n    types:\n      - published\n\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Check out the repository\n        uses: actions/checkout@v4\n\n      - name: Setup Docker Buildx\n        uses: docker/setup-buildx-action@v3\n\n      - name: DockerHub login\n        uses: docker/login-action@v3\n        with:\n          username: ${{ secrets.DOCKERHUB_USERNAME }}\n          password: ${{ secrets.DOCKERHUB_TOKEN }}\n\n      - name: Build and push to DockerHub\n        run: |\n          docker build -t devarifhossain/retroui:1.2.0 ./\n          docker push devarifhossain/retroui:1.2.0\n\n      # - name: Set up SSH\n      #   uses: webfactory/ssh-agent@v0.9.0\n      #   with:\n      #     ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}\n\n      # - name: Add VPS to known_hosts\n      #   run: |\n      #     ssh-keyscan -H ${{ secrets.VPS_HOST }} >> ~/.ssh/known_hosts\n\n      # - name: Deploy to VPS\n      #   run: |\n      #     ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} \"cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d\"\n"
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n.yarn/install-state.gz\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n# contentlayer\n.contentlayer\n\npackage-lock.json\n.env"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"tabWidth\": 2,\n  \"semi\": true,\n  \"printWidth\": 80\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"cSpell.words\": [\"clsx\", \"rehype\", \"retroui\"],\n  \"tailwindCSS.experimental.classRegex\": [\n    [\"cva\\\\(([^)]*)\\\\)\", \"[\\\"'`]([^\\\"'`]*).*?[\\\"'`]\"],\n    [\"cx\\\\(([^)]*)\\\\)\", \"(?:'|\\\"|`)([^']*)(?:'|\\\"|`)\"]\n  ],\n  \"yaml.schemas\": {\n    \"https://json.schemastore.org/github-workflow.json\": \"file:///Users/arifhossain/Projects/ptm/retro-ui/.github/workflows/deploy.yml\"\n  },\n}\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing to RetroUI\n\nThank you for your interest in contributing to RetroUI 🙏. I hope this guide to help you get started.\n\n## Getting Started\n\n1. Fork this repository\n\n2. Clone the forked repository to your local machine.\n\n   ```bash\n   git clone https://github.com/<YOUR_USERNAME>/retroui.git\n   ```\n\n3. Navigate to the project directory\n\n   ```bash\n   cd retroui\n   ```\n\n4. Create a new branch\n\n   ```bash\n   git switch -c new-branch-name\n   ```\n\n5. install dependencies\n\n   ```bash\n   pnpm i\n   ```\n\n6. Run the project\n   ```bash\n   pnpm dev\n   ```\n\n## Adding a New Component\n\n1. Create the main component in `/components/retroui/NewComponent/NewComponent.tsx`\n\n```ts\nexport function NewComponent() {\n  return <div>This is your component.</div>;\n}\n```\n\n2. Export your component in `/components/retroui/NewComponent/index.ts` and `/components/retroui/index.ts`\n\n```ts\nexport * from \"./NewComponent\";\n```\n\n3. Create a preview to showcase your component in `preview/components/new-component.tsx`\n\n```typescript\nexport default function NewComponentStyle() {\n  return (\n    <span className=\"px-2.5 py-1 text-sm font-semibold border-2 border-red-600 text-red-600\">\n      Error\n    </span>\n  );\n}\n```\n\n4. Add your component preview to the list of components registry in `config/components.ts`\n\n```typescript\nexport const componentConfig = {\n  registry: {\n    ...\n    \"new-component\": {\n      name: \"new-component\",\n      filePath: \"preview/components/new-component.tsx\",\n      preview: lazy(() => import(\"@/preview/components/new-component\")),\n    },\n  },\n};\n```\n\n5. Add documentation for your component in `content/docs/components/...mdx`\n\n```md\n---\ntitle: Badge\ndescription: The component that looks like a button but isn't clickable!\nlastUpdated: 08 Oct, 2024\n---\n\n...\n\n### New Component\n\n<ComponentShowcase name=\"new-component\" /> // name of the component in the registry\n```\n\n## Ask for Help\n\nFor any help or questions, please open a new GitHub issue.\n"
  },
  {
    "path": "Dockerfile",
    "content": "FROM node:22.7.0-slim\n\nWORKDIR /retroui\n\nCOPY ./package.json ./pnpm-lock.yaml ./\nRUN npm i pnpm -g \\\n    && pnpm install --frozen-lockfile --no-cache \\\n    && pnpm store prune\n\nCOPY . .\nRUN pnpm run build\n\nEXPOSE 3000\nCMD [ \"pnpm\", \"run\", \"start\" ]"
  },
  {
    "path": "LICENCE.md",
    "content": "MIT License\n\nCopyright (c) 2024 Arif Hossain\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Retro UI\n\nRetroUI is a retro-styled Tailwind CSS component library for modern web apps.\n\n![RetroUI banner](./public/banner.png)\n\n### [Why Another UI Library?](https://www.youtube.com/watch?v=7goHwy6k3gU)\n\n### [Documentation](https://retroui.dev/docs)\n\n### [Contributing Guide](./CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENCE.md)\n\n<br />\n\n## Supported By\n\n<a href=\"https://vercel.com/oss\"><img alt=\"Vercel OSS Program\" src=\"https://vercel.com/oss/program-badge.svg\" /></a>\n"
  },
  {
    "path": "app/(docs)/docs/[[...slug]]/page.tsx",
    "content": "import React from \"react\";\nimport { allDocs } from \"contentlayer/generated\";\nimport { notFound } from \"next/navigation\";\nimport { format } from \"date-fns\";\nimport MDX from \"@/components/MDX\";\nimport { Text } from \"@/components/retroui/Text\";\nimport { Metadata } from \"next\";\nimport { MoveUpRightIcon } from \"lucide-react\";\nimport { generateToc } from \"@/lib/toc\";\nimport TableOfContents from \"@/components/TableOfContents\";\n\ninterface IProps {\n  params: { slug: string[] };\n}\n\nfunction getDocParams({ params }: IProps) {\n  const slug = `/docs${params.slug ? `/${params.slug.join(\"/\")}` : \"\"}`;\n  const doc = allDocs.find((doc) => doc.url === slug);\n\n  if (!doc) {\n    return null;\n  }\n\n  return doc;\n}\n\nexport async function generateMetadata({ params }: IProps): Promise<Metadata> {\n  const doc = getDocParams({ params });\n\n  if (!doc) {\n    return {\n      title: \"Not Found | Retro UI\",\n    };\n  }\n\n  return {\n    title: `${doc.title} | Retro UI`,\n    description: doc.description,\n  };\n}\n\nexport default async function page({ params }: IProps) {\n  const doc = getDocParams({ params });\n\n  if (!doc) {\n    return notFound();\n  }\n\n  const toc = await generateToc(doc.body.raw);\n  return (\n    <>\n      {/* Main Content */}\n      <div className=\"flex-1 space-y-12 py-12 px-4 max-w-2xl mx-auto w-full\">\n        <div className=\"border-b pb-6\">\n          <Text as=\"h1\" className=\"text-4xl\">\n            {doc.title}\n          </Text>\n          <p className=\"text-lg text-muted-foreground mt-2\">\n            {doc.description}\n          </p>\n          {doc.links && (\n            <div className=\"flex space-x-4 text-sm mt-4 text-black\">\n              {doc.links?.api_reference && (\n                <a\n                  className=\"flex items-center bg-gray-200 px-1.5 py-.5\"\n                  href={doc.links.api_reference}\n                  target=\"_blank\"\n                >\n                  API Reference <MoveUpRightIcon className=\"h-3 w-3 ml-1\" />\n                </a>\n              )}\n              {doc.links && doc.links?.source && (\n                <a\n                  className=\"flex items-center bg-gray-200 px-1.5 py-.5\"\n                  href={doc.links.source}\n                  target=\"_blank\"\n                >\n                  Source <MoveUpRightIcon className=\"h-3 w-3 ml-1\" />\n                </a>\n              )}\n            </div>\n          )}\n        </div>\n        <div>\n          <MDX code={doc.body.code} />\n        </div>\n        <p className=\"text-right\">\n          Last Updated: {format(doc.lastUpdated, \"dd MMM, yyy\")}\n        </p>\n      </div>\n\n      {/* Table of Contents */}\n      <div className=\"hidden lg:block lg:w-60 flex-shrink-0 sticky top-36 self-start space-y-6\">\n        <TableOfContents toc={toc} />\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "app/(docs)/docs/layout.tsx",
    "content": "import SideNav from \"@/components/SideNav\";\nimport { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  title: \"Getting Started | RetroUI\",\n};\n\nexport default function ComponentLayout({\n  children,\n}: Readonly<{\n  children: React.ReactNode;\n}>) {\n  return (\n    <div className=\"relative max-w-7xl mx-auto\">\n      <div className=\"max-lg:px-4\">\n        <div className=\"flex lg:gap-20 items-start\">\n          {/* Sidebar */}\n          <div className=\"hidden lg:block w-60 flex-shrink-0 sticky top-28 self-start\">\n            <SideNav />\n          </div>\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "app/(marketing)/blogs/[slug]/page.tsx",
    "content": "import React from \"react\";\nimport { notFound } from \"next/navigation\";\nimport { format } from \"date-fns\";\nimport { Avatar, Badge, Button, Text } from \"@/components/retroui\";\nimport { Metadata } from \"next\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { RichText } from \"@payloadcms/richtext-lexical/react\";\nimport { JSXConverters } from \"@/components/RichTextConverter\";\n\ninterface IProps {\n  params: { slug: string[] };\n}\n\ntype Post = {\n  id: number,\n  title: string,\n  slug: string,\n  publishedAt: string,\n  content: any,\n  excerpt: string,\n  tags: {\n    name: string,\n    slug: string\n  }[],\n  featuredImage: {\n    url: string,\n    alt: string\n  },\n}\n\nasync function getBlogParams({ params }: IProps) {\n  const res = await fetch(`https://cms.retroui.dev/api/posts/slug/${params.slug}`, {\n    method: 'GET',\n    credentials: 'include',\n    next: {\n      revalidate: 60,\n    },\n  })\n  const post = await res.json()\n  return post;\n}\n\nexport async function generateMetadata({ params }: IProps): Promise<Metadata> {\n  const blog: Post = await getBlogParams({ params });\n\n  if (!blog) {\n    return {\n      title: \"Not Found | Retro UI\",\n    };\n  }\n\n  return {\n    title: `${blog.title} | RetroUI Blogs`,\n    description: blog.excerpt,\n    alternates: {\n      canonical: `https://www.retroui.dev/blogs/${blog.slug}`,\n    },\n    openGraph: {\n      type: \"article\",\n      images: blog.featuredImage.url,\n      title: `${blog.title} | RetroUI Blogs`,\n      publishedTime: blog.publishedAt,\n      authors: [\"Arif Hossain\"],\n    },\n  };\n}\n\nexport default async function page({ params }: IProps) {\n  const blog: Post | null = await getBlogParams({ params });\n\n  if (!blog) {\n    return notFound();\n  }\n\n  return (\n    <article className=\"max-w-3xl mt-8 mx-auto\">\n      <div className=\"border-b border-black pb-6 mb-6\">\n        <div className=\"flex items-center gap-4 mb-6\">\n          <Text className=\"text-muted-foreground text-sm font-medium\">\n            {format(new Date(blog.publishedAt), \"dd, MMMM yyyy\")}\n          </Text>\n          <Text>|</Text>\n          <div className=\"flex items-center gap-3\">\n            {blog.tags.map((tag) => (\n              <Badge\n                key={tag.slug}\n                size=\"sm\"\n                variant=\"surface\"\n                className={`bg-${[\"red\", \"green\", \"blue\", \"yellow\", \"purple\", \"pink\"][\n                  blog.tags.indexOf(tag) % 6\n                ]\n                  }-300`}\n              >\n                {tag.name}\n              </Badge>\n            ))}\n          </div>\n        </div>\n\n        <Text as=\"h1\" className=\"mb-2\">\n          {blog.title}\n        </Text>\n        <Text className=\"text-muted-foreground mb-12\">\n          {blog.excerpt}\n        </Text>\n        <Image\n          src={`https://cms.retroui.dev${blog.featuredImage.url}`}\n          alt={blog.featuredImage.alt}\n          width={1200}\n          height={800}\n          className=\"mb-8\"\n        />\n        <div className=\"flex justify-between items-start\">\n          <div className=\"flex gap-4\">\n            <Avatar>\n              <Avatar.Image src=\"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/arif.jpg\" alt=\"Arif Hossain\" />\n              <Avatar.Fallback>AH</Avatar.Fallback>\n            </Avatar>\n            <div>\n              <Text as=\"h5\">Arif Hossain</Text>\n              <Link\n                href={`https://x.com/@ariflogs`}\n                target=\"_blank\"\n                className=\"text-muted-foreground\"\n              >\n                @ariflogs\n              </Link>\n            </div>\n          </div>\n\n          <Link\n            target=\"_blank\"\n            href={`https://x.com/share?url=${`https://www.retroui.dev/blogs/${blog.slug}`}&text=${blog.title}.%0ACheck it out 👉`}\n          >\n            <Button size=\"sm\" variant=\"outline\">\n              Share on X\n            </Button>\n          </Link>\n        </div>\n      </div>\n      <RichText\n        data={blog.content}\n        converters={JSXConverters}\n      />\n\n      <hr className=\"my-12\" />\n\n      <Button asChild aria-label=\"Return to all blog posts\" variant=\"secondary\">\n        <Link href=\"/blogs\" className=\"inline-flex\">← Back to blogs</Link>\n      </Button>\n    </article>\n  );\n}\n"
  },
  {
    "path": "app/(marketing)/blogs/layout.tsx",
    "content": "import { Metadata } from \"next\";\nimport Footer from \"@/components/footer\";\nexport const metadata: Metadata = {\n  title: \"RetroUI Blogs\",\n};\n\nexport default function BlogsLayout({\n  children,\n}: Readonly<{\n  children: React.ReactNode;\n}>) {\n  return (\n    <>\n      <div className=\"max-w-6xl mx-auto py-12 px-4 lg:px-0\">{children}</div>\n      <Footer />\n    </>\n  );\n}\n"
  },
  {
    "path": "app/(marketing)/blogs/page.tsx",
    "content": "import { allBlogs } from \"@/.contentlayer/generated\";\nimport { Avatar, Card, Text } from \"@/components/retroui\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport React from \"react\";\nimport { format } from \"date-fns\";\nimport { sdk } from \"@/lib/payload\"\n\ntype Post = {\n  id: number,\n  title: string,\n  slug: string,\n  publishedAt: string,\n  excerpt: string,\n  featuredImage: {\n    url: string,\n    alt: string\n  },\n}\n\nasync function page() {\n  const res = await fetch(\"https://cms.retroui.dev/api/posts/published\", {\n    method: 'GET',\n    credentials: 'include',\n    next: {\n      revalidate: 60,\n    },\n  })\n  const posts = await res.json()\n\n  return (\n    <div>\n      <Text as=\"h1\" className=\"mb-12\">\n        All RetroUI Blogs\n      </Text>\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8\">\n        {posts.docs.map((blog: Post) => (\n          <Link href={`/blogs/${blog.slug}`} key={blog.id}>\n            <Card className=\"shadow-none hover:-translate-x-2 hover:-translate-y-2 hover:shadow-lg\">\n              <Card.Header>\n                <Image\n                  src={`https://cms.retroui.dev${blog.featuredImage?.url}`}\n                  alt={blog.title}\n                  width={600}\n                  height={400}\n                  className=\"mb-6 h-50\"\n                />\n                <Text as=\"p\" className=\"mb-2 text-sm text-muted-foreground\">\n                  {format(new Date(blog.publishedAt), \"dd, MMMM yyyy\")}\n                </Text>\n                <Card.Title className=\"line-clamp-2 text-2xl\">{blog.title}</Card.Title>\n\n                <Card.Description className=\"line-clamp-2 text-sm\">{blog.excerpt}</Card.Description>\n              </Card.Header>\n              {/* <Card.Content className=\"pt-0\">\n\n                <div className=\"flex gap-2 items-center\">\n                  <Avatar className=\"h-8 w-8 border\">\n                    <Avatar.Image src=\"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/arif.jpg\" alt=\"Arif Hossain\" />\n                    <Avatar.Fallback>AH</Avatar.Fallback>\n                  </Avatar>\n                  <Text className=\"text-sm\">Arif Hossain</Text>\n                </div>\n              </Card.Content> */}\n            </Card>\n          </Link>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default page;\n\n\n"
  },
  {
    "path": "app/(marketing)/page.tsx",
    "content": "\"use server\";\n\nimport {\n  Button,\n  Text,\n  Input,\n  Textarea,\n  Card,\n  Avatar,\n  Badge,\n  CommandDisplay,\n} from \"@/components/retroui\";\nimport AccordionStyleDefault from \"@/preview/components/accordion-style-default\";\nimport AlertStyleDefaultIcon from \"@/preview/components/alert-style-with-icon\";\nimport AvatarStyleCircle from \"@/preview/components/avatar-style-circle-sizes\";\nimport BadgeStyleVariants from \"@/preview/components/badge-style-variants\";\nimport {\n  ArrowRightIcon,\n  ChartArea,\n  GithubIcon,\n  MessageCircle,\n  PaintbrushIcon,\n} from \"lucide-react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport Footer from \"@/components/footer\";\nimport WorksWithSection from \"@/components/WorksWithSection\";\n\nasync function getContributors(): Promise<\n  { avatar: string; username: string; url: string }[]\n> {\n  const request = await fetch(\n    `https://api.github.com/repos/logging-studio/RetroUI/contributors`,\n    {\n      method: \"GET\",\n      headers: {\n        \"Content-Type\": \"application/json\",\n      },\n    },\n  );\n\n  const contributorsList = await request.json();\n  return contributorsList.map(\n    (c: { avatar_url: string; login: string; html_url: string }) => ({\n      avatar: c.avatar_url,\n      username: c.login,\n      url: c.html_url,\n    }),\n  );\n}\n\nexport default async function Home() {\n  const contributors = await getContributors();\n\n  return (\n    <main>\n      <div className=\"bg-image bg-cover bg-no-repeat bg-center flex flex-col items-center min-h-screen\">\n        <section className=\"container max-w-6xl mx-auto px-4 lg:px-0 text-gray-900 flex justify-center items-center lg:gap-28 my-28\">\n          <div className=\"text-center lg:text-left w-full lg:w-2/3\">\n            <Link href=\"https://neo.retroui.dev\" target=\"_blank\" className=\"mb-4 inline-block\">\n              <Badge>\n                Introducing Neo/SS\n                <PaintbrushIcon className=\"ml-2 h-4 w-4 inline-block\" />\n              </Badge>\n            </Link>\n\n            <Text as=\"h1\" className=\"text-5xl text-foreground lg:text-6xl mt-8\">\n              Make your projects\n              <br />\n              <span className=\"text-outlined\">stand out!</span>\n            </Text>\n\n            <p className=\"text-lg text-muted-foreground mb-8 mt-4\">\n              A NeoBrutalism styled React + TailwindCSS UI library for building bold, modern web apps.\n              Perfect for any project using Shadcn/ui.\n            </p>\n\n            <div className=\"flex flex-col md:flex-row items-center gap-4\">\n              <Link href=\"/docs\" passHref>\n                <Button\n                  className=\"w-full\"\n                  aria-label=\"Get Started with RetroUI\"\n                >\n                  Get Started\n                </Button>\n              </Link>\n              <div className=\"w-full max-w-72 shadow shadow-primary\">\n                <CommandDisplay command='npx shadcn add @retroui/button' />\n              </div>\n            </div>\n          </div>\n          <div className=\"hidden lg:block lg:w-1/3\">\n            <Image\n              alt=\"retro tv radio\"\n              src=\"/images/tv_radio.png\"\n              layout=\"responsive\"\n              width={500}\n              height={500}\n              className=\"h-full w-full\"\n            />\n          </div>\n        </section>\n        <section className=\"container max-w-6xl mx-auto px-4 lg:px-0 lg:my-36\">\n          {/* <Text as=\"h2\" className=\"mb-16 text-center\">\n              Old school with modern twist! ✨\n            </Text> */}\n          <div className=\"grid gap-6 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 mb-8\">\n            <Card className=\"w-full bg-background shadow-none\">\n              <Card.Header>\n                <Card.Title>Button</Card.Title>\n              </Card.Header>\n              <Card.Content>\n                <div className=\"flex flex-wrap gap-4\">\n                  <Button>Primary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                </div>\n              </Card.Content>\n            </Card>\n            <Card className=\"w-full bg-background shadow-none\">\n              <Card.Header>\n                <Card.Title>Badge</Card.Title>\n              </Card.Header>\n              <Card.Content>\n                <BadgeStyleVariants />\n              </Card.Content>\n            </Card>\n            <Card className=\"w-full bg-background shadow-none\">\n              <Card.Header>\n                <Card.Title>Avatar</Card.Title>\n              </Card.Header>\n              <Card.Content>\n                <AvatarStyleCircle />\n              </Card.Content>\n            </Card>\n            <Card className=\"w-full bg-background shadow-none\">\n              <Card.Header>\n                <Card.Title>Accordion</Card.Title>\n              </Card.Header>\n              <Card.Content>\n                <AccordionStyleDefault />\n              </Card.Content>\n            </Card>\n            <Card className=\"w-full bg-background shadow-none\">\n              <Card.Header>\n                <Card.Title>Input & Textarea</Card.Title>\n              </Card.Header>\n              <Card.Content>\n                <Input />\n                <div className=\"h-4\"></div>\n                <Textarea className=\"border-foreground\" />\n              </Card.Content>\n            </Card>\n\n            <Card className=\"w-full bg-background shadow-none\">\n              <Card.Header>\n                <Card.Title>Alert</Card.Title>\n              </Card.Header>\n              <Card.Content>\n                <AlertStyleDefaultIcon />\n              </Card.Content>\n            </Card>\n          </div>\n        </section>\n      </div>\n\n      <section className=\"container max-w-6xl mx-auto px-4 lg:px-0 flex flex-col lg:flex-row gap-12 lg:gap-16 lg:grid-cols-2 my-36\">\n        <div className=\"w-full lg:w-3/5\">\n          <Text as=\"h2\">\n            Easily <span className=\"text-outlined\">Customize</span> to Your Own\n            Needs! 🛠️\n          </Text>\n          <div className=\"flex flex-col space-y-1 mt-6 mb-8 text-muted-foreground\">\n            <Text className=\"text-lg\">\n              Copy-Paste Ready: Components that you can just copy paste.\n            </Text>\n            <Text className=\"text-lg\">\n              Tailwind Based: Customizable with Tailwind CSS.\n            </Text>\n            <Text className=\"text-lg\">\n              Type Safe: Typescript support for all components.\n            </Text>\n          </div>\n          <Link href=\"/docs/components/button\" passHref>\n            <Button>See Examples</Button>\n          </Link>\n        </div>\n        <div className=\"w-full lg:w-2/5\">\n          <Image\n            src=\"/images/code_show.svg\"\n            width={600}\n            height={400}\n            alt=\"retroui code showcase\"\n          />\n        </div>\n      </section>\n\n      <section className=\"container max-w-6xl max-lg:px-4 mx-auto bg-[url('/images/starts_bg.svg')] bg-cover bg-no-repeat py-12\">\n        <Text as=\"h2\" className=\"text-center mb-28 max-w-2xl mx-auto\">\n          A <span className=\"text-outlined\">Growing</span> Community of Developers and Designers.\n        </Text>\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-12 max-w-3xl mx-auto\">\n          <div className=\"flex flex-col items-start relative mx-auto\">\n            <Text as=\"h3\" className=\"mb-2 font-sans\">\n              Github Stars\n            </Text>\n            <Text className=\"text-outlined text-7xl lg:text-8xl font-head\">\n              1,200+\n            </Text>\n            <Image\n              src=\"/images/shooting_star.svg\"\n              width={120}\n              height={120}\n              alt=\"shotting stars\"\n              className=\"absolute -top-[80px] -left-[80px]\"\n            />\n          </div>\n          <div className=\"flex flex-col items-start relative mx-auto\">\n            <Text as=\"h3\" className=\"mb-2 font-sans\">\n              Discord Members\n            </Text>\n            <Text className=\"text-outlined text-7xl lg:text-8xl font-head\">\n              100+\n            </Text>\n            <Image\n              src=\"/images/shooting_star.svg\"\n              width={120}\n              height={120}\n              alt=\"shotting stars\"\n              className=\"absolute -right-[80px] -bottom-[80px] rotate-180\"\n            />\n          </div>\n        </div>\n      </section>\n\n      <WorksWithSection />\n\n      <section className=\"container max-w-6xl mx-auto border-2 bg-primary border-black py-16 px-4 lg:p-16 my-36\">\n        <Text as=\"h2\" className=\"text-center text-black mb-2\">\n          Community Contributors\n        </Text>\n        <Text className=\"text-xl text-center text-black mb-8\">\n          RetroUI core is free and open-source, and it is made possible by our\n          awesome contributors.\n        </Text>\n        <div className=\"max-w-2xl mx-auto flex flex-wrap justify-center gap-2 lg:gap-4\">\n          {contributors.map((contributor) => (\n            <Link\n              key={contributor.username}\n              href={contributor.url}\n              target=\"_blank\"\n              passHref\n              className=\"flex flex-col items-center\"\n            >\n              <Avatar className=\"h-10 w-10 border-black lg:h-16 lg:w-16\">\n                <Avatar.Image\n                  src={contributor.avatar}\n                  alt={contributor.username}\n                />\n              </Avatar>\n            </Link>\n          ))}\n        </div>\n        <div className=\"flex flex-col lg:flex-row items-center justify-center gap-4 mt-12\">\n          <Link\n            href=\"https://github.com/logging-studio/retroui\"\n            target=\"_blank\"\n            passHref\n          >\n            <Button\n              className=\"bg-background\"\n              variant=\"outline\"\n            >\n              <GithubIcon size=\"16\" className=\"mr-2\" />\n              Star on Github\n            </Button>\n          </Link>\n          <Link href=\"https://discord.gg/Jum3NJxK6Q\" target=\"_blank\" passHref>\n            <Button\n              className=\"bg-background\"\n              variant=\"outline\"\n            >\n              <MessageCircle size=\"16\" className=\"mr-2\" />\n              Join Community\n            </Button>\n          </Link>\n        </div>\n      </section>\n\n      <section className=\"mx-auto px-4\">\n        <div className=\"container max-w-6xl h-full mx-auto py-16 flex flex-col justify-between gap-20\">\n          <div className=\"flex flex-col md:flex-row items-center gap-10\">\n            <div className=\"w-full md:w-3/5\">\n              <Text as=\"h1\" className=\"text-4xl lg:text-5xl\">\n                Ship <span className=\"text-outlined\">Faster</span> With Blocks\n                <br />\n                and Templates 🚀\n              </Text>\n              <Text\n                as=\"p\"\n                className=\"text-muted-foreground font-medium text-xl mt-2 mb-8\"\n              >\n                Get access to 100+ premium blocks, templates and figma kit,\n                ready to make your project stand out.\n              </Text>\n\n              <Link href=\"https://pro.retroui.dev/blocks\" target=\"_blank\">\n                <Button>Explore RetroUI Pro</Button>\n              </Link>\n            </div>\n\n            <div className=\"w-full md:w-2/5\">\n              <Image\n                src=\"/images/pro_showcase.svg\"\n                width={1920}\n                height={1080}\n                alt=\"retroui pro ui blocks showcase\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <Footer />\n    </main>\n  );\n}\n"
  },
  {
    "path": "app/(marketing)/showcase/page.tsx",
    "content": "import showcaseData from \"@/showcase.json\";\nimport { Card, Text, Button } from \"@/components/retroui\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport Footer from \"@/components/footer\";\n\nexport default function ShowcasePage() {\n    return (\n        <>\n            <div className=\"max-w-6xl mx-auto py-12 px-4 lg:px-0\">\n                <div className=\"mb-12 flex flex-col gap-2 items-start\">\n                    <Text as=\"h1\">\n                        Showcase\n                    </Text>\n                    <Text className=\"text-lg text-muted-foreground mb-4\">\n                        Build something cool using RetroUI? Share it with the community.\n                    </Text>\n                    <Button asChild>\n                        <Link href=\"https://github.com/Logging-Studio/RetroUI/discussions/102\" target=\"_blank\">\n                            Add Your Project\n                        </Link>\n                    </Button>\n                </div>\n\n                <ul className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n                    {Object.entries(showcaseData).map(([key, value]) => (\n                        <li key={key}>\n                            <Card className=\"hover:shadow\">\n                                <Card.Header>\n                                    <Image\n                                        src={value.cover}\n                                        alt={value.name}\n                                        width={600}\n                                        height={400}\n                                        className=\"mb-6 border-2 h-[200px] w-full object-fit border-muted-foreground\"\n                                    />\n                                    <div className=\"flex items-center justify-between gap-2\">\n                                        <Card.Title>{value.name}</Card.Title>\n\n                                        <Button asChild size=\"sm\" variant=\"secondary\">\n                                            <Link href={value.url} target=\"_blank\" rel=\"noopener noreferrer\">\n                                                Visit <ArrowUpRight className=\"ml-2 h-4 w-4\" />\n                                            </Link>\n                                        </Button>\n                                    </div>\n                                </Card.Header>\n                            </Card>\n                        </li>\n                    ))}\n                </ul>\n            </div>\n\n            <Footer />\n        </>\n    );\n}"
  },
  {
    "path": "app/(marketing)/themes/page.tsx",
    "content": "\"use client\";\n\nimport {\n    Card,\n    Select,\n    Text,\n} from \"@/components/retroui\";\nimport ChartStyleMultiple from \"@/preview/charts/area-chart-style-multiple\";\nimport CourseCard from \"@/preview/blocks/course-card\";\nimport SignInBlock from \"@/preview/blocks/sign-in\";\nimport BarChartStyleMultiple from \"@/preview/charts/bar-chart-style-multiple\";\nimport TeamMembersBlock from \"@/preview/blocks/team-members\";\nimport CopyTheme from \"@/components/CopyTheme\";\nimport { Theme } from \"@/config/theme\";\nimport { useTheme } from \"@/contexts/ThemeContext\";\n\nconst themes: {value: Theme, label: string}[] = [\n    {\n        value: Theme.Default,\n        label: \"Default\",\n    },\n    {\n        value: Theme.Purple,\n        label: \"Purple\",\n    },\n    {\n        value: Theme.Lime,\n        label: \"Lime\",\n    },\n    {\n        value: Theme.Red,\n        label: \"Red\",\n    },\n    {\n        value: Theme.Lavender,\n        label: \"Lavender\",\n    },\n    {\n        value: Theme.Orange,\n        label: \"Orange\",\n    },\n    {\n        value: Theme.Green,\n        label: \"Green\",\n    },\n];\n\nconst variants = [\n    {\n        value: \"box\",\n        label: \"Box\",\n    },\n    {\n        value: \"with-radius\",\n        label: \"Rounded\",\n    },\n];\n\nexport default function Themes() {\n    const { colorTheme, variant, setColorTheme, setVariant } = useTheme();\n\n    return (\n            <section className={`theme-${colorTheme} ${variant} container max-w-8xl mx-auto py-12`}>\n                <Text as=\"h1\" className=\"font-normal mb-12\">Don&apos;t like <span className=\"text-primary\">{colorTheme === Theme.Default ? \"Yellow\" : colorTheme.slice(0, 1).toUpperCase() + colorTheme.slice(1)}?</span><br />Well, we have more! 🫡</Text>\n\n                <div className=\"flex flex-col lg:flex-row gap-6 items-center justify-between mb-6\">\n                    <div className=\"flex gap-6\">\n                        <Select value={colorTheme} onValueChange={(value: Theme) => setColorTheme(value)}>\n                            <Select.Trigger>\n                                <Select.Value placeholder=\"Select Color\" />\n                            </Select.Trigger>\n                            <Select.Content>\n                                <Select.Group>\n                                    {\n                                        themes.map((theme) => (\n                                            <Select.Item key={theme.value} value={theme.value}>\n                                                {theme.label}\n                                            </Select.Item>\n                                        ))\n                                    }\n                                </Select.Group>\n                            </Select.Content>\n                        </Select>\n\n                        <Select value={variant} onValueChange={(value) => setVariant(value)}>\n                            <Select.Trigger>\n                                <Select.Value placeholder=\"Select Variant\" />\n                            </Select.Trigger>\n                            <Select.Content>\n                                <Select.Group>\n                                    {\n                                        variants.map((variant) => (\n                                            <Select.Item key={variant.value} value={variant.value}>\n                                                {variant.label}\n                                            </Select.Item>\n                                        ))\n                                    }\n                                </Select.Group>\n                            </Select.Content>\n                        </Select>\n                    </div>\n\n                    <CopyTheme theme={colorTheme} hasRadius={variant === \"with-radius\"} />\n                </div>\n\n                <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full gap-6\">\n                    <div className=\"flex flex-col gap-6\">\n                        <Card className=\"w-full border-muted bg-background shadow-none\">\n                            <Card.Content>\n                                <CourseCard />\n                            </Card.Content>\n                        </Card>\n\n                        <Card className=\"w-full border-muted bg-background shadow-none\">\n                            <Card.Content>\n                                <TeamMembersBlock />\n                            </Card.Content>\n                        </Card>\n                    </div>\n\n\n                    <div className=\"flex flex-col gap-6\">\n                        <Card className=\"w-full border-muted bg-background shadow-none\">\n                            <Card.Content>\n                                <ChartStyleMultiple />\n                            </Card.Content>\n                        </Card>\n                        <Card className=\"w-full border-muted bg-background shadow-none\">\n                            <Card.Content>\n                                <BarChartStyleMultiple />\n                            </Card.Content>\n                        </Card>\n                    </div>\n\n\n                    <Card className=\"w-full border-muted bg-background shadow-none\">\n                        <Card.Content>\n                            <SignInBlock />\n                        </Card.Content>\n                    </Card>\n                </div>\n            </section>\n    );\n}\n"
  },
  {
    "path": "app/(sink)/demo/components/page.tsx",
    "content": "\"use client\";\n\nimport React from \"react\";\nimport { TableOfContents } from \"@/components/retroui/TableOfContents\";\n\nexport default function page() {\n  return (\n    <div className=\"container max-w-6xl mx-auto space-y-6 flex\">\n\n      <div className=\"flex-1\">\n        <h1>Table of Contents</h1>\n        <h1>Table of Contents 1</h1>\n        <div className=\"h-80\"></div>\n        <h2>Table of Contents 2</h2>\n        <div className=\"h-80\"></div>\n\n        <h3>Table of Contents 3</h3>\n        <h3>Table of Contents 3</h3>\n        <h3>Table of Contents 3</h3>\n        <div className=\"h-80\"></div>\n        <h4>Table of Contents 4</h4>\n        <h4>Table of Contents 4</h4>\n        <h4>Table of Contents 4</h4>\n        <div className=\"h-80\"></div>\n\n        <h5>Table of Contents 5</h5>\n        <h6>Table of Contents 6</h6>\n      </div>\n      <TableOfContents />\n    </div>\n  );\n}\n"
  },
  {
    "path": "app/actions/newsletter.ts",
    "content": "\"use server\";\n\nimport { Resend } from \"resend\";\n\nconst resend = new Resend(process.env.RESEND_API_KEY);\n\nexport async function subscribeToNewsletter(email: string) {\n  try {\n    const { data, error } = await resend.contacts.create({\n      email,\n      audienceId: process.env.RESEND_AUDIENCE_ID!,\n    });\n\n    if (error) {\n      return { success: false, error: error.message };\n    }\n\n    return { success: true, data };\n  } catch (error) {\n    return {\n      success: false,\n      error: error instanceof Error ? error.message : \"Failed to subscribe\",\n    };\n  }\n}\n"
  },
  {
    "path": "app/global.css",
    "content": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@theme inline {\n  --font-head: var(--font-head);\n  --font-sans: var(--font-sans);\n  --radius: var(--radius);\n  --shadow-xs: 1px 1px 0 0 var(--border);\n  --shadow-sm: 2px 2px 0 0 var(--border);\n  --shadow: 3px 3px 0 0 var(--border);\n  --shadow-md: 4px 4px 0 0 var(--border);\n  --shadow-lg: 6px 6px 0 0 var(--border);\n  --shadow-xl: 10px 10px 0 1px var(--border);\n  --shadow-2xl: 16px 16px 0 1px var(--border);\n\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-primary-hover: var(--primary-hover);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --background-image: var(--background-image);\n  --chart-1: var(--chart-1);\n  --chart-2: var(--chart-2);\n  --chart-3: var(--chart-3);\n  --chart-4: var(--chart-4);\n  --chart-5: var(--chart-5);\n}\n\n:root {\n  --radius: 0;\n  --background: #fff;\n  --foreground: #000;\n  --card: #fff;\n  --card-foreground: #000;\n  --primary: #ffdb33;\n  --primary-hover: #ffcc00;\n  --primary-foreground: #000;\n  --secondary: #000;\n  --secondary-foreground: #fff;\n  --muted: #d5d5d5;\n  --muted-foreground: #5a5a5a;\n  --accent: #fae583;\n  --accent-foreground: #000;\n  --destructive: #e63946;\n  --destructive-foreground: #fff;\n  --border: #000;\n  --background-image: url(\"/images/banner_void_2.svg\");\n  --chart-1: #c4a1ff;\n  --chart-2: #01ffcc;\n  --chart-3: #e7f192;\n  --chart-4: #000;\n  --chart-5: #ff30cd;\n}\n\n.dark {\n  --background: #1a1a1a;\n  --foreground: #f5f5f5;\n  --card: #242424;\n  --card-foreground: #f5f5f5;\n  --primary: #ffdb33;\n  --primary-hover: #ffcc00;\n  --primary-foreground: #000;\n  --secondary: #3a3a3a;\n  --secondary-foreground: #f5f5f5;\n  --muted: #3f3f46;\n  --muted-foreground: #a0a0a0;\n  --accent: #fae583;\n  --accent-foreground: #000;\n  --destructive: #e63946;\n  --destructive-foreground: #fff;\n  --border: #5c5c5c;\n  --background-image: url(\"/images/bg_void_3.svg\");\n  --chart-1: #ffdb33;\n  --chart-2: #000;\n  --chart-3: #aeaeae;\n  --chart-4: #fae583;\n  --chart-5: #e63946;\n}\n\n.with-radius {\n  --radius: 0.5rem;\n}\n\n.theme-purple {\n  --background: #f5f5f5;\n  --foreground: #1a1a1a;\n  --card: #FFFFFF;\n  --card-foreground: #f5f5f5;\n  --primary: #5F4FE6;\n  --primary-hover: #4938C2;\n  --primary-foreground: #fff;\n  --secondary: #3a3a3a;\n  --secondary-foreground: #f5f5f5;\n  --muted: #CFCCEA;\n  --muted-foreground: #5B5686;\n  --accent: #FED13B;\n  --accent-foreground: #000000;\n  --destructive: #EF4444;\n  --destructive-foreground: #fff;\n  --border: #3a3a3a;\n  --background-image: url(\"/images/bg_void_3.svg\");\n  --chart-1: #ffdb33;\n  --chart-2: #000;\n  --chart-3: #aeaeae;\n  --chart-4: #fae583;\n  --chart-5: #e63946;\n}\n\n.dark .theme-purple {\n  --background: #0f0f12;\n  --foreground: #f5f5f5;\n  --card: #1a1a1d;\n  --card-foreground: #eaeaea;\n  --primary: #7b6df5;\n  --primary-hover: #5F4FE6;\n  --primary-foreground: #fff;\n  --secondary: #2a2a2e;\n  --secondary-foreground: #eaeaea;\n  --muted: #3d395a;\n  --muted-foreground: #a49fce;\n  --accent: #FED13B;\n  --accent-foreground: #000;\n  --destructive: #EF4444;\n  --destructive-foreground: #fff;\n  --border: #2e2e32;\n}\n\n.theme-lime {\n  --background: #FFFFFF;\n  --foreground: #000000;\n  --card: #FFFFFF;\n  --card-foreground: #000000;\n  --input: #FFFFFF;\n  --border: #000000;\n  --ring: #AAFC3D;\n  --primary: #AAFC3D;\n  --primary-hover: #97f819;\n  --primary-foreground: #000000;\n  --secondary: #000000;\n  --secondary-foreground: #FFFFFF;\n  --muted: #F3F3F3;\n  --muted-foreground: #444444;\n  --accent: #FF4FD8;\n  --accent-foreground: #000000;\n  --destructive: #FF0033;\n  --destructive-foreground: #FFFFFF;\n}\n\n\n.dark .theme-lime {\n  --background: #0f0f0f;\n  --foreground: #f5f5f5;\n  --card: #1a1a1a;\n  --card-foreground: #FFFFFF;\n  --input: #2a2a2a;\n  --border: #333333;\n  --ring: #AAFC3D;\n  --primary: #AAFC3D;\n  --primary-hover: #97f819;\n  --primary-foreground: #000000;\n  --secondary: #FFFFFF;\n  --secondary-foreground: #000000;\n  --muted: #2a2a2a;\n  --muted-foreground: #aaaaaa;\n  --accent: #FF4FD8;\n  --accent-foreground: #000000;\n  --destructive: #FF0033;\n  --destructive-foreground: #FFFFFF;\n}\n\n.theme-red {\n  --background: #FCFFE7;\n  --foreground: #000000;\n  --muted: #EFD0D5;\n  --muted-foreground: #A42439;\n  --card: #FFFFFF;\n  --card-foreground: #000000;\n  --popover: #FFFFFF;\n  --popover-foreground: #000000;\n  --border: #000000;\n  --input: #FFFFFF;\n  --primary: #EA435F;\n  --primary-hover: #D00000;\n  --primary-foreground: #FFFFFF;\n  --secondary: #FFDA5C;\n  --secondary-foreground: #000000;\n  --accent: #CEEBFC;\n  --accent-foreground: #000000;\n  --destructive: #D00000;\n  --destructive-foreground: #FFFFFF;\n  --ring: #000000;\n}\n\n.dark .theme-red {\n  --background: #0f0f0f;\n  --foreground: #f5f5f5;\n  --muted: #3a1f24;\n  --muted-foreground: #f2a7b2;\n  --card: #1a1a1a;\n  --card-foreground: #ffffff;\n  --popover: #1a1a1a;\n  --popover-foreground: #ffffff;\n  --border: #2a2a2a;\n  --input: #2a2a2a;\n  --primary: #EA435F;\n  --primary-hover: #D00000;\n  --primary-foreground: #ffffff;\n  --secondary: #FFDA5C;\n  --secondary-foreground: #000000;\n  --accent: #2a3b45;\n  --accent-foreground: #CEEBFC;\n  --destructive: #D00000;\n  --destructive-foreground: #ffffff;\n  --ring: #EA435F;\n}\n\n.theme-lavender {\n  --background: #F9F5F2;\n  --foreground: #000000;\n  --muted: #EDE3FF;\n  --muted-foreground: #5B3B98;\n  --card: #FFFFFF;\n  --card-foreground: #000000;\n  --popover: #FFFFFF;\n  --popover-foreground: #000000;\n  --border: #000000;\n  --input: #FFFFFF;\n  --primary: #C4A1FF;\n  --primary-hover: #9678FF;\n  --primary-foreground: #000000;\n  --secondary: #E7F193;\n  --secondary-foreground: #000000;\n  --accent: #FE91E9;\n  --accent-foreground: #000000;\n  --destructive: #FE3B3B;\n  --destructive-foreground: #FFFFFF;\n  --ring: #000000;\n}\n\n.dark .theme-lavender {\n  --background: #121014;\n  --foreground: #f5f5f5;\n  --muted: #2d2440;\n  --muted-foreground: #c7b6f3;\n  --card: #1a1820;\n  --card-foreground: #ffffff;\n  --popover: #1a1820;\n  --popover-foreground: #ffffff;\n  --border: #2a2a2e;\n  --input: #2a2a2e;\n  --primary: #C4A1FF;\n  --primary-hover: #9678FF;\n  --primary-foreground: #000000;\n  --secondary: #E7F193;\n  --secondary-foreground: #000000;\n  --accent: #FE91E9;\n  --accent-foreground: #000000;\n  --destructive: #FE3B3B;\n  --destructive-foreground: #ffffff;\n  --ring: #C4A1FF;\n}\n\n.theme-orange {\n  --background: #FFFFFF;\n  --foreground: #000000;\n  --muted: #FFE1C7;\n  --muted-foreground: #8C3D00;\n  --card: #FFFFFF;\n  --card-foreground: #000000;\n  --popover: #FFFFFF;\n  --popover-foreground: #000000;\n  --border: #000000;\n  --input: #FFFFFF;\n  --primary: #F07200;\n  --primary-hover: #ff8011;\n  --primary-foreground: #FDEAD9;\n  --secondary: #EF8C27;\n  --secondary-foreground: #000000;\n  --accent: #FF6B6B;\n  --accent-foreground: #000000;\n  --destructive: #FE3B3B;\n  --destructive-foreground: #FFFFFF;\n  --ring: #000000;\n}\n\n.dark .theme-orange {\n  --background: #12100e;\n  --foreground: #f5f5f5;\n  --muted: #3a2617;\n  --muted-foreground: #ffb679;\n  --card: #1a1a1a;\n  --card-foreground: #ffffff;\n  --popover: #1a1a1a;\n  --popover-foreground: #ffffff;\n  --border: #2a2a2a;\n  --input: #2a2a2a;\n  --primary: #F07200;\n  --primary-hover: #ff8011;\n  --primary-foreground: #FDEAD9;\n  --secondary: #EF8C27;\n  --secondary-foreground: #000000;\n  --accent: #FF6B6B;\n  --accent-foreground: #000000;\n  --destructive: #FE3B3B;\n  --destructive-foreground: #ffffff;\n  --ring: #F07200;\n}\n\n.theme-green {\n  --background: #FFFFFF;\n  --foreground: #000000;\n  --muted: #CBE9D8;\n  --muted-foreground: #1F7751;\n  --card: #F9F5F2;\n  --card-foreground: #000000;\n  --popover: #FFFFFF;\n  --popover-foreground: #000000;\n  --border: #000000;\n  --input: #FFFFFF;\n  --primary: #599D77;\n  --primary-hover: #39654c;\n  --primary-foreground: #FFFFFF;\n  --secondary: #A3D9B1;\n  --secondary-foreground: #000000;\n  --accent: #FFE75A;\n  --accent-foreground: #000000;\n  --destructive: #F05D5D;\n  --destructive-foreground: #FFFFFF;\n  --ring: #000000;\n}\n\n.dark .theme-green {\n  --background: #0f1210;\n  --foreground: #f5f5f5;\n  --muted: #1f3a2d;\n  --muted-foreground: #9cd9b8;\n  --card: #181c19;\n  --card-foreground: #ffffff;\n  --popover: #181c19;\n  --popover-foreground: #ffffff;\n  --border: #2a2e2b;\n  --input: #2a2e2b;\n  --primary: #599D77;\n  --primary-hover: #39654c;\n  --primary-foreground: #ffffff;\n  --secondary: #3a6f52;\n  --secondary-foreground: #ffffff;\n  --accent: #FFE75A;\n  --accent-foreground: #000000;\n  --destructive: #F05D5D;\n  --destructive-foreground: #ffffff;\n  --ring: #599D77;\n}\n\nbody {\n  font-family: var(--font-sans);\n}\n\n\n/* Firefox scrollbar */\nhtml {\n  scrollbar-width: auto;\n  scrollbar-color: var(--muted) var(--foreground);\n}\n\n.bg-image {\n  background-image: var(--background-image);\n  background-size: cover;\n  background-position: center;\n}\n\n.text-outlined {\n  letter-spacing: 2px;\n  text-shadow:\n    0px 0px 0 var(--primary),\n    0px 0px 0 var(--primary),\n    4px 4px 0 var(--primary),\n    4px 4px 0 var(--primary);\n}\n\n/* Syntax Highlighting stuff */\n\npre code.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 1em;\n}\n\ncode.hljs {\n  padding: 3px 5px;\n}\n\n.hljs {\n  background: #222;\n  color: #aaa;\n}\n\n.hljs-subst {\n  color: #aaa;\n}\n\n.hljs-section {\n  color: #fff;\n}\n\n.hljs-comment,\n.hljs-quote,\n.hljs-meta {\n  color: #444;\n}\n\n.hljs-string,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-regexp {\n  color: #ffcc33;\n}\n\n.hljs-number,\n.hljs-addition {\n  color: #00cc66;\n}\n\n.hljs-built_in,\n.hljs-literal,\n.hljs-type,\n.hljs-template-variable,\n.hljs-attribute,\n.hljs-link {\n  color: #32aaee;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-name,\n.hljs-selector-id,\n.hljs-selector-class {\n  color: #6644aa;\n}\n\n.hljs-title,\n.hljs-variable,\n.hljs-deletion,\n.hljs-template-tag {\n  color: #bb1166;\n}\n\n.hljs-section,\n.hljs-doctag,\n.hljs-strong {\n  font-weight: bold;\n}\n\n.hljs-emphasis {\n  font-style: italic;\n}\n\n/* Custom scrollbar for sidebar */\n.sidebar-scroll {\n  scrollbar-width: thin;\n  scrollbar-color: transparent transparent;\n  transition: scrollbar-color 0.3s ease;\n}\n\n.sidebar-scroll:hover {\n  scrollbar-color: var(--color-primary) transparent;\n}\n\n/* Webkit browsers (Chrome, Safari, Edge) */\n.sidebar-scroll::-webkit-scrollbar {\n  width: 2px;\n  height: 2px;\n}\n\n.sidebar-scroll::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.sidebar-scroll::-webkit-scrollbar-thumb {\n  background: transparent;\n  border-radius: 2px;\n  transition: background 0.3s ease;\n}"
  },
  {
    "path": "app/layout.tsx",
    "content": "import TopNav from \"@/components/TopNav\";\nimport \"./global.css\";\nimport { Archivo_Black, Space_Grotesk, Space_Mono } from \"next/font/google\";\nimport { Metadata } from \"next\";\nimport { Toaster } from \"@/components/retroui\";\nimport { Analytics } from \"@vercel/analytics/next\";\nimport { SpeedInsights } from \"@vercel/speed-insights/next\";\nimport { ThemeProvider } from \"@/contexts/ThemeContext\";\nimport ThemeWrapper from \"@/components/ThemeWrapper\";\n\nconst sans = Space_Grotesk({\n  subsets: [\"latin\"],\n  weight: \"400\",\n  variable: \"--font-sans\",\n  display: \"swap\",\n});\n\nconst head = Archivo_Black({\n  subsets: [\"latin\"],\n  weight: \"400\",\n  variable: \"--font-head\",\n  display: \"swap\",\n});\n\nconst mono = Space_Mono({\n  subsets: [\"latin\"],\n  weight: \"400\",\n  variable: \"--font-mono\",\n  display: \"swap\",\n});\n\nexport const metadata: Metadata = {\n  title: \"NeoBrutalism Styled React Components | RetroUI\",\n  description:\n    \"RetroUI - NeoBrutalism styled component library built with React and TailwindCSS for modern web apps.\",\n  openGraph: {\n    images: \"https://retroui.dev/banner.png\",\n    title: \"NeoBrutalism Styled React Components | RetroUI\",\n  },\n};\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <html lang=\"en\">\n      <head>\n        <script\n          dangerouslySetInnerHTML={{\n            __html: `\n              (function() {\n                try {\n                  const darkMode = localStorage.getItem('darkMode');\n                  if (darkMode === 'dark') {\n                    document.documentElement.classList.add('dark');\n                  } else {\n                    document.documentElement.classList.remove('dark');\n                  }\n                } catch (e) {\n                  console.error('Error applying theme:', e);\n                }\n              })();\n            `,\n          }}\n        />\n        {/* <script\n          defer\n          src=\"https://cloud.umami.is/script.js\"\n          data-website-id=\"97dd6182-c656-4265-97e0-ee9613b88078\"\n        /> */}\n        <script\n          defer\n          data-website-id=\"dfid_zlQSgC5h2RNuCLHQTf7Fd\"\n          data-domain=\"retroui.dev\"\n          src=\"https://datafa.st/js/script.js\">\n        </script>\n      </head>\n      <body\n        className={`${head.variable} ${sans.variable} ${mono.variable}`}\n      >\n        <ThemeProvider>\n            <div className=\"bg-background text-foreground\">\n              <TopNav />\n              {children}\n              <Toaster />\n            </div>\n        </ThemeProvider>\n        <SpeedInsights />\n        <Analytics />\n      </body>\n    </html>\n  );\n}\n"
  },
  {
    "path": "app/robots.ts",
    "content": "import type { MetadataRoute } from \"next\";\n\nexport default function robots(): MetadataRoute.Robots {\n  return {\n    rules: {\n      userAgent: \"*\",\n      allow: \"/\",\n    },\n    sitemap: \"https://retroui.dev/sitemap.xml\",\n  };\n}\n"
  },
  {
    "path": "app/rss.xml/route.ts",
    "content": "import { generateRegistryRssFeed } from \"@wandry/analytics-sdk\";\nimport type { NextRequest } from \"next/server\";\n\nexport const revalidate = 3600;\n\nexport async function GET(request: NextRequest) {\n  const baseUrl = new URL(request.url).origin;\n\n  const rssXml = await generateRegistryRssFeed({\n    baseUrl,\n    componentsUrl: \"/docs/components\",\n    excludeItemTypes: [\"registry:block\", \"registry:style\", \"registry:lib\"],\n    rss: {\n      title: \"@retroui\",\n      description: \"Subscribe to @retroui updates\",\n      link: \"https://retroui.dev\",\n      pubDateStrategy: \"githubLastEdit\",\n    },\n    github: {\n      owner: \"Logging-Studio\",\n      repo: \"RetroUI\",\n      token: process.env.GITHUB_TOKEN,\n    },\n  });\n\n  if (!rssXml) {\n    return new Response(\"RSS feed not available\", {\n      status: 404,\n      headers: { \"Content-Type\": \"text/plain\" },\n    });\n  }\n\n  return new Response(rssXml, {\n    headers: {\n      \"Content-Type\": \"application/rss+xml; charset=utf-8\",\n      \"Cache-Control\":\n        \"public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400\",\n    },\n  });\n}\n"
  },
  {
    "path": "app/sitemap.ts",
    "content": "import { allDocs } from \"@/.contentlayer/generated\";\nimport type { MetadataRoute } from \"next\";\n\nexport default function sitemap(): MetadataRoute.Sitemap {\n  return [\n    {\n      url: \"https://retroui.dev\",\n      lastModified: new Date(),\n      changeFrequency: \"yearly\",\n      priority: 1,\n    },\n    ...allDocs.map((doc) => ({\n      url: `https://retroui.dev${doc.url}`,\n      lastModified: doc.lastUpdated,\n    })),\n  ];\n}\n"
  },
  {
    "path": "components/CodeBlock.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/retroui\";\n\ninterface ICodeBlock extends React.HTMLAttributes<HTMLPreElement> {}\n\nexport async function copyToClipboardWithMeta(value: string, event?: Event) {\n  navigator.clipboard.writeText(value);\n  if (event) {\n    // trackEvent(event);\n  }\n}\n\nexport function CodeBlock({ className, children, ...props }: ICodeBlock) {\n  const [hasCopied, setHasCopied] = React.useState(false);\n  const preRef = React.useRef<HTMLPreElement>(null);\n\n  const handleClickCopy = async () => {\n    const code = preRef.current?.textContent;\n    if (code) {\n      setHasCopied(true);\n      await navigator.clipboard.writeText(code);\n\n      setTimeout(() => {\n        setHasCopied(false);\n      }, 3000);\n    }\n  };\n\n  return (\n    <div className=\"relative\">\n      <pre\n        className={cn(\n          \"overflow-x-auto rounded-sm bg-[#282A36] mt-3 mb-6 p-4\",\n          className,\n        )}\n        {...props}\n      >\n        <Button\n          id=\"cody-copy-button\"\n          data-umami-event=\"copy-code-button\"\n          disabled={hasCopied}\n          className=\"absolute top-4 right-4 z-10\"\n          size=\"sm\"\n          onClick={handleClickCopy}\n        >\n          {hasCopied ? \"Copied\" : \"Copy\"}\n        </Button>\n        <span ref={preRef}>{children}</span>\n      </pre>\n    </div>\n  );\n}\n"
  },
  {
    "path": "components/ComponentInstall.tsx",
    "content": "import { Tab, TabGroup, TabList, TabPanel, TabPanels } from \"@headlessui/react\";\nimport React from \"react\";\nimport { HTMLAttributes } from \"react\";\nimport { Check, Copy } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"./retroui\";\n\ninterface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {}\n\nconst CopyableCommand = ({ command }: { command: string }) => {\n  const [copied, setCopied] = useState(false);\n\n  const copyToClipboard = async () => {\n    await navigator.clipboard.writeText(command);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <div className=\"flex items-center justify-between gap-2 group\">\n      <code className=\"flex-1\">{command}</code>\n      <Button size=\"sm\" onClick={copyToClipboard} className=\"hidden md:block\" title=\"Copy to clipboard\">\n        {copied ? \"Copied\" : \"Copy\"}\n      </Button>\n      <Button className=\"md:hidden\" size=\"icon\" onClick={copyToClipboard} title=\"Copy to clipboard mobile\">\n        {copied ? <Check className=\"h-4 w-4\" /> : <Copy className=\"h-4 w-4\" />}\n      </Button>\n    </div>\n  );\n};\n\nexport function CliCommand({\n  npmCommand,\n  yarnCommand,\n  pnpmCommand,\n  bunCommand,\n}: {\n  npmCommand: string;\n  yarnCommand?: string;\n  pnpmCommand?: string;\n  bunCommand?: string;\n}) {\n  const isNpx = npmCommand.includes(\"npx\");\n  if (isNpx) {\n    pnpmCommand = pnpmCommand ?? npmCommand.replace(\"npx\", \"pnpm dlx\");\n    yarnCommand = yarnCommand ?? npmCommand.replace(\"npx\", \"yarn dlx\");\n    bunCommand = bunCommand ?? npmCommand.replace(\"npx\", \"bunx\");\n  } else {\n    pnpmCommand = pnpmCommand ?? npmCommand.replace(\"npm\", \"pnpm\");\n    yarnCommand = yarnCommand ?? npmCommand.replace(\"npm install\", \"yarn add\");\n    bunCommand = bunCommand ?? npmCommand.replace(\"npm\", \"bun\");\n  }\n\n  return (\n    <TabGroup className=\"p-4 my-2 bg-gray-800 rounded-md text-background/90\">\n      <TabList className=\"flex space-x-4 mb-6 text-sm\">\n        <Tab className=\"cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden\">\n          pnpm\n        </Tab>\n        <Tab className=\"cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden\">\n          npm\n        </Tab>\n        <Tab className=\"cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden\">\n          yarn\n        </Tab>\n        <Tab className=\"cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden\">\n          bun\n        </Tab>\n      </TabList>\n      <TabPanels className=\"text-sm text-accent\">\n        <TabPanel>\n          <CopyableCommand command={pnpmCommand} />\n        </TabPanel>\n        <TabPanel>\n          <CopyableCommand command={npmCommand} />\n        </TabPanel>\n        <TabPanel>\n          <CopyableCommand command={yarnCommand} />\n        </TabPanel>\n        <TabPanel>\n          <CopyableCommand command={bunCommand} />\n        </TabPanel>\n      </TabPanels>\n    </TabGroup>\n  );\n}\n\nfunction ComponentInstallCli({\n  npmCommand,\n  yarnCommand,\n  pnpmCommand,\n  bunCommand,\n}: {\n  npmCommand: string;\n  yarnCommand?: string;\n  pnpmCommand?: string;\n  bunCommand?: string;\n}) {\n  return (\n    <TabPanel>\n      <CliCommand\n        npmCommand={npmCommand}\n        yarnCommand={yarnCommand}\n        pnpmCommand={pnpmCommand}\n        bunCommand={bunCommand}\n      />\n    </TabPanel>\n  );\n}\n\nfunction ComponentInstallManual({ children }: { children: React.ReactNode }) {\n  return <TabPanel>{children}</TabPanel>;\n}\n\nfunction ComponentInstall({ children }: IComponentShowcase) {\n  return (\n    <TabGroup>\n      <TabList className=\"border-b bg-transparent flex space-x-4 mb-6 text-sm\">\n        <Tab className=\"min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden\">\n          CLI\n        </Tab>\n        <Tab className=\"min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden\">\n          Manual\n        </Tab>\n      </TabList>\n\n      <TabPanels>{children}</TabPanels>\n    </TabGroup>\n  );\n}\n\nObject.assign(ComponentInstall, {\n  Cli: ComponentInstallCli,\n  Manual: ComponentInstallManual,\n});\n\nexport { ComponentInstall };\n"
  },
  {
    "path": "components/ComponentShowcase.tsx",
    "content": "import { componentConfig } from \"@/config\";\nimport { TabGroup, TabList, TabPanels, TabPanel, Tab } from \"@headlessui/react\";\nimport React, { HTMLAttributes } from \"react\";\nimport { Button } from \"./retroui\";\n\ninterface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {\n  name: keyof typeof componentConfig.examples;\n}\n\nexport function ComponentShowcase({ name, children }: IComponentShowcase) {\n  const { preview: Preview } = componentConfig.examples[name];\n  const Code = React.Children.toArray(children)[0];\n\n  return (\n    <TabGroup>\n      <TabList className=\"space-x-4 border-b mb-6 text-sm\">\n        <Tab className=\"min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden\">\n          Preview\n        </Tab>\n        <Tab className=\"min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden\">\n          Code\n        </Tab>\n      </TabList>\n      <TabPanels>\n        <TabPanel>\n          <div className=\"border rounded-sm px-6 py-24 flex justify-center items-center min-h-80 mt-4 relative\">\n            <a\n              href={`https://v0.dev/chat/api/open?url=https://retroui.dev/r/${name}.json`}\n              target=\"_blank\"\n            >\n              <Button\n                variant=\"secondary\"\n                size=\"sm\"\n                className=\"font-sans absolute top-4 right-4\"\n              >\n                Open in\n                <svg\n                  viewBox=\"0 0 40 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className=\"h-5 w-5 ml-2 text-current\"\n                >\n                  <path\n                    d=\"M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path\n                    d=\"M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              </Button>\n            </a>\n\n            <Preview />\n          </div>\n        </TabPanel>\n        <TabPanel>\n          <div className=\"relative rounded-sm overflow-auto\">{Code}</div>\n        </TabPanel>\n      </TabPanels>\n    </TabGroup>\n  );\n}\n"
  },
  {
    "path": "components/ComponentSource.tsx",
    "content": "import { cn } from \"@/lib/utils\";\n\ninterface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {\n  src: string;\n}\n\nexport function ComponentSource({ children, className }: ComponentSourceProps) {\n  return (\n    <div className={cn(\"overflow-hidden rounded-md\", className)}>\n      {children}\n    </div>\n  );\n}\n"
  },
  {
    "path": "components/CopyTheme.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\nimport { Dialog } from \"@/components/retroui/Dialog\";\nimport { Text } from \"@/components/retroui/Text\";\nimport { Theme, themeConfig } from \"@/config/theme\";\nimport { CodeBlock } from \"./CodeBlock\";\n\nexport default function CopyTheme({ theme, hasRadius = false }: { theme: Theme, hasRadius?: boolean }) {\n    return (\n        <Dialog>\n            <Dialog.Trigger asChild>\n                <Button>Copy Theme</Button>\n            </Dialog.Trigger>\n            <Dialog.Content className={`theme-${theme} ${hasRadius ? \"with-radius\" : \"\"}`}>\n                <Dialog.Header>\n                    <Text as=\"h5\">Copy Theme</Text>\n                </Dialog.Header>\n                <section className=\"w-full p-4\">\n                    <Text className=\"text-lg mb-4 text-muted-foreground\">Copy and paste the following theme code into your CSS file.</Text>\n\n                    <CodeBlock className=\"w-full max-h-[480px] text-gray-300 text-sm overflow-y-auto\">\n                        {themeConfig({ hasRadius })[theme].color}\n                    </CodeBlock>\n                </section>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"
  },
  {
    "path": "components/HamburgerMenu.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport SideNav from \"./SideNav\";\nimport { AlignJustify, X } from \"lucide-react\";\nimport { Button } from \"@/components/retroui\";\n\nexport default function HamburgerMenu() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div>\n      <Button\n        size=\"sm\"\n        variant=\"outline\"\n        className=\"p-2\"\n        onClick={() => setIsOpen((prev) => !prev)}\n      >\n        {isOpen ? (\n          <X className=\"h-4 w-4\" />\n        ) : (\n          <AlignJustify className=\"h-4 w-4\" />\n        )}\n      </Button>\n\n      {isOpen && (\n        <div\n          className=\"absolute top-0 left-0 right-0 w-full h-screen bg-black opacity-50\"\n          onClick={() => setIsOpen(false)}\n        />\n      )}\n\n      {isOpen && (\n        <div className=\"absolute top-0 bottom-0 h-screen left-0 z-10\">\n          <SideNav setIsOpen={setIsOpen} />\n        </div>\n      )}\n    </div>\n  );\n}\n"
  },
  {
    "path": "components/JoinNewsletter.tsx",
    "content": "\"use client\";\n\nimport { Button, Text, Input } from \"@/components/retroui\";\nimport { useState } from \"react\";\n\nconst INIT = \"INIT\";\nconst SUBMITTING = \"SUBMITTING\";\nconst ERROR = \"ERROR\";\nconst SUCCESS = \"SUCCESS\";\nconst formStates = [INIT, SUBMITTING, ERROR, SUCCESS] as const;\nconst formStyles = {\n  id: \"cltl71xnw000ris85z92rosvh\",\n  name: \"Default\",\n  formStyle: \"inline\",\n  placeholderText: \"you@example.com\",\n  formFont: \"font-sans\",\n  formFontColor: \"#000000\",\n  formFontSizePx: 14,\n  buttonText: \"Subscribe\",\n  buttonFont: \"font-sans\",\n  buttonFontColor: \"#ffffff\",\n  buttonColor: \"#000000\",\n  buttonFontSizePx: 14,\n  successMessage: \"Thanks! We'll be in touch!\",\n  successFont: \"Inter\",\n  successFontColor: \"#000000\",\n  successFontSizePx: 14,\n  userGroup: \"\",\n};\nconst domain = \"app.loops.so\";\n\nexport function JoinNewsletter() {\n  const [email, setEmail] = useState(\"\");\n  const [formState, setFormState] = useState<(typeof formStates)[number]>(INIT);\n  const [errorMessage, setErrorMessage] = useState(\"\");\n\n  const resetForm = () => {\n    setEmail(\"\");\n    setFormState(INIT);\n    setErrorMessage(\"\");\n  };\n\n  /**\n   * Rate limit the number of submissions allowed\n   * @returns {boolean} true if the form has been successfully submitted in the past minute\n   */\n  const hasRecentSubmission = () => {\n    const time = new Date();\n    const timestamp = time.valueOf();\n    const previousTimestamp = localStorage.getItem(\"loops-form-timestamp\");\n\n    // Indicate if the last sign up was less than a minute ago\n    if (\n      previousTimestamp &&\n      Number(previousTimestamp) + 60 * 1000 > timestamp\n    ) {\n      setFormState(ERROR);\n      setErrorMessage(\"Too many signups, please try again in a little while\");\n      return true;\n    }\n\n    localStorage.setItem(\"loops-form-timestamp\", timestamp.toString());\n    return false;\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    // Prevent the default form submission\n    event.preventDefault();\n\n    // boundary conditions for submission\n    if (formState !== INIT) return;\n    if (!isValidEmail(email)) {\n      setFormState(ERROR);\n      setErrorMessage(\"Please enter a valid email\");\n      return;\n    }\n    if (hasRecentSubmission()) return;\n    setFormState(SUBMITTING);\n\n    // build body\n    const formBody = `userGroup=${encodeURIComponent(\n      formStyles.userGroup,\n    )}&email=${encodeURIComponent(email)}&mailingLists=`;\n\n    // API request to add user to newsletter\n    fetch(`https://${domain}/api/newsletter-form/${formStyles.id}`, {\n      method: \"POST\",\n      body: formBody,\n      headers: {\n        \"Content-Type\": \"application/x-www-form-urlencoded\",\n      },\n    })\n      .then((res: any) => [res.ok, res.json(), res])\n      .then(([ok, dataPromise, res]) => {\n        if (ok) {\n          resetForm();\n          setFormState(SUCCESS);\n        } else {\n          dataPromise.then((data: any) => {\n            setFormState(ERROR);\n            setErrorMessage(data.message || res.statusText);\n            localStorage.setItem(\"loops-form-timestamp\", \"\");\n          });\n        }\n      })\n      .catch((error) => {\n        setFormState(ERROR);\n        // check for cloudflare error\n        if (error.message === \"Failed to fetch\") {\n          setErrorMessage(\n            \"Too many signups, please try again in a little while\",\n          );\n        } else if (error.message) {\n          setErrorMessage(error.message);\n        }\n        localStorage.setItem(\"loops-form-timestamp\", \"\");\n      });\n  };\n\n  switch (formState) {\n    case SUCCESS:\n      return (\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            width: \"100%\",\n          }}\n        >\n          <p\n            style={{\n              fontFamily: `'${formStyles.successFont}', sans-serif`,\n              color: formStyles.successFontColor,\n              fontSize: `${formStyles.successFontSizePx}px`,\n            }}\n          >\n            {formStyles.successMessage}\n          </p>\n        </div>\n      );\n    case ERROR:\n      return (\n        <>\n          <SignUpFormError />\n          <BackButton />\n        </>\n      );\n    default:\n      return (\n        <div className=\"w-full max-w-6xl mx-auto py-16 px-4 border-2 border-black\">\n          <div className=\"flex flex-col justify-center items-center text-center\">\n            <Text as=\"h2\">Join Our Newsletter</Text>\n            <p className=\"text-lg text-muted-foreground mb-8\">\n              Get notified about latest updates and new launches.\n            </p>\n\n            <form\n              onSubmit={handleSubmit}\n              className=\"flex space-x-2 w-full lg:w-1/2\"\n            >\n              <Input\n                placeholder={formStyles.placeholderText}\n                value={email}\n                type=\"text\"\n                name=\"email\"\n                required={true}\n                onChange={(e) => setEmail(e.target.value)}\n              />\n\n              <Button>Subscribe</Button>\n            </form>\n          </div>\n        </div>\n      );\n  }\n\n  function SignUpFormError() {\n    return (\n      <div\n        style={{\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: \"100%\",\n        }}\n      >\n        <p\n          style={{\n            fontFamily: \"Inter, sans-serif\",\n            color: \"rgb(185, 28, 28)\",\n            fontSize: \"14px\",\n          }}\n        >\n          {errorMessage || \"Oops! Something went wrong, please try again\"}\n        </p>\n      </div>\n    );\n  }\n\n  function BackButton() {\n    const [isHovered, setIsHovered] = useState(false);\n\n    return (\n      <button\n        style={{\n          color: \"#6b7280\",\n          font: \"14px, Inter, sans-serif\",\n          margin: \"10px auto\",\n          textAlign: \"center\",\n          background: \"transparent\",\n          border: \"none\",\n          cursor: \"pointer\",\n          textDecoration: isHovered ? \"underline\" : \"none\",\n        }}\n        onMouseOut={() => setIsHovered(false)}\n        onMouseOver={() => setIsHovered(true)}\n        onClick={resetForm}\n      >\n        &larr; Back\n      </button>\n    );\n  }\n}\n\nfunction isValidEmail(email: any) {\n  return /.+@.+/.test(email);\n}\n"
  },
  {
    "path": "components/MDX.tsx",
    "content": "\"use client\";\n\nimport { Alert, Badge, Card, Text } from \"@/components/retroui\";\nimport { useMDXComponent } from \"next-contentlayer/hooks\";\nimport React, { AnchorHTMLAttributes, HTMLAttributes } from \"react\";\nimport { ComponentShowcase } from \"./ComponentShowcase\";\nimport { cn } from \"@/lib/utils\";\nimport { ComponentSource } from \"./ComponentSource\";\nimport { CodeBlock } from \"./CodeBlock\";\nimport Link from \"next/link\";\nimport { ComponentInstall, CliCommand } from \"./ComponentInstall\";\nimport Image from \"next/image\";\nimport { Tab, TabGroup, TabList, TabPanel, TabPanels } from \"@headlessui/react\";\nimport { Table } from \"./retroui/Table\";\n\nconst components = (type: \"doc\" | \"blog\") => ({\n  h1: (props: HTMLAttributes<HTMLHeadingElement>) => (\n    <Text as=\"h1\" {...props} />\n  ),\n  h2: (props: HTMLAttributes<HTMLHeadingElement>) =>\n    type === \"blog\" ? (\n      <Text as=\"h2\" className=\"mb-4 mt-8\" {...props} />\n    ) : (\n      <Text as=\"h2\" className=\"border-b pb-1 mb-6\" {...props} />\n    ),\n  h3: (props: HTMLAttributes<HTMLHeadingElement>) => (\n    <Text as=\"h3\" className=\"mb-4\" {...props} />\n  ),\n  h4: (props: HTMLAttributes<HTMLHeadingElement>) => (\n    <Text as=\"h4\" className=\"mb-2\" {...props} />\n  ),\n  h5: (props: HTMLAttributes<HTMLHeadElement>) => <Text as=\"h5\" {...props} />,\n  h6: (props: HTMLAttributes<HTMLHeadElement>) => <Text as=\"h6\" {...props} />,\n  p: (props: HTMLAttributes<HTMLHeadElement>) =>\n    type === \"blog\" ? (\n      <Text {...props} className=\"text-lg text-foreground\" />\n    ) : (\n      <Text {...props} />\n    ),\n  li: (props: HTMLAttributes<HTMLHeadElement>) =>\n    type === \"blog\" ? (\n      <Text\n        as=\"li\"\n        {...props}\n        className=\"text-lg text-foreground ml-4 lg:ml-8 mb-2\"\n      />\n    ) : (\n      <Text as=\"li\" className=\"mb-2\" {...props} />\n    ),\n  img: (props: HTMLAttributes<HTMLImageElement>) => (\n    <img className=\"mx-auto w-full max-w-[600px] my-8\" {...props} />\n  ),\n  a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {\n    const { href, target, rel, ...rest } = props;\n\n    if (!href) {\n      return <a {...rest} />;\n    }\n\n    const isExternal = href.startsWith(\"http\");\n\n    return isExternal ? (\n      <a\n        href={href}\n        target={target || \"_blank\"}\n        rel={rel || \"noopener noreferrer\"}\n        className=\"underline underline-offset-4 hover:decoration-primary\"\n        {...rest}\n      />\n    ) : (\n      <Link\n        href={href}\n        className=\"underline underline-offset-4 hover:decoration-primary\"\n        {...rest}\n      />\n    );\n  },\n  pre: CodeBlock,\n  code: ({\n    className,\n    children,\n    ...props\n  }: React.HTMLAttributes<HTMLElement>) => (\n    <code\n      className={cn(\n        \"relative rounded-sm bg-[#282A36] p-1 text-primary text-sm\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </code>\n  ),\n  TabGroup,\n  TabList,\n  Tab,\n  TabPanels,\n  TabPanel,\n  Table,\n  Link,\n  Badge,\n  Image,\n  Card,\n  Alert,\n  ComponentShowcase,\n  ComponentSource,\n  ComponentInstall,\n  CliCommand,\n});\n\nexport default function MDX({\n  code,\n  type = \"doc\",\n}: {\n  code: string;\n  type?: \"doc\" | \"blog\";\n}) {\n  const Content = useMDXComponent(code);\n\n  return <Content components={components(type)} />;\n}\n"
  },
  {
    "path": "components/RichTextCodeBlock.tsx",
    "content": "'use client'\n\nimport { useState } from 'react'\n\nconst CopyIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n    <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n  </svg>\n)\n\nconst CheckIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M20 6 9 17l-5-5\" />\n  </svg>\n)\n\nexport const RichTextCodeBlock: React.FC<{\n  code: string\n  language?: string\n  title?: string\n}> = ({ code, language, title }) => {\n  const [copied, setCopied] = useState(false)\n\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(code)\n    setCopied(true)\n    setTimeout(() => setCopied(false), 2000)\n  }\n\n  return (\n    <div className=\"my-6 rounded-lg overflow-hidden border-2 border-border bg-[#282A36]\">\n      <div className=\"flex items-center justify-between px-4 py-2 bg-[#1e1f29] border-b-2 border-border\">\n        <span className=\"text-sm text-gray-400 font-mono\">\n          {title || language || 'code'}\n        </span>\n        <button\n          onClick={handleCopy}\n          className=\"flex items-center gap-1.5 text-xs text-gray-400 hover:text-white transition-colors\"\n        >\n          {copied ? (\n            <>\n              <CheckIcon />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <CopyIcon />\n              <span>Copy</span>\n            </>\n          )}\n        </button>\n      </div>\n      <pre className=\"p-4 overflow-x-auto\">\n        <code className=\"text-sm text-accent font-mono whitespace-pre\">\n          {code}\n        </code>\n      </pre>\n    </div>\n  )\n}\n"
  },
  {
    "path": "components/RichTextConverter.tsx",
    "content": "import Link from 'next/link'\nimport type {\n  DefaultNodeTypes,\n  SerializedUploadNode,\n} from '@payloadcms/richtext-lexical'\nimport {\n  type JSXConvertersFunction,\n} from '@payloadcms/richtext-lexical/react'\nimport { Text } from '@/components/retroui'\nimport { RichTextCodeBlock } from '@/components/RichTextCodeBlock'\n\nconst CustomUploadComponent: React.FC<{\n  node: SerializedUploadNode\n}> = ({ node }) => {\n  if (node.relationTo === 'media') {\n    const uploadDoc = node.value\n    if (typeof uploadDoc !== 'object') {\n      return null\n    }\n    const { alt, height, url, width } = uploadDoc\n    return (\n      <img\n        alt={alt}\n        height={height}\n        src={`https://cms.retroui.dev${url}`}\n        width={width}\n        className=\"mx-auto w-full max-w-[600px] my-8\"\n      />\n    )\n  }\n\n  return null\n}\n\ntype NodeTypes = DefaultNodeTypes\nexport const JSXConverters: JSXConvertersFunction<NodeTypes> = ({\n  defaultConverters,\n}) => {\n  return {\n    ...defaultConverters,\n    heading: ({ node, nodesToJSX }) => {\n      const children = nodesToJSX({ nodes: node.children })\n      const Tag = node.tag as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n      const classNames: Record<string, string> = {\n        h1: '',\n        h2: 'mb-4 mt-8 lg:text-3xl',\n        h3: 'mb-4',\n        h4: 'mb-2',\n        h5: '',\n        h6: '',\n      }\n      return (\n        <Text as={Tag} className={classNames[Tag]}>\n          {children}\n        </Text>\n      )\n    },\n    paragraph: ({ node, nodesToJSX }) => {\n      // Handle empty paragraphs as spacing\n      if (!node.children || node.children.length === 0) {\n        return <br />\n      }\n      const children = nodesToJSX({ nodes: node.children })\n      return <Text className=\"text-lg text-foreground\">{children}</Text>\n    },\n    text: ({ node }) => {\n      const format = node.format ?? 0\n      let text: React.ReactNode = node.text\n\n      // Format is a bitmask: 1=bold, 2=italic, 4=strikethrough, 8=underline, 16=code\n      if (format & 16) {\n        // Inline code\n        text = (\n          <code className=\"rounded-sm bg-[#282A36] px-1.5 py-0.5 text-primary text-sm\">\n            {text}\n          </code>\n        )\n      }\n      if (format & 1) {\n        text = <strong>{text}</strong>\n      }\n      if (format & 2) {\n        text = <em>{text}</em>\n      }\n      if (format & 4) {\n        text = <s>{text}</s>\n      }\n      if (format & 8) {\n        text = <u>{text}</u>\n      }\n\n      return <>{text}</>\n    },\n    list: ({ node, nodesToJSX }) => {\n      const children = nodesToJSX({ nodes: node.children })\n      if (node.listType === 'bullet') {\n        return <ul className=\"list-disc pl-4 lg:pl-8 my-4\">{children}</ul>\n      }\n      return <ol className=\"list-decimal pl-4 lg:pl-8 my-4\">{children}</ol>\n    },\n    listitem: ({ node, nodesToJSX }) => {\n      const children = nodesToJSX({ nodes: node.children })\n      return (\n        <Text as=\"li\" className=\"text-lg text-foreground ml-4 lg:ml-8 mb-2\">\n          {children}\n        </Text>\n      )\n    },\n    link: ({ node, nodesToJSX }) => {\n      const children = nodesToJSX({ nodes: node.children })\n      const href = node.fields?.url || ''\n      const isExternal = href.startsWith('http')\n      const linkClass = 'underline underline-offset-4 hover:decoration-primary'\n\n      if (isExternal) {\n        return (\n          <a\n            href={href}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={linkClass}\n          >\n            {children}\n          </a>\n        )\n      }\n\n      return (\n        <Link href={href} className={linkClass}>\n          {children}\n        </Link>\n      )\n    },\n    quote: ({ node, nodesToJSX }) => {\n      const children = nodesToJSX({ nodes: node.children })\n      return (\n        <blockquote className=\"border-l-4 border-primary pl-4 my-4 italic\">\n          {children}\n        </blockquote>\n      )\n    },\n    linebreak: () => {\n      return <br />\n    },\n    upload: ({ node }) => {\n      return <CustomUploadComponent node={node} />\n    },\n    // Handle autolink nodes\n    autolink: ({ node, nodesToJSX }) => {\n      const children = nodesToJSX({ nodes: (node as any).children })\n      const href = (node as any).fields?.url || ''\n      return (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"underline underline-offset-4 hover:decoration-primary break-all\"\n        >\n          {children}\n        </a>\n      )\n    },\n    // Blocks converter - nested object with slug as key\n    blocks: {\n      Code: ({ node }: any) => {\n        const fields = (node as any).fields\n        return (\n          <RichTextCodeBlock\n            code={fields?.code || ''}\n            language={fields?.language}\n            title={fields?.blockName}\n          />\n        )\n      },\n    },\n  }\n}"
  },
  {
    "path": "components/SideNav.tsx",
    "content": "\"use client\";\n\nimport { navConfig } from \"@/config/navigation\";\nimport { Badge, Text } from \"@/components/retroui\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\n\ninterface SideNavProps {\n  setIsOpen?: (isOpen: boolean) => void;\n}\n\nexport default function SideNav({ setIsOpen }: SideNavProps) {\n  const pathname = usePathname();\n\n  return (\n    <div className=\"sidebar-scroll border-r-2 z-10 overflow-y-scroll h-full max-h-[calc(100vh-6rem)] transition-transform transform md:translate-x-0 w-full bg-background flex flex-col justify-start md:justify-start py-8\">\n      <nav\n        className=\"flex flex-col items-start max-lg:px-6 space-y-4 z-99\"\n        aria-label=\"Main navigation\"\n      >\n        {navConfig.sideNavItems.map((item) => (\n          <div key={item.title} className=\"w-full\">\n            <Text as=\"h5\">{item.title}</Text>\n            <div className=\"flex flex-col w-full\">\n              {item.children.map((child) => (\n                <Link\n                  key={child.title}\n                  href={child.href}\n                  onClick={() => setIsOpen && setIsOpen(false)}\n                  target={child.href.startsWith(\"http\") ? \"_blank\" : \"_self\"}\n                  className={`px-2 py-1 w-full border border-transparent text-muted-foreground flex items-center justify-between hover:text-foreground hover:bg-muted/50 transition-colors ${\n                    pathname === child.href &&\n                    \"bg-primary text-primary-foreground\"\n                  }`}\n                >\n                  {child.title}\n                  {child.tag && (\n                    <Badge\n                      size=\"sm\"\n                      className=\"py-0.5 px-1.5 border text-xs border-secondary text-muted-foreground bg-secondary/10\"\n                    >\n                      {child.tag}\n                    </Badge>\n                  )}\n                </Link>\n              ))}\n            </div>\n          </div>\n        ))}\n      </nav>\n    </div>\n  );\n}\n"
  },
  {
    "path": "components/TableOfContents.tsx",
    "content": "import React from 'react';\nimport { TableOfContents as TOCType } from '@/lib/toc';\n\ninterface TableOfContentsProps {\n  toc: TOCType;\n}\n\nfunction renderTOCItems(items: any[], level = 0) {\n  if (!items || items.length === 0) return null;\n\n  return (\n    <ul className={`space-y-1 ${level > 0 ? 'ml-4 mt-1' : ''}`}>\n      {items.map((item, index) => (\n        <li key={index}>\n          <a\n            href={item.url}\n            className=\"text-sm hover:text-foreground transition-colors block py-1 border-l-2 border-transparent hover:border-accent pl-2\"\n          >\n            {item.title}\n          </a>\n          {item.items && renderTOCItems(item.items, level + 1)}\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nexport default function TableOfContents({ toc }: TableOfContentsProps) {\n  if (!toc.items || toc.items.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"border p-4 rounded-sm max-h-60 overflow-y-auto sidebar-scroll\">\n      <h3 className=\"mb-3 border-b border-black pb-2\">\n        On this Page\n      </h3>\n      {renderTOCItems(toc.items)}\n    </div>\n  );\n}"
  },
  {
    "path": "components/Testimonial.tsx",
    "content": "import { Text, Card, Avatar } from \"@/components/retroui\";\n\ninterface TestimonialCardProps {\n  quote: string;\n  avatarSrc: string;\n  name: string;\n  title: string;\n}\n\nexport default function TestimonialCard({\n  quote,\n  avatarSrc,\n  name,\n  title,\n}: TestimonialCardProps) {\n  return (\n    <Card className=\"w-full max-w-[400px] shadow-none hover:shadow-md\">\n      <Card.Content>\n        <Text className=\"text-lg\">{quote}</Text>\n\n        <div className=\"flex items-center space-x-2 mt-6\">\n          <Avatar className=\"h-10 w-10\">\n            <Avatar.Image alt={`${name} avatar`} src={avatarSrc} />\n          </Avatar>\n          <div>\n            <div className=\"font-medium\">{name}</div>\n            <div className=\"text-sm text-gray-500 dark:text-gray-400\">\n              {title}\n            </div>\n          </div>\n        </div>\n      </Card.Content>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "components/ThemeWrapper.tsx",
    "content": "\"use client\";\n\nimport { useTheme } from \"@/contexts/ThemeContext\";\nimport { useEffect } from \"react\";\n\nexport default function ThemeWrapper({ children }: { children: React.ReactNode }) {\n  const { colorTheme, variant } = useTheme();\n\n  useEffect(() => {\n    const wrapper = document.querySelector(\".theme-wrapper\");\n    if (wrapper) {\n      wrapper.className = `theme-wrapper theme-${colorTheme} ${variant}`;\n    }\n  }, [colorTheme, variant]);\n\n  return <div className={`theme-wrapper theme-${colorTheme} ${variant}`}>{children}</div>;\n}"
  },
  {
    "path": "components/TopNav.tsx",
    "content": "\"use client\";\nimport React from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { ArrowUpRight, GithubIcon, MoonIcon, SunIcon } from \"lucide-react\";\nimport HamburgerMenu from \"./HamburgerMenu\";\nimport { Button, Text } from \"@/components/retroui\";\nimport { navConfig } from \"@/config/navigation\";\nimport { useTheme } from \"@/contexts/ThemeContext\";\n\nexport default function TopNav() {\n  const { isDarkMode, toggleDarkMode } = useTheme();\n\n  return (\n    <nav className=\"sticky z-1 top-0 right-0 w-full border-b-2 bg-background\">\n      <div className=\"w-full bg-black text-white\">\n        <div className=\"container max-w-6xl mx-auto px-4 py-2 flex justify-center space-x-4 items-center\">\n          <Text className=\"text-sm lg:text-center\">\n            Ship faster with premium blocks and templates!\n          </Text>\n          <a href=\"https://dub.sh/retroui-pro\" target=\"_blank\">\n            <Button\n              size=\"sm\"\n              className=\"shadow-none font-sans font-bold px-2 py-1 w-30\"\n            >\n              RetroUI Pro\n              <ArrowUpRight className=\"ml-auto h-4 w-4 inline-block\" />\n            </Button>\n          </a>\n        </div>\n      </div>\n      <div className=\"container max-w-6xl px-4 lg:px-0 mx-auto\">\n        <div className=\"flex justify-between items-center h-16\">\n          {/* Logo Section */}\n          <div className=\"shrink-0\">\n            <a\n              href=\"/\"\n              className=\"text-black font-head text-2xl flex items-end\"\n            >\n              <Image\n                src=\"/images/logo.png\"\n                alt=\"retro ui logo\"\n                className=\"mr-2\"\n                height={30}\n                width={30}\n              />\n              <div className=\"text-foreground\">RetroUI</div>\n            </a>\n          </div>\n\n          {/* Navigation Links */}\n          <div className=\"hidden md:flex space-x-4\">\n            {navConfig.topNavItems.map((item) => (\n              <Link\n                key={item.title}\n                href={item.href}\n                className=\"hover:underline decoration-primary underline-offset-2 transition-all\"\n              >\n                {item.title}\n              </Link>\n            ))}\n          </div>\n\n          <div className=\"flex items-center space-x-4 lg:hidden\">\n            <Link\n              href=\"https://github.com/logging-studio/retroui\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <GithubIcon />\n            </Link>\n            <HamburgerMenu />\n          </div>\n\n          <div className=\"hidden lg:flex items-center space-x-3\">\n            <Link\n              href=\"https://github.com/logging-studio/retroui\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <Button variant=\"secondary\" size=\"icon\">\n                <GithubIcon size=\"14\"/>\n              </Button>\n            </Link>\n            <Button variant=\"secondary\" size=\"icon\" onClick={toggleDarkMode}>\n              {isDarkMode ? <SunIcon size=\"14\" /> : <MoonIcon size=\"14\" />}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </nav>\n  );\n}\n"
  },
  {
    "path": "components/WorksWithSection.tsx",
    "content": "\"use client\";\n\nimport Image from \"next/image\";\nimport { Text } from \"@/components/retroui\";\nimport { useTheme } from \"@/contexts/ThemeContext\";\n\nexport default function WorksWithSection() {\n  const { isDarkMode } = useTheme();\n\n  const frameworks = [\n    {\n      name: \"vite\",\n      lightSrc: \"/images/logos/vite.png\",\n      darkSrc: \"/images/logos/vite_white.png\",\n      size: 60,\n    },\n    {\n      name: \"nextjs\",\n      lightSrc: \"/images/logos/nextjs.png\",\n      darkSrc: \"/images/logos/next_white.png\",\n      size: 60,\n    },\n    {\n      name: \"remix\",\n      lightSrc: \"/images/logos/remix.png\",\n      darkSrc: \"/images/logos/remix_white.png\",\n      size: 55,\n    },\n    {\n      name: \"astro\",\n      lightSrc: \"/images/logos/astro.png\",\n      darkSrc: \"/images/logos/astro_white.png\",\n      size: 55,\n    },\n    {\n      name: \"gatsby\",\n      lightSrc: \"/images/logos/gatsby.png\",\n      darkSrc: \"/images/logos/gatsby_white.png\",\n      size: 60,\n    },\n  ];\n\n  return (\n    <section className=\"container max-w-6xl mx-auto px-4 lg:px-0 my-48\" id=\"works-with\">\n      <Text as=\"h2\" className=\"text-center max-w-2xl mx-auto mb-28\">\n        Works With Both <span className=\"text-outlined\">SSR</span> and{\" \"}\n        <span className=\"text-outlined\">SPA</span> Applications.\n      </Text>\n\n      <div className=\"grid grid-cols-5 gap-8 lg:gap-6 max-w-2xl mx-auto items-center\">\n        {frameworks.map((framework) => (\n          <div key={framework.name}>\n            <Image\n              src={isDarkMode ? framework.darkSrc : framework.lightSrc}\n              alt={`${framework.name} ${isDarkMode ? 'dark' : 'light'}`}\n              width={framework.size}\n              height={framework.size}\n            />\n          </div>\n        ))}\n      </div>\n    </section>\n  );\n}"
  },
  {
    "path": "components/footer.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@/components/retroui/Button\";\nimport { Input } from \"@/components/retroui/Input\";\nimport { Text } from \"@/components/retroui/Text\";\nimport { Mail, TwitterIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { subscribeToNewsletter } from \"@/app/actions/newsletter\";\n\nconst quickLinks = [\n  { name: \"Docs\", href: \"/docs\" },\n  { name: \"Blogs\", href: \"/blogs\" },\n  { name: \"Community\", href: \"https://discord.com/invite/Jum3NJxK6Q\" },\n  { name: \"Pro Blocks\", href: \"https://pro.retroui.dev\" },\n];\n\nconst projectLinks = [\n  { name: \"CommerCN\", href: \"https://commercn.com\" },\n  { name: \"Evendeals\", href: \"https://evendeals.com\" },\n  { name: \"Tanstack Starter Kit\", href: \"https://tanstackstarterkit.com\" },\n];\n\nfunction Footer() {\n  const [email, setEmail] = useState(\"\");\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"success\" | \"error\">(\"idle\");\n\n  const handleSubscribe = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setStatus(\"loading\");\n\n    const result = await subscribeToNewsletter(email);\n\n    if (result.success) {\n      setStatus(\"success\");\n      setEmail(\"\");\n    } else {\n      setStatus(\"error\");\n    }\n  };\n\n  return (\n    <footer className=\"border-t-2 mt-24\">\n      <div className=\"max-w-6xl mx-auto px-4 py-16\">\n        <div className=\"grid grid-cols-1 lg:grid-cols-4 gap-12\">\n          <div className=\"lg:col-span-2 max-w-md\">\n            <Text as=\"h2\" className=\"mb-6\">\n              STAY CONNECTED\n            </Text>\n            <Text className=\"text-muted-foreground leading-relaxed mb-2 text-sm\">\n              Join our community to stay updated with new component releases, updates, and special offers.\n            </Text>\n            <form onSubmit={handleSubscribe} className=\"mb-8\">\n              <div className=\"flex gap-4\">\n                <Input\n                  type=\"email\"\n                  placeholder=\"your@email.com\"\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                  required\n                />\n                <Button className=\"w-54 justify-center\" type=\"submit\" disabled={status === \"loading\"}>\n                  {status === \"loading\" ? \"...\" : \"SUBSCRIBE\"}\n                </Button>\n              </div>\n              {status === \"success\" && (\n                <Text className=\"text-green-600 text-sm mt-2\">Subscribed successfully!</Text>\n              )}\n              {status === \"error\" && (\n                <Text className=\"text-red-600 text-sm mt-2\">Failed to subscribe. Try again.</Text>\n              )}\n            </form>\n\n            <div className=\"flex space-x-6\">\n              <a href=\"mailto:arif@retroui.dev\" target=\"_blank\" className=\"flex items-center gap-2\">\n                <div className=\"bg-black text-white p-1 shadow shadow-primary\">\n                  <Mail className=\"w-4 h-4\" />\n                </div>\n                <span className=\"hover:underline underline-offset-4\">\n                  arif@retroui.dev\n                </span>\n              </a>\n\n              <a href=\"https://x.com/ariflogs\" target=\"_blank\" className=\"flex items-center gap-2\">\n                <div className=\"bg-black text-white p-1 shadow shadow-primary\">\n                  <TwitterIcon className=\"w-4 h-4\" />\n                </div>\n                <span className=\"hover:underline underline-offset-4\">@ariflogs</span>\n              </a>\n            </div>\n          </div>\n\n          <div className=\"lg:col-span-1\">\n            <Text as=\"h4\" className=\"mb-6\">\n              Quick Links\n            </Text>\n            <ul className=\"space-y-2\">\n              {quickLinks.map((link) => (\n                <li key={link.name}>\n                  <a\n                    href={link.href}\n                    className=\"hover:underline font-medium underline-offset-4 decoration-primary decoration-2 transition-all\"\n                  >\n                    {link.name}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          <div className=\"lg:col-span-1\">\n            <Text as=\"h4\" className=\"mb-6\">\n              By Makers of RetroUI\n            </Text>\n            <ul className=\"space-y-2\">\n              {projectLinks.map((project) => (\n                <li key={project.name}>\n                  <a\n                    href={project.href}\n                    target=\"_blank\"\n                    className=\"hover:underline font-medium underline-offset-4 decoration-primary decoration-2 transition-all\"\n                  >\n                    {project.name}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"bg-foreground\">\n        <div className=\"max-w-6xl mx-auto px-4 py-6 text-center\">\n          <Text className=\"text-sm text-background\">\n            © 2026 Logging Studio. Crafted with ❤️ and ☕.\n          </Text>\n        </div>\n      </div>\n    </footer>\n  );\n}\n\nexport default Footer;"
  },
  {
    "path": "components/index.ts",
    "content": "export * from \"./ComponentShowcase\";\nexport * from \"./JoinNewsletter\";\n"
  },
  {
    "path": "components/retroui/Accordion.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"border-2 bg-background rounded text-foreground shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden\",\n      className,\n    )}\n    {...props}\n  />\n));\nAccordionItem.displayName = AccordionPrimitive.Item.displayName;\n\nconst AccordionHeader = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-start justify-between px-4 py-2 font-head cursor-pointer focus:outline-hidden [&[data-state=open]>svg]:rotate-180\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n));\nAccordionHeader.displayName = AccordionPrimitive.Header.displayName;\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden font-body bg-white text-gray-700 data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up\"\n    {...props}\n  >\n    <div className={cn(\"px-4 pt-2 pb-4\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nconst AccordionComponent = Object.assign(Accordion, {\n  Item: AccordionItem,\n  Header: AccordionHeader,\n  Content: AccordionContent,\n});\n\nexport { AccordionComponent as Accordion };\n"
  },
  {
    "path": "components/retroui/Alert.tsx",
    "content": "import { HtmlHTMLAttributes } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Text } from \"@/components/retroui/Text\";\n\nconst alertVariants = cva(\"relative w-full rounded border-2 p-4\", {\n  variants: {\n    variant: {\n      default: \"bg-background text-foreground [&_svg]:shrink-0\",\n      solid: \"bg-black text-white\",\n    },\n    status: {\n      error: \"bg-red-300 text-red-800 border-red-800\",\n      success: \"bg-green-300 text-green-800 border-green-800\",\n      warning: \"bg-yellow-300 text-yellow-800 border-yellow-800\",\n      info: \"bg-blue-300 text-blue-800 border-blue-800\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface IAlertProps\n  extends HtmlHTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\nconst Alert = ({ className, variant, status, ...props }: IAlertProps) => (\n  <div\n    role=\"alert\"\n    className={cn(alertVariants({ variant, status }), className)}\n    {...props}\n  />\n);\nAlert.displayName = \"Alert\";\n\ninterface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}\nconst AlertTitle = ({ className, ...props }: IAlertTitleProps) => (\n  <Text as=\"h5\" className={cn(className)} {...props} />\n);\nAlertTitle.displayName = \"AlertTitle\";\n\ninterface IAlertDescriptionProps\n  extends HtmlHTMLAttributes<HTMLParagraphElement> {}\nconst AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (\n  <div className={cn(\"text-muted-foreground\", className)} {...props} />\n);\n\nAlertDescription.displayName = \"AlertDescription\";\n\nconst AlertComponent = Object.assign(Alert, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n});\n\nexport { AlertComponent as Alert };\n"
  },
  {
    "path": "components/retroui/Avatar.tsx",
    "content": "import * as React from \"react\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex h-14 w-14 border-2 rounded-full overflow-hidden\",\n      className,\n    )}\n    {...props}\n  />\n));\nAvatar.displayName = \"Avatar\";\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = \"Avatar.Image\";\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-primary text-primary-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nAvatarFallback.displayName = \"Avatar.Fallback\";\n\nconst AvatarComponent = Object.assign(Avatar, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n});\n\nexport { AvatarComponent as Avatar };\n"
  },
  {
    "path": "components/retroui/Badge.tsx",
    "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { HTMLAttributes } from \"react\";\n\nconst badgeVariants = cva(\"font-semibold rounded inline-flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-muted text-muted-foreground\",\n      outline: \"outline-2 outline-foreground text-foreground\",\n      solid: \"bg-foreground text-background\",\n      surface: \"outline-2 bg-primary text-primary-foreground\",\n    },\n    size: {\n      sm: \"px-2 py-1 text-xs\",\n      md: \"px-2.5 py-1.5 text-sm\",\n      lg: \"px-3 py-2 text-base\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface ButtonProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nexport function Badge({\n  children,\n  size = \"md\",\n  variant = \"default\",\n  className = \"\",\n  ...props\n}: ButtonProps) {\n  return (\n    <span\n      className={cn(badgeVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n"
  },
  {
    "path": "components/retroui/BasicCard.tsx",
    "content": "import React from \"react\";\n\nexport function BasicCard() {\n  return (\n    <div className=\"inline-block border-2 p-4 shadow-md cursor-pointer transition-all hover:shadow-xs\">\n      <h4 className=\"font-head text-2xl font-medium mb-1\">\n        This is card Title\n      </h4>\n      <p>This is card description.</p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "components/retroui/Breadcrumb.tsx",
    "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nconst BreadcrumbRoot = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\">\n>(({ className, ...props }, ref) => (\n  <nav\n    ref={ref}\n    aria-label=\"breadcrumb\"\n    className={cn(\"w-full text-sm\", className)}\n    {...props}\n  />\n))\nBreadcrumbRoot.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 sm:gap-2.5 text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"inline-flex items-center\", className)} {...props} />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & { asChild?: boolean }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        \"font-medium transition-colors hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring rounded-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    aria-current=\"page\"\n    className={cn(\"text-foreground font-semibold\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\n\nconst Breadcrumb = Object.assign(BreadcrumbRoot, {\n  List: BreadcrumbList,\n  Item: BreadcrumbItem,\n  Link: BreadcrumbLink,\n  Page: BreadcrumbPage,\n  Separator: BreadcrumbSeparator,\n  Ellipsis: BreadcrumbEllipsis,\n})\n\nexport { Breadcrumb }\n\n\n"
  },
  {
    "path": "components/retroui/Button.tsx",
    "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const buttonVariants = cva(\n  \"font-head transition-all rounded outline-hidden cursor-pointer duration-200 font-medium flex justify-center items-center disabled:opacity-60 disabled:cursor-not-allowed\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"shadow-md hover:shadow active:shadow-none bg-primary text-primary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-primary-hover\",\n        secondary:\n          \"shadow-md hover:shadow active:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-secondary-hover\",\n        outline:\n          \"shadow-md hover:shadow active:shadow-none bg-transparent border-2 transition hover:translate-y-1 active:translate-y-2 active:translate-x-1\",\n        link: \"bg-transparent hover:underline\",\n        ghost: \"bg-transparent hover:bg-accent\"\n      },\n      size: {\n        sm: \"px-3 py-1 text-sm shadow hover:shadow-none\",\n        md: \"px-4 py-1.5 text-base\",\n        lg: \"px-6 lg:px-8 py-2 lg:py-3 text-md lg:text-lg\",\n        icon: \"p-2\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  },\n);\n\nexport interface IButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\n  (\n    {\n      children,\n      size = \"md\",\n      className = \"\",\n      variant = \"default\",\n      asChild = false,\n      ...props\n    }: IButtonProps,\n    forwardedRef,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";"
  },
  {
    "path": "components/retroui/Calendar.tsx",
    "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/retroui/Button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background w-full outline-2 shadow-md group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4 font-head\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 p-2 border-2 rounded select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 p-2 border-2 rounded select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:outline-ring outline outline-input has-focus:ring-ring/50 has-focus:ring-[3px] rounded\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-base\"\n            : \"rounded-none pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full outline-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 font-normal text-sm select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l\",\n          defaultClassNames.day\n        ),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground opacity-80\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"font-sans flex justify-center items-center data-[selected-single=true]:shadow-md data-[selected-single=true]:outline-2 outline-border data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-secondary data-[range-middle=true]:hover:text-secondary-foreground data-[range-middle=true]:text-secondary-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring-1 group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[2px] data-[range-end=true]:rounded-none data-[range-end=true]:rounded-none data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-none [&>span]:text-xs\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }"
  },
  {
    "path": "components/retroui/Card.tsx",
    "content": "import { cn } from \"@/lib/utils\";\nimport { HTMLAttributes } from \"react\";\nimport { Text } from \"@/components/retroui/Text\";\n\ninterface ICardProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nconst Card = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\n        \"inline-block border-2 rounded shadow-md transition-all hover:shadow-none bg-card\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nconst CardHeader = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\"flex flex-col justify-start p-4\", className)}\n      {...props}\n    />\n  );\n};\n\nconst CardTitle = ({ className, ...props }: ICardProps) => {\n  return <Text as=\"h3\" className={cn(\"mb-2\", className)} {...props} />;\n};\n\nconst CardDescription = ({ className, ...props }: ICardProps) => (\n  <p className={cn(\"text-muted-foreground\", className)} {...props} />\n);\n\nconst CardContent = ({ className, ...props }: ICardProps) => {\n  return <div className={cn(\"p-4\", className)} {...props} />;\n};\n\nconst CardComponent = Object.assign(Card, {\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Content: CardContent,\n});\n\nexport { CardComponent as Card };\n"
  },
  {
    "path": "components/retroui/Carousel.tsx",
    "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n    type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/retroui/Button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n    opts?: CarouselOptions\n    plugins?: CarouselPlugin\n    orientation?: \"horizontal\" | \"vertical\"\n    setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n    carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n    api: ReturnType<typeof useEmblaCarousel>[1]\n    scrollPrev: () => void\n    scrollNext: () => void\n    canScrollPrev: boolean\n    canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n    const context = React.useContext(CarouselContext)\n\n    if (!context) {\n        throw new Error(\"useCarousel must be used within a <Carousel />\")\n    }\n\n    return context\n}\n\nfunction Carousel({\n    orientation = \"horizontal\",\n    opts,\n    setApi,\n    plugins,\n    className,\n    children,\n    ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n    const [carouselRef, api] = useEmblaCarousel(\n        {\n            ...opts,\n            axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n        },\n        plugins\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n        if (!api) return\n        setCanScrollPrev(api.canScrollPrev())\n        setCanScrollNext(api.canScrollNext())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => {\n        api?.scrollPrev()\n    }, [api])\n\n    const scrollNext = React.useCallback(() => {\n        api?.scrollNext()\n    }, [api])\n\n    const handleKeyDown = React.useCallback(\n        (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === \"ArrowLeft\") {\n                event.preventDefault()\n                scrollPrev()\n            } else if (event.key === \"ArrowRight\") {\n                event.preventDefault()\n                scrollNext()\n            }\n        },\n        [scrollPrev, scrollNext]\n    )\n\n    React.useEffect(() => {\n        if (!api || !setApi) return\n        setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n        if (!api) return\n        onSelect(api)\n        api.on(\"reInit\", onSelect)\n        api.on(\"select\", onSelect)\n\n        return () => {\n            api?.off(\"select\", onSelect)\n        }\n    }, [api, onSelect])\n\n    return (\n        <CarouselContext.Provider\n            value={{\n                carouselRef,\n                api: api,\n                opts,\n                orientation:\n                    orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n                scrollPrev,\n                scrollNext,\n                canScrollPrev,\n                canScrollNext,\n            }}\n        >\n            <div\n                onKeyDownCapture={handleKeyDown}\n                className={cn(\"relative\", className)}\n                role=\"region\"\n                aria-roledescription=\"carousel\"\n                data-slot=\"carousel\"\n                {...props}\n            >\n                {children}\n            </div>\n        </CarouselContext.Provider>\n    )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n    const { carouselRef, orientation } = useCarousel()\n\n    return (\n        <div\n            ref={carouselRef}\n            className=\"overflow-hidden\"\n            data-slot=\"carousel-content\"\n        >\n            <div\n                className={cn(\n                    \"flex\",\n                    orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n                    className\n                )}\n                {...props}\n            />\n        </div>\n    )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n    const { orientation } = useCarousel()\n\n    return (\n        <div\n            role=\"group\"\n            aria-roledescription=\"slide\"\n            data-slot=\"carousel-item\"\n            className={cn(\n                \"min-w-0 shrink-0 grow-0 basis-full\",\n                orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n                className\n            )}\n            {...props}\n        />\n    )\n}\n\nfunction CarouselPrevious({\n    className,\n    variant = \"outline\",\n    size = \"icon\",\n    ...props\n}: React.ComponentProps<typeof Button>) {\n    const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n    return (\n        <Button\n            data-slot=\"carousel-previous\"\n            variant={variant}\n            size={size}\n            className={cn(\n                \"absolute size-8 rounded\",\n                orientation === \"horizontal\"\n                    ? \"top-1/2 -left-12 -translate-y-1/2 hover:-translate-y-[calc(50%-2px)] active:-translate-y-[calc(50%-4px)]\"\n                    : \"-top-12 left-1/2 -translate-x-1/2 rotate-90 hover:-translate-x-[calc(50%-2px)] active:-translate-x-[calc(50%-4px)]\",\n                className\n            )}\n            disabled={!canScrollPrev}\n            onClick={scrollPrev}\n            {...props}\n        >\n            <ArrowLeft />\n            <span className=\"sr-only\">Previous slide</span>\n        </Button>\n    )\n}\n\nfunction CarouselNext({\n    className,\n    variant = \"outline\",\n    size = \"icon\",\n    ...props\n}: React.ComponentProps<typeof Button>) {\n    const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n    return (\n        <Button\n            data-slot=\"carousel-next\"\n            variant={variant}\n            size={size}\n            className={cn(\n                \"absolute size-8 rounded\",\n                orientation === \"horizontal\"\n                    ? \"top-1/2 -right-12 -translate-y-1/2 hover:-translate-y-[calc(50%-2px)] active:-translate-y-[calc(50%-4px)]\"\n                    : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90 hover:-translate-x-[calc(50%-2px)] active:-translate-x-[calc(50%-4px)]\",\n                className\n            )}\n            disabled={!canScrollNext}\n            onClick={scrollNext}\n            {...props}\n        >\n            <ArrowRight />\n            <span className=\"sr-only\">Next slide</span>\n        </Button>\n    )\n}\n\nconst CarouselObject = Object.assign(Carousel, {\n    Content: CarouselContent,\n    Item: CarouselItem,\n    Previous: CarouselPrevious,\n    Next: CarouselNext,\n})\n\nexport { CarouselObject as Carousel }"
  },
  {
    "path": "components/retroui/Checkbox.tsx",
    "content": "import { cn } from \"@/lib/utils\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { Check } from \"lucide-react\";\n\nconst checkboxVariants = cva(\"border-2 rounded\", {\n  variants: {\n    variant: {\n      default: \"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground \",\n      outline: \"\",\n      solid:\n        \"data-[state=checked]:bg-foreground data-[state=checked]:text-background\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface CheckboxProps\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nexport const Checkbox = ({\n  className,\n  size,\n  variant,\n  ...props\n}: CheckboxProps) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      checkboxVariants({\n        size,\n        variant,\n      }),\n      className,\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"h-full w-full\">\n      <Check className=\"h-full w-full\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n);\n"
  },
  {
    "path": "components/retroui/Command.tsx",
    "content": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Dialog } from \"@/components/retroui/Dialog\";\nimport { type DialogProps } from \"@radix-ui/react-dialog\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Check, LucideIcon, Search } from \"lucide-react\";\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded bg-background text-foreground border-border shadow-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype CommandDialogProps = DialogProps & { className?: string };\n\nconst CommandDialog = ({\n  children,\n  className,\n  ...props\n}: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <Dialog.Content\n        className={cn(\n          \"overflow-hidden p-0 shadow-lg rounded w-full max-w-md\",\n          className,\n        )}\n      >\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      className=\"flex items-center border-border border-b px-3\"\n      cmdk-input-wrapper=\"\"\n      data-slot=\"command-input\"\n    >\n      <Search className=\"me-2 h-4 w-4 shrink-0 opacity-50 text-foreground\" />\n      <CommandPrimitive.Input\n        className={cn(\n          \"flex h-11 w-full rounded bg-transparent py-3 text-sm outline-hidden text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-body\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-[400px] overflow-auto overscroll-contain transition-[height]  h-[calc(min(300px,var(--cmdk-list-height)))] bg-background\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm text-muted-foreground font-body\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground font-body\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex text-foreground cursor-pointer gap-2 select-none items-center rounded px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground transition-all font-body\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ms-auto text-xs tracking-widest text-muted-foreground font-body\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\ninterface CommandCheckProps {\n  icon?: LucideIcon;\n  className?: string;\n}\n\nfunction CommandCheck({\n  icon: Icon = Check,\n  className,\n  ...props\n}: CommandCheckProps) {\n  return (\n    <Icon\n      data-slot=\"command-check\"\n      data-check=\"true\"\n      className={cn(\"size-4 ms-auto text-primary\", className)}\n      {...props}\n    />\n  );\n}\n\nconst CommandComponent = Object.assign(Command, {\n  Check: CommandCheck,\n  Dialog: CommandDialog,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Input: CommandInput,\n  Item: CommandItem,\n  List: CommandList,\n  Separator: CommandSeparator,\n  Shortcut: CommandShortcut,\n});\n\nexport { CommandComponent as Command };\n"
  },
  {
    "path": "components/retroui/CommandDisplay.tsx",
    "content": "\"use client\";\n\nimport { ClipboardIcon, CheckIcon } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface CommandDisplayProps {\n  command: string;\n}\n\nexport function CommandDisplay({ command }: CommandDisplayProps) {\n  const [copied, setCopied] = useState(false);\n\n  const copyToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(command);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy text: \", err);\n    }\n  };\n\n  const defaultColors = [\n    \"text-blue-300\",\n    \"text-yellow-300\",\n    \"text-green-300\",\n    \"text-purple-300\",\n  ];\n\n  // Split the command into parts for syntax highlighting\n  const parts = command.split(\" \").map((part, index) => {\n    const color = defaultColors[index % defaultColors.length];\n    return (\n      <span key={index} className={color}>\n        {part}\n      </span>\n    );\n  });\n\n  return (\n    <div className=\"relative group flex items-center bg-black/90 pl-4 py-2 font-mono text-xs\">\n      <div className=\"flex-1 whitespace-nowrap overflow-hidden\">\n        <div className=\"overflow-hidden text-ellipsis\">\n          {parts.map((part, index) => (\n            <span key={`part-${index}`}>\n              {part}\n              {index < parts.length - 1 && \" \"}\n            </span>\n          ))}\n        </div>\n      </div>\n      <button\n        onClick={copyToClipboard}\n        className=\"mr-2 p-1 shrink-0 text-gray-400 hover:text-white transition-colors\"\n        aria-label=\"Copy command\"\n      >\n        {copied ? (\n          <CheckIcon className=\"h-4 w-4 text-green-400\" />\n        ) : (\n          <ClipboardIcon className=\"h-4 w-4\" />\n        )}\n      </button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "components/retroui/ContextMenu.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />\n  );\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  );\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  );\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-primary focus:text-primary-foreground data-[state=open]:bg-primary data-[state=open]:text-primary-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"bg-background text-foreground border-2 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-[--radix-context-menu-content-transform-origin] overflow-hidden rounded-sm p-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"bg-background text-foreground border-2 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] origin-[--radix-context-menu-content-transform-origin] overflow-x-hidden overflow-y-auto rounded-sm p-1\",\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-primary focus:text-primary-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-primary focus:text-primary-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-primary focus:text-primary-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst ContextMenuComponent = Object.assign(ContextMenu, {\n  Trigger: ContextMenuTrigger,\n  Content: ContextMenuContent,\n  Item: ContextMenuItem,\n  CheckboxItem: ContextMenuCheckboxItem,\n  RadioItem: ContextMenuRadioItem,\n  Label: ContextMenuLabel,\n  Separator: ContextMenuSeparator,\n  Shortcut: ContextMenuShortcut,\n  Group: ContextMenuGroup,\n  Portal: ContextMenuPortal,\n  Sub: ContextMenuSub,\n  SubContent: ContextMenuSubContent,\n  SubTrigger: ContextMenuSubTrigger,\n  RadioGroup: ContextMenuRadioGroup,\n});\n\nexport { ContextMenuComponent as ContextMenu };\n"
  },
  {
    "path": "components/retroui/Dialog.tsx",
    "content": "\"use client\";\n\nimport * as ReactDialog from \"@radix-ui/react-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { HTMLAttributes, ReactNode } from \"react\";\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\nimport { X } from \"lucide-react\";\n\nconst Dialog = ReactDialog.Root;\nconst DialogTrigger = ReactDialog.Trigger;\n\nconst overlayVariants = cva(\n  ` fixed bg-black/80 font-head\n    data-[state=open]:fade-in-0\n    data-[state=open]:animate-in \n    data-[state=closed]:animate-out \n    data-[state=closed]:fade-out-0 \n  `,\n  {\n    variants: {\n      variant: {\n        default: \"inset-0 z-50 bg-black/85\",\n        none: \"fixed bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\ninterface IDialogBackgroupProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof overlayVariants> {}\n\nconst DialogBackdrop = React.forwardRef<HTMLDivElement, IDialogBackgroupProps>(\n  function DialogBackdrop(inputProps: IDialogBackgroupProps, forwardedRef) {\n    const { variant = \"default\", className, ...props } = inputProps;\n\n    return (\n      <ReactDialog.Overlay\n        className={cn(overlayVariants({ variant }), className)}\n        ref={forwardedRef}\n        {...props}\n      />\n    );\n  },\n);\nDialogBackdrop.displayName = \"DialogBackdrop\";\n\nconst dialogVariants = cva(\n  `fixed left-[50%] top-[50%] z-50 grid rounded overflow-hidden w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-2 bg-background shadow-lg duration-200 \n  data-[state=open]:animate-in \n  data-[state=open]:fade-in-0 \n  data-[state=open]:zoom-in-95 \n  data-[state=closed]:animate-out \n  data-[state=closed]:fade-out-0 \n  data-[state=closed]:zoom-out-95`,\n  {\n    variants: {\n      size: {\n        auto: \"max-w-fit\",\n        sm: \"lg:max-w-[30%]\",\n        md: \"lg:max-w-[40%]\",\n        lg: \"lg:max-w-[50%]\",\n        xl: \"lg:max-w-[60%]\",\n        \"2xl\": \"lg:max-w-[70%]\",\n        \"3xl\": \"lg:max-w-[80%]\",\n        \"4xl\": \"lg:max-w-[90%]\",\n        screen: \"max-w-[100%]\",\n      },\n    },\n    defaultVariants: {\n      size: \"auto\",\n    },\n  },\n);\n\ninterface IDialogContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogVariants> {\n  overlay?: IDialogBackgroupProps;\n}\n\nconst DialogContent = React.forwardRef<HTMLDivElement, IDialogContentProps>(\n  function DialogContent(inputProps: IDialogContentProps, forwardedRef) {\n    const {\n      children,\n      size = \"auto\",\n      className,\n      overlay,\n      ...props\n    } = inputProps;\n\n    return (\n      <ReactDialog.Portal>\n        <DialogBackdrop {...overlay} />\n        <ReactDialog.Content\n          className={cn(dialogVariants({ size }), className)}\n          ref={forwardedRef}\n          {...props}\n        >\n          <VisuallyHidden>\n            <ReactDialog.Title />\n          </VisuallyHidden>\n          <div className=\"flex flex-col relative\">{children}</div>\n        </ReactDialog.Content>\n      </ReactDialog.Portal>\n    );\n  },\n);\nDialogContent.displayName = \"DialogContent\";\n\ninterface IDialogDescriptionProps extends HTMLAttributes<HTMLDivElement> {}\nconst DialogDescription = ({\n  children,\n  className,\n  ...props\n}: IDialogDescriptionProps) => {\n  return (\n    <ReactDialog.Description className={cn(className)} {...props}>\n      {children}\n    </ReactDialog.Description>\n  );\n};\n\nconst dialogFooterVariants = cva(\n  \"flex items-center justify-end border-t-2 min-h-12 gap-4 px-4 py-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n      },\n      position: {\n        fixed: \"sticky bottom-0\",\n        static: \"static\",\n      },\n    },\n    defaultVariants: {\n      position: \"fixed\",\n    },\n  },\n);\n\nexport interface IDialogFooterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogFooterVariants> {}\n\nconst DialogFooter = ({\n  children,\n  className,\n  position,\n  variant,\n  ...props\n}: IDialogFooterProps) => {\n  return (\n    <div\n      className={cn(dialogFooterVariants({ position, variant }), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst dialogHeaderVariants = cva(\n  \"flex items-center justify-between border-b-2 px-4 min-h-12\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground\",\n      },\n      position: {\n        fixed: \"sticky top-0\",\n        static: \"static\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      position: \"static\",\n    },\n  },\n);\n\nconst DialogHeaderDefaultLayout = ({ children }: { children: ReactNode }) => {\n  return (\n    <>\n      {children}\n      <DialogTrigger title=\"Close pop-up\" className=\"cursor-pointer\" asChild>\n        <X />\n      </DialogTrigger>\n    </>\n  );\n};\n\ninterface IDialogHeaderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogHeaderVariants>,\n    ReactDialog.DialogTitleProps {}\n\nconst DialogHeader = ({\n  children,\n  className,\n  position,\n  variant,\n  asChild,\n  ...props\n}: IDialogHeaderProps) => {\n  return (\n    <div\n      className={cn(dialogHeaderVariants({ position, variant }), className)}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <DialogHeaderDefaultLayout>{children}</DialogHeaderDefaultLayout>\n      )}\n    </div>\n  );\n};\n\nconst DialogComponent = Object.assign(Dialog, {\n  Trigger: DialogTrigger,\n  Header: DialogHeader,\n  Content: DialogContent,\n  Description: DialogDescription,\n  Footer: DialogFooter,\n});\n\nexport { DialogComponent as Dialog };\n"
  },
  {
    "path": "components/retroui/Drawer.tsx",
    "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b data-[vaul-drawer-direction=top]:border-b-2\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t data-[vaul-drawer-direction=bottom]:border-t-2\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l-2 data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r-2 data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-foreground mx-auto mt-4 hidden h-1 w-[60px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-xl font-head font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nconst DrawerComponent = Object.assign(Drawer, {\n    Trigger: DrawerTrigger,\n    Portal: DrawerPortal,\n    Overlay: DrawerOverlay,\n    Close: DrawerClose,\n    Content: DrawerContent,\n    Header: DrawerHeader,\n    Footer: DrawerFooter,\n    Title: DrawerTitle,\n    Description: DrawerDescription,\n});\n\nexport { DrawerComponent as Drawer };"
  },
  {
    "path": "components/retroui/Empty.tsx",
    "content": "import { Text } from \"@/components/retroui/Text\";\nimport { cn } from \"@/lib/utils\";\nimport { Ghost } from \"lucide-react\";\nimport { HTMLAttributes } from \"react\";\n\ninterface IEmptyProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nconst Empty = ({ className, ...props }: IEmptyProps) => {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center p-4 md:p-8 border-2 rounded shadow-md transition-all hover:shadow-none bg-card text-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\nEmpty.displayName = \"Empty\";\n\nconst EmptyContent = ({ className, ...props }: IEmptyProps) => {\n  return (\n    <div\n      className={cn(\"flex flex-col items-center gap-3\", className)}\n      {...props}\n    />\n  );\n};\nEmptyContent.displayName = \"Empty.Content\";\n\nconst EmptyIcon = ({ children, className, ...props }: IEmptyProps) => {\n  return (\n    <div className={cn(className)} {...props}>\n      {children || <Ghost className=\"w-full h-full\" />}\n    </div>\n  );\n};\nEmptyIcon.displayName = \"Empty.Icon\";\n\nconst EmptyTitle = ({ className, ...props }: IEmptyProps) => {\n  return (\n    <Text\n      as=\"h3\"\n      className={cn(\"text-lg md:text-2xl font-bold\", className)}\n      {...props}\n    />\n  );\n};\nEmptyTitle.displayName = \"Empty.Title\";\n\nconst EmptySeparator = ({ className, ...props }: IEmptyProps) => {\n  return <div role=\"separator\" className={cn(\"w-full h-1 bg-primary\", className)} {...props} />;\n};\nEmptySeparator.displayName = \"Empty.Separator\";\n\nconst EmptyDescription = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLParagraphElement>) => (\n  <p\n    className={cn(\"text-muted-foreground max-w-[320px]\", className)}\n    {...props}\n  />\n);\nEmptyDescription.displayName = \"Empty.Description\";\n\nconst EmptyComponent = Object.assign(Empty, {\n  Content: EmptyContent,\n  Icon: EmptyIcon,\n  Title: EmptyTitle,\n  Separator: EmptySeparator,\n  Description: EmptyDescription,\n});\n\nexport { EmptyComponent as Empty };\n"
  },
  {
    "path": "components/retroui/IconButton.tsx",
    "content": "import React, { ButtonHTMLAttributes } from \"react\";\n\ninterface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n  variant?: \"primary\" | \"outline\" | \"link\";\n}\n\nexport function IconButton({\n  children,\n  size = \"md\",\n  className = \"\",\n  variant = \"primary\",\n  ...props\n}: ButtonProps) {\n  const sizeClasses = {\n    sm: \"p-2\",\n    md: \"p-3\",\n    lg: \"p-4\",\n  };\n\n  const variantClasses = {\n    primary:\n      \"bg-primary text-black border-2 border-black hover:bg-primary-hover\",\n    outline: \"bg-transparent text-black border-2 border-black\",\n    link: \"bg-transparent text-primary hover:underline\",\n  };\n\n  return (\n    <button\n      className={`font-head border-2 border-black shadow-md hover:shadow-xs transition-all ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n"
  },
  {
    "path": "components/retroui/Input.tsx",
    "content": "import React, { InputHTMLAttributes } from \"react\";\n\ninterface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  className?: string;\n}\n\nexport const Input: React.FC<InputProps> = ({\n  type = \"text\",\n  placeholder = \"Enter text\",\n  className = \"\",\n  ...props\n}) => {\n  return (\n    <input\n      type={type}\n      placeholder={placeholder}\n      className={`px-4 py-2 w-full rounded border-2 shadow-md transition focus:outline-hidden focus:shadow-xs ${\n        props[\"aria-invalid\"]\n          ? \"border-destructive text-destructive shadow-xs shadow-destructive\"\n          : \"\"\n      } ${className}`}\n      {...props}\n    />\n  );\n};\n"
  },
  {
    "path": "components/retroui/Label.tsx",
    "content": "import * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst labelVariants = cva(\n  \"leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n);\n\nexport const Label = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) => (\n  <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />\n);\n"
  },
  {
    "path": "components/retroui/Loader.tsx",
    "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst loaderVariants = cva(\"flex gap-1\", {\n  variants: {\n    variant: {\n      default: \"[&>div]:bg-primary [&>div]:border-border\",\n      secondary:\n        \"[&>div]:bg-secondary [&>div]:border-border\",\n      outline: \"[&>div]:bg-transparent [&>div]:border-border\",\n    },\n    size: {\n      sm: \"[&>div]:w-2 [&>div]:h-2\",\n      md: \"[&>div]:w-3 [&>div]:h-3\",\n      lg: \"[&>div]:w-4 [&>div]:h-4\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface LoaderProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"color\">,\n    VariantProps<typeof loaderVariants> {\n  asChild?: boolean;\n  count?: number; // number of bouncing dots\n  duration?: number; // animation duration in seconds\n  delayStep?: number; // delay in ms\n}\n\nconst Loader = React.forwardRef<HTMLDivElement, LoaderProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      count = 3,\n      duration = 0.5,\n      delayStep = 100,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        className={cn(loaderVariants({ variant, size }), className)}\n        ref={ref}\n        role=\"status\"\n        aria-label=\"Loading...\"\n        {...props}\n      >\n        {Array.from({ length: count }).map((_, i) => (\n          <div\n            key={i}\n            className=\"border-2 animate-bounce\"\n            style={{\n              animationDuration: `${duration}s`,\n              animationIterationCount: \"infinite\",\n              animationDelay: `${i * delayStep}ms`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  },\n);\n\nLoader.displayName = \"Loader\";\nexport { Loader };\n"
  },
  {
    "path": "components/retroui/Login.tsx",
    "content": "import React from \"react\";\nimport { Text } from \"./Text\";\nimport { Input } from \"./Input\";\nimport { Button } from \"./Button\";\nimport Link from \"next/link\";\n\nexport function Login() {\n  return (\n    <div className=\"max-w-80 p-4  border-2 border-black shadow-md space-y-3\">\n      <div className=\"text-center\">\n        <Text as=\"h2\">Login</Text>\n      </div>\n      <form className=\"flex flex-col gap-5 \">\n        <div className=\"flex flex-col items-center justify-center\">\n          <label htmlFor=\"email\" className=\"w-11/12\">\n            Email\n          </label>\n          <Input id=\"email\" type=\"email\" placeholder=\"email\" />\n        </div>\n        <div className=\"flex flex-col items-center justify-center\">\n          <label htmlFor=\"password\" className=\"w-11/12\">\n            Password\n          </label>\n          <Input id=\"password\" type=\"password\" placeholder=\"password\" />\n        </div>\n        <div className=\"flex flex-col items-center justify-center py-4 gap-1\">\n          <Button className=\"rounded-full active:shadow-none active:scale-95\">\n            Submit\n          </Button>\n          <div className=\"px-4 py-2 space-x-1\">\n            <span>Don&apos;t have an account?</span>\n            <Link href=\"/\" className=\"text-primary-700 hover:underline\">\n              sign-in\n            </Link>\n          </div>\n        </div>\n      </form>\n    </div>\n  );\n}\n"
  },
  {
    "path": "components/retroui/Menu.tsx",
    "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport React, { ComponentPropsWithoutRef } from \"react\";\n\nconst Menu = DropdownMenu.Root;\nconst Trigger = DropdownMenu.Trigger;\n\ninterface IMenuContent\n  extends ComponentPropsWithoutRef<typeof DropdownMenu.Content> {}\n\nconst Content = ({ className, ...props }: IMenuContent) => (\n  <DropdownMenu.Portal>\n    <DropdownMenu.Content\n      side=\"bottom\"\n      align=\"start\"\n      className={cn(\n        \"bg-white border-2 shadow-md absolute top-2 min-w-20\",\n        className,\n      )}\n      {...props}\n    />\n  </DropdownMenu.Portal>\n);\n\nconst MenuItem = React.forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof DropdownMenu.Item>\n>(({ className, ...props }, ref) => (\n  <DropdownMenu.Item\n    ref={ref}\n    className={cn(\n      \"relative text-black flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-primary focus:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  />\n));\nMenuItem.displayName = \"MenuItem\";\n\nconst MenuComponent = Object.assign(Menu, {\n  Trigger,\n  Content,\n  Item: MenuItem,\n});\n\nexport { MenuComponent as Menu };\n"
  },
  {
    "path": "components/retroui/Popover.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\n\nimport { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst popoverContentVariants = cva(\n  \"z-50 w-72 border-2 bg-background p-4 text-popover-foreground  outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]\",\n);\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &\n    VariantProps<typeof popoverContentVariants>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        popoverContentVariants({\n          className,\n        }),\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nconst PopoverObject = Object.assign(Popover, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Anchor: PopoverAnchor,\n});\n\nexport { PopoverObject as Popover };\n"
  },
  {
    "path": "components/retroui/ProductCard.tsx",
    "content": "import React from \"react\";\nimport { Button } from \"./Button\";\n\nexport function ProductCard() {\n  return (\n    <div className=\"max-w-80 p-4 border-2 border-black\">\n      <img\n        alt=\"product image\"\n        src=\"https://images.unsplash.com/photo-1596998791568-386ef5297c2e?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n      />\n      <div className=\"mt-4 space-y-4\">\n        <h3 className=\"font-head text-3xl font-medium mb-1\">Classic Gameboy</h3>\n        <div className=\"flex justify-between items-center\">\n          <span className=\"text-lg font-semibold\">$29.99</span>\n          <Button>Add To Cart</Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "components/retroui/Progress.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative h-4 w-full overflow-hidden bg-background border-2\",\n      className,\n    )}\n    {...props}\n  >\n    <ProgressPrimitive.Indicator\n      className=\"h-full w-full flex-1 bg-primary transition-all\"\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n));\nProgress.displayName = ProgressPrimitive.Root.displayName;\n\nexport { Progress };\n"
  },
  {
    "path": "components/retroui/Radio.tsx",
    "content": "import { cn } from \"@/lib/utils\";\nimport * as RadioPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst radioVariants = cva(\"border-border border-2\", {\n  variants: {\n    variant: {\n      default: \"\",\n      outline: \"\",\n      solid: \"\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nconst radioIndicatorVariants = cva(\"flex \", {\n  variants: {\n    variant: {\n      default: \"bg-primary border-2 border-border\",\n      outline: \"border-2 border-border\",\n      solid: \"bg-border\",\n    },\n    size: {\n      sm: \"h-2 w-2\",\n      md: \"h-2.5 w-2.5\",\n      lg: \"h-3.5 w-3.5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface RadioGroupProps\n  extends React.ComponentProps<typeof RadioPrimitive.Root> {}\n\nexport const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (\n  <RadioPrimitive.Root className={cn(\"grid gap-2\", className)} {...props} />\n);\n\ninterface RadioProps\n  extends React.ComponentProps<typeof RadioPrimitive.Item>,\n    VariantProps<typeof radioVariants> {}\n\nexport const RadioItem = ({\n  children,\n  className,\n  size,\n  variant,\n  ...props\n}: RadioProps) => (\n  <RadioPrimitive.Item\n    {...props}\n    className={cn(\n      radioVariants({\n        size,\n        variant,\n      }),\n      className,\n    )}\n  >\n    <RadioPrimitive.Indicator className=\"flex justify-center items-center\">\n      <span className={radioIndicatorVariants({ size, variant })}></span>\n    </RadioPrimitive.Indicator>\n    {children}\n  </RadioPrimitive.Item>\n);\n\nconst RadioComponent = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport { RadioComponent as RadioGroup };\n"
  },
  {
    "path": "components/retroui/Select.tsx",
    "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\";\nimport React from \"react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectTrigger = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        \"flex h-10 rounded min-w-40 items-center shadow-md focus:shadow-xs justify-between border-2 border-input border-border bg-transparent px-4 py-2 placeholder:text-muted-foreground outline-none focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"ml-2 h-4 w-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectIcon = SelectPrimitive.Icon;\n\nconst SelectContent = ({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: SelectPrimitive.SelectContentProps) => {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          \"relative z-50 min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.ScrollUpButton className=\"flex cursor-default items-center justify-center py-1 text-muted-foreground\">\n          <ChevronUp className=\"h-4 w-4\" />\n        </SelectPrimitive.ScrollUpButton>\n        <SelectPrimitive.Viewport\n          className={cn(\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectPrimitive.ScrollDownButton className=\"flex cursor-default items-center justify-center py-1 text-muted-foreground\">\n          <ChevronDown className=\"h-4 w-4\" />\n        </SelectPrimitive.ScrollDownButton>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectItem = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectItemProps) => (\n  <SelectPrimitive.Item\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-none data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground focus:bg-primary focus:text-primary-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4 text-foreground\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n  </SelectPrimitive.Item>\n);\nconst SelectLabel = SelectPrimitive.Label;\nconst SelectSeparator = SelectPrimitive.Separator;\n\nconst SelectObj = Object.assign(Select, {\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Content: SelectContent,\n  Group: SelectGroup,\n  Item: SelectItem,\n  Label: SelectLabel,\n  Separator: SelectSeparator,\n});\n\nexport { SelectObj as Select };\n"
  },
  {
    "path": "components/retroui/Slider.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <SliderPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex w-full touch-none select-none items-center\",\n      className,\n    )}\n    {...props}\n  >\n    <SliderPrimitive.Track className=\"relative h-3 w-full grow overflow-hidden bg-background border-2\">\n      <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n    </SliderPrimitive.Track>\n    <SliderPrimitive.Thumb className=\"block h-4.5 w-4.5 border-2 bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderPrimitive.Root>\n));\nSlider.displayName = SliderPrimitive.Root.displayName;\n\nexport { Slider };\n"
  },
  {
    "path": "components/retroui/Sonner.tsx",
    "content": "\"use client\";\n\nimport { Toaster as Sonner } from \"sonner\";\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  return (\n    <Sonner\n      toastOptions={{\n        classNames: {\n          toast:\n            \"h-auto w-full p-4 bg-background border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border flex items-center relative\",\n          description:\n            \"group-[.toast]:text-muted-foreground ml-2 text-sm font-sans\",\n          actionButton:\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 bg-background border-border shadow hover:shadow-xs hover:translate-[2px] duration-200 transition-all focus:shadow-none border-2 ml-auto h-fit min-w-fit\",\n          cancelButton:\n            \"group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 text-sm bg-background border-border shadow hover:shadow-xs hover:translate-[2px] duration-200 transition-all focus:shadow-none border-2 ml-auto h-fit min-w-fit\",\n          title: \"ml-2 font-sans\",\n          closeButton:\n            \"absolute bg-background -top-1 -left-1 rounded-full p-0.5\",\n        },\n        unstyled: true,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n"
  },
  {
    "path": "components/retroui/Switch.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary\",\n      className,\n    )}\n    {...props}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background\",\n      )}\n    />\n  </SwitchPrimitives.Root>\n);\n\nexport { Switch };\n"
  },
  {
    "path": "components/retroui/Tab.tsx",
    "content": "import { cn } from \"@/lib/utils\";\nimport {\n  Tab,\n  TabGroup,\n  TabList,\n  TabListProps,\n  TabPanel,\n  TabPanelProps,\n  TabPanels,\n  TabProps,\n} from \"@headlessui/react\";\n\nconst Tabs = TabGroup;\nconst TabsPanels = TabPanels;\n\ninterface ITabsTriggerList extends TabListProps {\n  className?: string;\n}\nconst TabsTriggerList = ({\n  children,\n  className,\n  ...props\n}: ITabsTriggerList) => {\n  return (\n    <TabList className={cn(\"flex flex-row space-x-2 w-full\", className)} {...props}>\n      {children}\n    </TabList>\n  );\n};\n\ninterface ITabsTrigger extends TabProps {\n  className?: string;\n}\nconst TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {\n  return (\n    <Tab\n      className={cn(\n        \"px-4 py-1 border-2 border-transparent data-selected:border-border data-selected:bg-primary data-selected:text-primary-foreground data-selected:font-semibold focus:outline-hidden\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Tab>\n  );\n};\n\ninterface ITabsContent extends TabPanelProps {\n  className?: string;\n}\nconst TabsContent = ({ children, className, ...props }: ITabsContent) => {\n  return (\n    <TabPanel\n      className={cn(\"border-2 border-border mt-2 p-4 w-full\", className)}\n      {...props}\n    >\n      {children}\n    </TabPanel>\n  );\n};\n\nexport { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList };\n"
  },
  {
    "path": "components/retroui/Table.tsx",
    "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n    HTMLTableElement,\n    React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n    <div className=\"relative h-full w-full overflow-auto\">\n        <table\n            ref={ref}\n            className={cn(\"w-full caption-bottom text-sm border-2 shadow-lg\", className)}\n            {...props}\n        />\n    </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n    HTMLTableSectionElement,\n    React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n    <thead ref={ref} className={cn(\"[&_tr]:border-b bg-primary text-primary-foreground font-head\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n    HTMLTableSectionElement,\n    React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n    <tbody\n        ref={ref}\n        className={cn(\"[&_tr:last-child]:border-0\", className)}\n        {...props}\n    />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n    HTMLTableSectionElement,\n    React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n    <tfoot\n        ref={ref}\n        className={cn(\n            \"border-t bg-accent text-accent-foreground font-medium [&>tr]:last:border-b-0\",\n            className\n        )}\n        {...props}\n    />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n    HTMLTableRowElement,\n    React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n    <tr\n        ref={ref}\n        className={cn(\n            \"border-b transition-colors hover:bg-primary/50 hover:text-primary-foreground data-[state=selected]:bg-muted\",\n            className\n        )}\n        {...props}\n    />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n    HTMLTableCellElement,\n    React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n    <th\n        ref={ref}\n        className={cn(\n            \"h-10 md:h-12 px-4 text-left align-middle font-medium text-primary-foreground [&:has([role=checkbox])]:pr-0\",\n            className\n        )}\n        {...props}\n    />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n    HTMLTableCellElement,\n    React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n    <td\n        ref={ref}\n        className={cn(\"p-2 md:p-3 align-middle [&:has([role=checkbox])]:pr-0\", className)}\n        {...props}\n    />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n    HTMLTableCaptionElement,\n    React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n    <caption\n        ref={ref}\n        className={cn(\"my-2 text-sm text-muted-foreground\", className)}\n        {...props}\n    />\n))\nTableCaption.displayName = \"TableCaption\"\n\nconst TableObj = Object.assign(Table, {\n    Header: TableHeader,\n    Body: TableBody,\n    Footer: TableFooter,\n    Row: TableRow,\n    Head: TableHead,\n    Cell: TableCell,\n    Caption: TableCaption,\n})\n\nexport {\n    TableObj as Table,\n}"
  },
  {
    "path": "components/retroui/TableOfContents.tsx",
    "content": "\n\"use client\";\n\nimport { cn } from '@/lib/utils';\nimport React, { useEffect, useState } from 'react';\n\ninterface TOCItem {\n    title: string;\n    url: string;\n    level: number;\n    items?: TOCItem[];\n}\n\ninterface ManualTOCItem {\n    id: string;\n    title: string;\n    depth: number;\n}\n\ninterface TableOfContentsProps {\n    depth?: number;\n    className?: string;\n    children?: React.ReactNode;\n    data?: ManualTOCItem[];\n}\n\nfunction generateTOCFromDOM(depth: number = 6): TOCItem[] {\n    const headings: NodeListOf<HTMLHeadingElement> = document.querySelectorAll(\n        Array.from({ length: depth }, (_, i) => `h${i + 1}`).join(', ')\n    );\n\n    const items: TOCItem[] = [];\n    const stack: TOCItem[] = [];\n\n    headings.forEach((heading) => {\n        const level = parseInt(heading.tagName.charAt(1));\n        const id = heading.id || heading.textContent?.toLowerCase().replace(/\\s+/g, '-').replace(/[^\\w-]/g, '') || '';\n\n        if (!heading.id && id) {\n            heading.id = id;\n        }\n\n        const item: TOCItem = {\n            title: heading.textContent || '',\n            url: `#${id}`,\n            level,\n        };\n\n        while (stack.length > 0 && stack[stack.length - 1].level >= level) {\n            stack.pop();\n        }\n\n        if (stack.length === 0) {\n            items.push(item);\n        } else {\n            const parent = stack[stack.length - 1];\n            if (!parent.items) parent.items = [];\n            parent.items.push(item);\n        }\n\n        stack.push(item);\n    });\n\n    return items;\n}\n\nfunction convertManualDataToTOC(data: ManualTOCItem[]): TOCItem[] {\n    const items: TOCItem[] = [];\n    const stack: TOCItem[] = [];\n\n    data.forEach((item) => {\n        const tocItem: TOCItem = {\n            title: item.title,\n            url: `#${item.id}`,\n            level: item.depth,\n        };\n\n        while (stack.length > 0 && stack[stack.length - 1].level >= item.depth) {\n            stack.pop();\n        }\n\n        if (stack.length === 0) {\n            items.push(tocItem);\n        } else {\n            const parent = stack[stack.length - 1];\n            if (!parent.items) parent.items = [];\n            parent.items.push(tocItem);\n        }\n\n        stack.push(tocItem);\n    });\n\n    return items;\n}\n\nfunction renderTOCItems(items: TOCItem[], level = 0, activeId: string | null) {\n    if (!items || items.length === 0) return null;\n\n    return (\n        <ul className={`space-y-1 ${level > 0 ? 'ml-4 mt-1' : ''}`}>\n            {items.map((item, index) => {\n                const isActive = activeId === item.url.substring(1);\n                return (\n                    <li key={index}>\n                        <a\n                            href={item.url}\n                            className={`text-sm max-w-full truncate transition-colors block py-1 border-l-2 pl-2 ${\n                                isActive \n                                    ? 'text-accent-foreground border-border bg-accent' \n                                    : 'border-transparent hover:border-border hover:text-foreground'\n                            }`}\n                        >\n                            {item.title}\n                        </a>\n                        {item.items && renderTOCItems(item.items, level + 1, activeId)}\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n\nexport function TableOfContents({\n    depth = 2,\n    className = \"\",\n    children,\n    data,\n}: TableOfContentsProps) {\n    const [tocItems, setTocItems] = useState<TOCItem[]>([]);\n    const [activeId, setActiveId] = useState<string | null>(null);\n\n    useEffect(() => {\n        if (data) {\n            const items = convertManualDataToTOC(data);\n            setTocItems(items);\n            return;\n        }\n\n        const items = generateTOCFromDOM(depth);\n        setTocItems(items);\n\n        const observer = new MutationObserver(() => {\n            const updatedItems = generateTOCFromDOM(depth);\n            setTocItems(updatedItems);\n        });\n\n        observer.observe(document.body, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['id']\n        });\n\n        return () => observer.disconnect();\n    }, [depth, data]);\n\n    useEffect(() => {\n        const observer = new IntersectionObserver(\n            (entries) => {\n                entries.forEach((entry) => {\n                    if (entry.isIntersecting) {\n                        setActiveId(entry.target.id);\n                    }\n                });\n            },\n            { rootMargin: '-20% 0% -35% 0%' }\n        );\n\n        const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');\n        headings.forEach((heading) => observer.observe(heading));\n\n        return () => observer.disconnect();\n    }, []);\n\n    if (tocItems.length === 0) {\n        return null;\n    }\n\n    return (\n        <div className={cn(\"border-2 shadow-md p-4 rounded w-52 h-60 overflow-y-auto sidebar-scroll\", className)}>\n            {children}\n            {renderTOCItems(tocItems, 0, activeId)}\n        </div>\n    );\n}"
  },
  {
    "path": "components/retroui/Text.tsx",
    "content": "import { ElementType, HTMLAttributes } from \"react\";\nimport { VariantProps, cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst textVariants = cva(\"font-head\", {\n  variants: {\n    as: {\n      p: \"font-sans text-base\",\n      li: \"font-sans text-base\",\n      a: \"font-sans text-base hover:underline underline-offset-2 decoration-primary\",\n      h1: \"text-4xl lg:text-5xl font-bold\",\n      h2: \"text-3xl lg:text-4xl font-semibold\",\n      h3: \"text-2xl font-medium\",\n      h4: \"text-xl font-normal\",\n      h5: \"text-lg font-normal\",\n      h6: \"text-base font-normal\",\n    },\n  },\n  defaultVariants: {\n    as: \"p\",\n  },\n});\n\ninterface TextProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"className\">,\n    VariantProps<typeof textVariants> {\n  className?: string;\n}\n\nexport const Text = (props: TextProps) => {\n  const { className, as, ...otherProps } = props;\n  const Tag: ElementType = as || \"p\";\n\n  return (\n    <Tag className={cn(textVariants({ as }), className)} {...otherProps} />\n  );\n};\n"
  },
  {
    "path": "components/retroui/Textarea.tsx",
    "content": "import React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function Textarea({\n  type = \"text\",\n  placeholder = \"Enter text...\",\n  className = \"\",\n  ...props\n}) {\n  return (\n    <textarea\n      placeholder={placeholder}\n      rows={4}\n      className={cn(\n        \"px-4 py-2 w-full border-2 rounded border-input shadow-md transition focus:outline-hidden focus:shadow-xs placeholder:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "components/retroui/Toggle.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleVariants = cva(\n    \"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\",\n    {\n        variants: {\n            variant: {\n                default:\n                    \"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted\",\n                outlined:\n                    \"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n                solid: \"border-2 border-input bg-transparent hover:bg-secondary hover:text-secondary-foreground hover:border-secondary data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground data-[state=on]:border-secondary\",\n                \"outline-muted\":\n                    \"border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted\",\n            },\n            size: {\n                default: \"h-10 px-3 min-w-10\",\n                sm: \"h-9 px-2.5 min-w-9\",\n                lg: \"h-11 px-5 min-w-11\",\n            },\n        },\n        defaultVariants: {\n            variant: \"default\",\n            size: \"default\",\n        },\n    },\n);\n\nconst Toggle = React.forwardRef<\n    React.ElementRef<typeof TogglePrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n        VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n    <TogglePrimitive.Root\n        ref={ref}\n        className={cn(toggleVariants({ variant, size, className }))}\n        {...props}\n    />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\nexport { Toggle, toggleVariants };\n"
  },
  {
    "path": "components/retroui/ToggleGroup.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { toggleVariants } from \"./Toggle\";\n\nconst ToggleGroupContext = React.createContext<\n    VariantProps<typeof toggleVariants>\n>({\n    size: \"default\",\n    variant: \"default\",\n});\n\nconst ToggleGroup = React.forwardRef<\n    React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n        VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n    <ToggleGroupPrimitive.Root\n        ref={ref}\n        className={cn(\"flex items-center justify-center gap-1\", className)}\n        {...props}\n    >\n        <ToggleGroupContext.Provider value={{ variant, size }}>\n            {children}\n        </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n));\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;\n\nconst ToggleGroupItem = React.forwardRef<\n    React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n        VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n    const context = React.useContext(ToggleGroupContext);\n\n    return (\n        <ToggleGroupPrimitive.Item\n            ref={ref}\n            className={cn(\n                toggleVariants({\n                    variant: context.variant || variant,\n                    size: context.size || size,\n                }),\n                className,\n            )}\n            {...props}\n        >\n            {children}\n        </ToggleGroupPrimitive.Item>\n    );\n});\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;\n\nexport { ToggleGroup, ToggleGroupItem };\n"
  },
  {
    "path": "components/retroui/Tooltip.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst tooltipContentVariants = cva(\n  \"z-50 overflow-hidden border-2 border-border bg-background px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        primary: \"bg-primary text-primary-foreground\",\n        solid: \"bg-black text-white\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &\n    VariantProps<typeof tooltipContentVariants>\n>(({ className, sideOffset = 4, variant, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        tooltipContentVariants({\n          variant,\n          className,\n        }),\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipObject = Object.assign(Tooltip, {\n  Trigger: TooltipTrigger,\n  Content: TooltipContent,\n  Provider: TooltipProvider,\n});\n\nexport { TooltipObject as Tooltip };\n"
  },
  {
    "path": "components/retroui/charts/AreaChart.tsx",
    "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n  Area,\n  AreaChart as RechartsAreaChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\ninterface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: Record<string, any>[]\n  index: string\n  categories: string[]\n  strokeColors?: string[]\n  fillColors?: string[]\n  tooltipBgColor?: string\n  tooltipBorderColor?: string\n  gridColor?: string\n  valueFormatter?: (value: number) => string\n  showGrid?: boolean\n  showTooltip?: boolean\n  fill?: \"gradient\" | \"solid\"\n  className?: string\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    {\n      data = [],\n      index,\n      categories = [],\n      strokeColors = [\"var(--foreground)\"],\n      fillColors = [\"var(--primary)\"],\n      tooltipBgColor = \"var(--background)\",\n      tooltipBorderColor = \"var(--border)\",\n      gridColor = \"var(--muted)\",\n      valueFormatter = (value: number) => value.toString(),\n      showGrid = true,\n      showTooltip = true,\n      fill = \"gradient\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const chartId = React.useId()\n\n    return (\n      <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsAreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>\n            <defs>\n              {categories.map((category, index) => {\n                const fillColor = fillColors[index] || fillColors[0]\n                const gradientId = `gradient-${chartId}-${category}`\n                return (\n                  <linearGradient key={category} id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    {fill === \"gradient\" ? (\n                      <>\n                        <stop offset=\"5%\" stopColor={fillColor} stopOpacity={0.8} />\n                        <stop offset=\"95%\" stopColor={fillColor} stopOpacity={0} />\n                      </>\n                    ) : (\n                      <stop stopColor={fillColor} stopOpacity={0.6} />\n                    )}\n                  </linearGradient>\n                )\n              })}\n            </defs>\n            \n            {showGrid && (\n              <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\n            )}\n            \n            <XAxis \n              dataKey={index}\n              axisLine={false}\n              tickLine={false}\n              className=\"text-xs fill-muted-foreground\"\n            />\n            \n            <YAxis\n              axisLine={false}\n              tickLine={false}\n              className=\"text-xs fill-muted-foreground\"\n              tickFormatter={valueFormatter}\n            />\n            \n            {showTooltip && (\n              <Tooltip\n                content={({ active, payload, label }) => {\n                  if (!active || !payload?.length) return null\n                  \n                  return (\n                    <div \n                      className=\"border p-2 shadow\"\n                      style={{ \n                        backgroundColor: tooltipBgColor,\n                        borderColor: tooltipBorderColor \n                      }}\n                    >\n                      <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"flex flex-col\">\n                          <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                            {index}\n                          </span>\n                          <span className=\"font-bold text-muted-foreground\">\n                            {label}\n                          </span>\n                        </div>\n                        {payload.map((entry, index) => (\n                          <div key={index} className=\"flex flex-col\">\n                            <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                              {entry.dataKey}\n                            </span>\n                            <span className=\"font-bold\" style={{ color: strokeColors[0] }}>\n                              {valueFormatter(entry.value as number)}\n                            </span>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  )\n                }}\n              />\n            )}\n            \n            {categories.map((category, index) => {\n              const strokeColor = strokeColors[index] || strokeColors[0]\n              const gradientId = `gradient-${chartId}-${category}`\n              \n              return (\n                <Area\n                  key={category}\n                  dataKey={category}\n                  stroke={strokeColor}\n                  fill={`url(#${gradientId})`}\n                  strokeWidth={2}\n                />\n              )\n            })}\n          </RechartsAreaChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  }\n)\n\nAreaChart.displayName = \"AreaChart\"\n\nexport { AreaChart, type AreaChartProps }"
  },
  {
    "path": "components/retroui/charts/BarChart.tsx",
    "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\ninterface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: Record<string, any>[]\n  index: string\n  categories: string[]\n  strokeColors?: string[]\n  fillColors?: string[]\n  tooltipBgColor?: string\n  tooltipBorderColor?: string\n  gridColor?: string\n  valueFormatter?: (value: number) => string\n  showGrid?: boolean\n  showTooltip?: boolean\n  stacked?: boolean\n  alignment?: \"vertical\" | \"horizontal\"\n  className?: string\n}\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (\n    {\n      data = [],\n      index,\n      categories = [],\n      strokeColors = [\"var(--foreground)\"],\n      fillColors = [\"var(--primary)\", \"var(--secondary)\"],\n      tooltipBgColor = \"var(--background)\",\n      tooltipBorderColor = \"var(--border)\",\n      gridColor = \"var(--muted)\",\n      valueFormatter = (value: number) => value.toString(),\n      showGrid = true,\n      showTooltip = true,\n      stacked = false,\n      alignment = \"vertical\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsBarChart\n            data={data}\n            layout={alignment === \"horizontal\" ? \"vertical\" : undefined}\n            margin={{ top: 10, right: 30, left: 0, bottom: 0 }}\n          >\n            {showGrid && (\n              <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\n            )}\n\n            {alignment === \"horizontal\" ? (\n              <>\n                <XAxis\n                  type=\"number\"\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                  tickFormatter={valueFormatter}\n                />\n\n                <YAxis\n                  type=\"category\"\n                  dataKey={index}\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                  width={80}\n                />\n              </>\n            ) : (\n              <>\n                <XAxis\n                  dataKey={index}\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                />\n\n                <YAxis\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                  tickFormatter={valueFormatter}\n                />\n              </>\n            )}\n\n            {showTooltip && (\n              <Tooltip\n                content={({ active, payload, label }) => {\n                  if (!active || !payload?.length) return null\n\n                  return (\n                    <div\n                      className=\"border p-2 shadow\"\n                      style={{\n                        backgroundColor: tooltipBgColor,\n                        borderColor: tooltipBorderColor\n                      }}\n                    >\n                      <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"flex flex-col\">\n                          <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                            {index}\n                          </span>\n                          <span className=\"font-bold text-muted-foreground\">\n                            {label}\n                          </span>\n                        </div>\n                        {payload.map((entry, index) => (\n                          <div key={index} className=\"flex flex-col\">\n                            <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                              {entry.dataKey}\n                            </span>\n                            <span className=\"font-bold\" style={{ color: strokeColors[0] }}>\n                              {valueFormatter(entry.value as number)}\n                            </span>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  )\n                }}\n              />\n            )}\n\n            {categories.map((category, index) => {\n              const fillColor = fillColors[index] || fillColors[0]\n              const strokeColor = strokeColors[index] || strokeColors[0]\n\n              return (\n                <Bar\n                  key={category}\n                  dataKey={category}\n                  fill={fillColor}\n                  stroke={strokeColor}\n                  strokeWidth={1}\n                  stackId={stacked ? \"strokeId\" : undefined} />\n              )\n            })}\n          </RechartsBarChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  }\n)\n\nBarChart.displayName = \"BarChart\"\n\nexport { BarChart, type BarChartProps }"
  },
  {
    "path": "components/retroui/charts/LineChart.tsx",
    "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n  CartesianGrid,\n  Line,\n  LineChart as RechartsLineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\ninterface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: Record<string, any>[]\n  index: string\n  categories: string[]\n  strokeColors?: string[]\n  tooltipBgColor?: string\n  tooltipBorderColor?: string\n  gridColor?: string\n  valueFormatter?: (value: number) => string\n  showGrid?: boolean\n  showTooltip?: boolean\n  strokeWidth?: number\n  dotSize?: number\n  className?: string\n}\n\nconst LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(\n  (\n    {\n      data = [],\n      index,\n      categories = [],\n      strokeColors = [\"var(--foreground)\"],\n      tooltipBgColor = \"var(--background)\",\n      tooltipBorderColor = \"var(--border)\",\n      gridColor = \"var(--muted)\",\n      valueFormatter = (value: number) => value.toString(),\n      showGrid = true,\n      showTooltip = true,\n      strokeWidth = 2,\n      dotSize = 4,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsLineChart data={data} margin={{ top: 0, right: 30, left: 0, bottom: 0 }}>\n            {showGrid && (\n              <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\n            )}\n            \n            <XAxis \n              dataKey={index}\n              axisLine={false}\n              tickLine={false}\n              className=\"text-xs fill-muted-foreground\"\n            />\n            \n            <YAxis\n              axisLine={false}\n              tickLine={false}\n              className=\"text-xs fill-muted-foreground\"\n              tickFormatter={valueFormatter}\n            />\n            \n            {showTooltip && (\n              <Tooltip\n                content={({ active, payload, label }) => {\n                  if (!active || !payload?.length) return null\n                  \n                  return (\n                    <div \n                      className=\"border p-2 shadow\"\n                      style={{ \n                        backgroundColor: tooltipBgColor,\n                        borderColor: tooltipBorderColor \n                      }}\n                    >\n                      <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"flex flex-col\">\n                          <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                            {index}\n                          </span>\n                          <span className=\"font-bold text-muted-foreground\">\n                            {label}\n                          </span>\n                        </div>\n                        {payload.map((entry, index) => (\n                          <div key={index} className=\"flex flex-col\">\n                            <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                              {entry.dataKey}\n                            </span>\n                            <span className=\"font-bold\" style={{ color: entry.color }}>\n                              {valueFormatter(entry.value as number)}\n                            </span>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  )\n                }}\n              />\n            )}\n            \n            {categories.map((category, index) => {\n              const strokeColor = strokeColors[index] || strokeColors[0]\n              \n              return (\n                <Line\n                  key={category}\n                  dataKey={category}\n                  stroke={strokeColor}\n                  strokeWidth={strokeWidth}\n                  dot={{ r: dotSize, fill: strokeColor }}\n                  activeDot={{ r: dotSize + 2, fill: strokeColor }}\n                />\n              )\n            })}\n          </RechartsLineChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  }\n)\n\nLineChart.displayName = \"LineChart\"\n\nexport { LineChart, type LineChartProps }"
  },
  {
    "path": "components/retroui/charts/PieChart.tsx",
    "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n  Cell,\n  Pie,\n  PieChart as RechartsPieChart,\n  ResponsiveContainer,\n  Tooltip,\n} from \"recharts\"\n\ninterface PieChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: Record<string, any>[]\n  dataKey: string\n  nameKey: string\n  colors?: string[]\n  tooltipBgColor?: string\n  tooltipBorderColor?: string\n  valueFormatter?: (value: number) => string\n  showTooltip?: boolean\n  innerRadius?: number\n  outerRadius?: number\n  className?: string\n}\n\nconst PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(\n  (\n    {\n      data = [],\n      dataKey,\n      nameKey,\n      colors = [\"var(--chart-1)\", \"var(--chart-2)\", \"var(--chart-3)\", \"var(--chart-4)\", \"var(--chart-5)\"],\n      tooltipBgColor = \"var(--background)\",\n      tooltipBorderColor = \"var(--border)\",\n      valueFormatter = (value: number) => value.toString(),\n      showTooltip = true,\n      innerRadius = 0,\n      outerRadius = 100,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsPieChart>\n            <Pie\n              data={data}\n              dataKey={dataKey}\n              nameKey={nameKey}\n              cx=\"50%\"\n              cy=\"50%\"\n              innerRadius={innerRadius}\n              outerRadius={outerRadius}\n              isAnimationActive={false}\n              className=\"w-full h-full\"\n            >\n              {data.map((entry, index) => (\n                <Cell \n                  key={`cell-${index}`} \n                  fill={colors[index % colors.length]} \n                />\n              ))}\n            </Pie>\n            \n            {showTooltip && (\n              <Tooltip\n                content={({ active, payload }) => {\n                  if (!active || !payload?.length) return null\n                  \n                  const data = payload[0]\n                  \n                  return (\n                    <div \n                      className=\"border p-2 shadow\"\n                      style={{ \n                        backgroundColor: tooltipBgColor,\n                        borderColor: tooltipBorderColor \n                      }}\n                    >\n                      <div className=\"flex flex-col gap-1\">\n                        <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                          {data.name}\n                        </span>\n                        <span className=\"font-bold text-foreground\">\n                          {valueFormatter(data.value as number)}\n                        </span>\n                      </div>\n                    </div>\n                  )\n                }}\n              />\n            )}\n          </RechartsPieChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  }\n)\n\nPieChart.displayName = \"PieChart\"\n\nexport { PieChart, type PieChartProps }"
  },
  {
    "path": "components/retroui/index.ts",
    "content": "export * from \"./Button\";\nexport * from \"./Input\";\nexport * from \"./Textarea\";\nexport * from \"./Checkbox\";\nexport * from \"./Radio\";\nexport * from \"./Select\";\nexport * from \"./Switch\";\nexport * from \"./Label\";\nexport * from \"./Text\";\nexport * from \"./Accordion\";\nexport * from \"./Alert\";\nexport * from \"./Card\";\nexport * from \"./Avatar\";\nexport * from \"./Badge\";\nexport * from \"./Tab\";\nexport * from \"./Dialog\";\nexport * from \"./Menu\";\nexport * from \"./Progress\";\nexport * from \"./Popover\";\nexport * from \"./Toggle\";\nexport * from \"./ToggleGroup\";\nexport * from \"./Sonner\";\nexport * from \"./Tooltip\";\nexport * from \"./Breadcrumb\";\nexport * from \"./CommandDisplay\";\nexport * from \"./Command\";\nexport * from \"./Loader\";\nexport * from \"./ContextMenu\";\nexport * from \"./Empty\";"
  },
  {
    "path": "config/components.ts",
    "content": "import { lazy } from \"react\";\n\nexport const componentConfig: {\n  core: {\n    [key: string]: {\n      name: string;\n      filePath: string;\n      dependencies?: string[];\n      preview?: React.LazyExoticComponent<() => JSX.Element>;\n    };\n  };\n  examples: {\n    [key: string]: {\n      name: string;\n      filePath: string;\n      preview: React.LazyExoticComponent<() => JSX.Element>;\n    };\n  };\n} = {\n  core: {\n    accordion: {\n      name: \"accordion\",\n      dependencies: [\"@radix-ui/react-accordion\", \"lucide-react\"],\n      filePath: \"components/retroui/Accordion.tsx\",\n    },\n    alert: {\n      name: \"alert\",\n      filePath: \"components/retroui/Alert.tsx\",\n    },\n    areaChart: {\n      name: \"areaChart\",\n      filePath: \"components/retroui/charts/AreaChart.tsx\",\n    },\n    avatar: {\n      name: \"avatar\",\n      filePath: \"components/retroui/Avatar.tsx\",\n    },\n    badge: {\n      name: \"badge\",\n      filePath: \"components/retroui/Badge.tsx\",\n    },\n    barChart: {\n      name: \"barChart\",\n      filePath: \"components/retroui/charts/BarChart.tsx\",\n    },\n    breadcrumb: {\n      name: \"breadcrumb\",\n      filePath: \"components/retroui/Breadcrumb.tsx\",\n    },\n    button: {\n      name: \"button\",\n      filePath: \"components/retroui/Button.tsx\",\n    },\n    calendar: {\n      name: \"calendar\",\n      filePath: \"components/retroui/Calendar.tsx\",\n    },\n    card: {\n      name: \"card\",\n      filePath: \"components/retroui/Card.tsx\",\n    },\n    carousel: {\n      name: \"carousel\",\n      filePath: \"components/retroui/Carousel.tsx\",\n    },\n    checkbox: {\n      name: \"checkbox\",\n      filePath: \"components/retroui/Checkbox.tsx\",\n    },\n    command: {\n      name: \"command\",\n      filePath: \"components/retroui/Command.tsx\",\n    },\n    \"context-menu\": {\n      name: \"context-menu\",\n      filePath: \"components/retroui/ContextMenu.tsx\",\n    },\n    dialog: {\n      name: \"dialog\",\n      filePath: \"components/retroui/Dialog.tsx\",\n    },\n    drawer: {\n      name: \"drawer\",\n      filePath: \"components/retroui/Drawer.tsx\",\n    },\n    empty: {\n      name: \"empty\",\n      filePath: \"components/retroui/Empty.tsx\",\n    },\n    input: {\n      name: \"input\",\n      filePath: \"components/retroui/Input.tsx\",\n    },\n    label: {\n      name: \"label\",\n      filePath: \"components/retroui/Label.tsx\",\n    },\n    lineChart: {\n      name: \"lineChart\",\n      filePath: \"components/retroui/charts/LineChart.tsx\",\n    },\n    loader: {\n      name: \"loader\",\n      filePath: \"components/retroui/Loader.tsx\",\n    },\n    menu: {\n      name: \"menu\",\n      filePath: \"components/retroui/Menu.tsx\",\n    },\n    pieChart: {\n      name: \"pieChart\",\n      filePath: \"components/retroui/charts/PieChart.tsx\",\n    },\n    popover: {\n      name: \"popover\",\n      filePath: \"components/retroui/Popover.tsx\",\n    },\n    progress: {\n      name: \"progress\",\n      filePath: \"components/retroui/Progress.tsx\",\n    },\n    radio: {\n      name: \"radio\",\n      filePath: \"components/retroui/Radio.tsx\",\n    },\n    select: {\n      name: \"select\",\n      filePath: \"components/retroui/Select.tsx\",\n    },\n    slider: {\n      name: \"slider\",\n      dependencies: [\"@radix-ui/react-slider\"],\n      filePath: \"components/retroui/Slider.tsx\",\n    },\n    sonner: {\n      name: \"sonner\",\n      filePath: \"components/retroui/Sonner.tsx\",\n    },\n    switch: {\n      name: \"switch\",\n      filePath: \"components/retroui/Switch.tsx\",\n    },\n    table: {\n      name: \"table\",\n      filePath: \"components/retroui/Table.tsx\",\n    },\n    text: {\n      name: \"text\",\n      filePath: \"components/retroui/Text.tsx\",\n    },\n    toc: {\n      name: \"toc\",\n      filePath: \"components/retroui/TableOfContents.tsx\",\n    },\n    toggle: {\n      name: \"toggle\",\n      filePath: \"components/retroui/Toggle.tsx\",\n    },\n    \"toggle-group\": {\n      name: \"toggle-group\",\n      filePath: \"components/retroui/ToggleGroup.tsx\",\n    },\n    tooltip: {\n      name: \"tooltip\",\n      filePath: \"components/retroui/Tooltip.tsx\",\n    },\n  },\n  examples: {\n    \"accordion-style-default\": {\n      name: \"accordion-style-default\",\n      filePath: \"preview/components/accordion-style-default.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/accordion-style-default\"),\n      ),\n    },\n    \"alert-style-all-status\": {\n      name: \"alert-style-all-status\",\n      filePath: \"preview/components/alert-style-all-status.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/alert-style-all-status\"),\n      ),\n    },\n    \"alert-style-default\": {\n      name: \"alert-style-default\",\n      filePath: \"preview/components/alert-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/alert-style-default\")),\n    },\n    \"alert-style-solid\": {\n      name: \"alert-style-solid\",\n      filePath: \"preview/components/alert-style-solid.tsx\",\n      preview: lazy(() => import(\"@/preview/components/alert-style-solid\")),\n    },\n    \"alert-style-with-icon\": {\n      name: \"alert-style-with-icon\",\n      filePath: \"preview/components/alert-style-with-icon.tsx\",\n      preview: lazy(() => import(\"@/preview/components/alert-style-with-icon\")),\n    },\n    \"area-chart-style-default\": {\n      name: \"chart-style-default\",\n      filePath: \"preview/charts/area-chart-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/area-chart-style-default\")),\n    },\n    \"area-chart-style-multiple\": {\n      name: \"area-chart-style-multiple\",\n      filePath: \"preview/charts/area-chart-style-multiple.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/area-chart-style-multiple\")),\n    },\n    \"area-chart-style-stacked\": {\n      name: \"area-chart-style-stacked\",\n      filePath: \"preview/charts/area-chart-style-stacked.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/area-chart-style-stacked\")),\n    },\n    \"avatar-style-circle\": {\n      name: \"avatar-style-circle\",\n      filePath: \"preview/components/avatar-style-circle.tsx\",\n      preview: lazy(() => import(\"@/preview/components/avatar-style-circle\")),\n    },\n    \"avatar-style-circle-fallbacks\": {\n      name: \"avatar-style-fallbacks\",\n      filePath: \"preview/components/avatar-style-circle-fallbacks.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/avatar-style-circle-fallbacks\"),\n      ),\n    },\n    \"avatar-style-circle-sizes\": {\n      name: \"avatar-style-circle-sizes\",\n      filePath: \"preview/components/avatar-style-circle-sizes.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/avatar-style-circle-sizes\"),\n      ),\n    },\n    \"badge-style-default\": {\n      name: \"badge-style-default\",\n      filePath: \"preview/components/badge-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/badge-style-default\")),\n    },\n    \"badge-style-rounded\": {\n      name: \"badge-style-default\",\n      filePath: \"preview/components/badge-style-rounded.tsx\",\n      preview: lazy(() => import(\"@/preview/components/badge-style-rounded\")),\n    },\n    \"badge-style-sizes\": {\n      name: \"badge-style-sizes\",\n      filePath: \"preview/components/badge-style-sizes.tsx\",\n      preview: lazy(() => import(\"@/preview/components/badge-style-sizes\")),\n    },\n    \"badge-style-variants\": {\n      name: \"badge-style-variants\",\n      filePath: \"preview/components/badge-style-variants.tsx\",\n      preview: lazy(() => import(\"@/preview/components/badge-style-variants\")),\n    },\n    \"bar-chart-style-default\": {\n      name: \"bar-chart-style-default\",\n      filePath: \"preview/charts/bar-chart-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/bar-chart-style-default\")),\n    },\n    \"bar-chart-style-grouped\": {\n      name: \"bar-chart-style-grouped\",\n      filePath: \"preview/charts/bar-chart-style-grouped.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/bar-chart-style-grouped\")),\n    },\n    \"bar-chart-style-horizontal\": {\n      name: \"bar-chart-style-horizontal\",\n      filePath: \"preview/charts/bar-chart-style-horizontal.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/charts/bar-chart-style-horizontal\"),\n      ),\n    },\n    \"bar-chart-style-multiple\": {\n      name: \"bar-chart-style-multiple\",\n      filePath: \"preview/charts/bar-chart-style-multiple.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/bar-chart-style-multiple\")),\n    },\n    \"bar-chart-style-stacked\": {\n      name: \"bar-chart-style-stacked\",\n      filePath: \"preview/charts/bar-chart-style-stacked.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/bar-chart-style-stacked\")),\n    },\n    \"breadcrumb-custom-separator\": {\n      name: \"breadcrumb-custom-separator\",\n      filePath: \"preview/components/breadcrumb-custom-separator.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/breadcrumb-custom-separator\"),\n      ),\n    },\n    \"breadcrumb-link-component\": {\n      name: \"breadcrumb-link-component\",\n      filePath: \"preview/components/breadcrumb-link-component.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/breadcrumb-link-component\"),\n      ),\n    },\n    \"breadcrumb-style-collapsed\": {\n      name: \"breadcrumb-style-collapsed\",\n      filePath: \"preview/components/breadcrumb-style-collapsed.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/breadcrumb-style-collapsed\"),\n      ),\n    },\n    \"breadcrumb-style-default\": {\n      name: \"breadcrumb-style-default\",\n      filePath: \"preview/components/breadcrumb-style-default.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/breadcrumb-style-default\"),\n      ),\n    },\n    \"button-style-default\": {\n      name: \"button-style-default\",\n      filePath: \"preview/components/button-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/button-style-default\")),\n    },\n    \"button-style-icon\": {\n      name: \"button-style-icon\",\n      filePath: \"preview/components/button-style-icon.tsx\",\n      preview: lazy(() => import(\"@/preview/components/button-style-icon\")),\n    },\n    \"button-style-link\": {\n      name: \"button-style-link\",\n      filePath: \"preview/components/button-style-link.tsx\",\n      preview: lazy(() => import(\"@/preview/components/button-style-link\")),\n    },\n    \"button-style-outline\": {\n      name: \"button-style-default\",\n      filePath: \"preview/components/button-style-outline.tsx\",\n      preview: lazy(() => import(\"@/preview/components/button-style-outline\")),\n    },\n    \"button-style-secondary\": {\n      name: \"button-style-secondary\",\n      filePath: \"preview/components/button-style-secondary.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/button-style-secondary\"),\n      ),\n    },\n    \"button-style-with-icon\": {\n      name: \"button-style-with-icon\",\n      filePath: \"preview/components/button-style-with-icon.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/button-style-with-icon\"),\n      ),\n    },\n    \"calendar-style-default\": {\n      name: \"calendar-style-default\",\n      filePath: \"preview/components/calendar-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/calendar-style-default\")),\n    },\n    \"card-style-commerce\": {\n      name: \"card-style-commerce\",\n      filePath: \"preview/components/card-style-commerce.tsx\",\n      preview: lazy(() => import(\"@/preview/components/card-style-commerce\")),\n    },\n    \"card-style-default\": {\n      name: \"card-style-default\",\n      filePath: \"preview/components/card-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/card-style-default\")),\n    },\n    \"card-style-testimonial\": {\n      name: \"card-style-testimonial\",\n      filePath: \"preview/components/card-style-testimonial.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/card-style-testimonial\"),\n      ),\n    },\n    \"carousel-style-default\": {\n      name: \"carousel-style-default\",\n      filePath: \"preview/components/carousel-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/carousel-style-default\")),\n    },\n    \"carousel-style-sizes\": {\n      name: \"carousel-style-sizes\",\n      filePath: \"preview/components/carousel-style-sizes.tsx\",\n      preview: lazy(() => import(\"@/preview/components/carousel-style-sizes\")),\n    },\n    \"carousel-style-vertical\": {\n      name: \"carousel-style-vertical\",\n      filePath: \"preview/components/carousel-style-vertical.tsx\",\n      preview: lazy(() => import(\"@/preview/components/carousel-style-vertical\")),\n    },\n    \"checkbox-style-default\": {\n      name: \"checkbox-style-default\",\n      filePath: \"preview/components/checkbox-style-default.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/checkbox-style-default\"),\n      ),\n    },\n    \"checkbox-style-sizes\": {\n      name: \"checkbox-style-default\",\n      filePath: \"preview/components/checkbox-style-sizes.tsx\",\n      preview: lazy(() => import(\"@/preview/components/checkbox-style-sizes\")),\n    },\n    \"checkbox-style-variants\": {\n      name: \"checkbox-style-toggle\",\n      filePath: \"preview/components/checkbox-style-variants.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/checkbox-style-variants\"),\n      ),\n    },\n    \"command-style-default\": {\n      name: \"command-style-default\",\n      filePath: \"preview/components/command-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/command-style-default\")),\n    },\n    \"command-style-dialog\": {\n      name: \"command-style-dialog\",\n      filePath: \"preview/components/command-style-dialog.tsx\",\n      preview: lazy(() => import(\"@/preview/components/command-style-dialog\")),\n    },\n    \"context-menu-style-default\": {\n      name: \"context-menu-style-default\",\n      filePath: \"preview/components/context-menu-style-default.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/context-menu-style-default\"),\n      ),\n    },\n    \"dialog-style-default\": {\n      name: \"dialog-style-default\",\n      filePath: \"preview/components/dialog-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/dialog-style-default\")),\n    },\n    \"dialog-style-width-variant\": {\n      name: \"dialog-style-width-variant\",\n      filePath: \"preview/components/dialog-style-width-variant.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/dialog-style-width-variant\"),\n      ),\n    },\n    \"dialog-style-with-footer\": {\n      name: \"dialog-style-with-footer\",\n      filePath: \"preview/components/dialog-style-with-footer.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/dialog-style-with-footer\"),\n      ),\n    },\n    \"dialog-style-with-form\": {\n      name: \"dialog-style-with-form\",\n      filePath: \"preview/components/dialog-style-with-form.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/dialog-style-with-form\"),\n      ),\n    },\n    \"drawer-style-default\": {\n      name: \"drawer-style-default\",\n      filePath: \"preview/components/drawer-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/drawer-style-default\")),\n    },\n    \"drawer-style-right-direction\": {\n      name: \"drawer-style-right-direction\",\n      filePath: \"preview/components/drawer-style-right-direction.tsx\",\n      preview: lazy(() => import(\"@/preview/components/drawer-style-right-direction\")),\n    },\n    // \"dropdown-style-default\": {\n    //   name: \"dropdown-style-default\",\n    //   filePath: \"preview/components/dropdown-style-default.tsx\",\n    //   preview: lazy(() => import(\"@/preview/components/dropdown-style-default\")),\n    // },\n    \"input-style-default\": {\n      name: \"input-style-default\",\n      filePath: \"preview/components/input-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/input-style-default\")),\n    },\n    \"input-style-error\": {\n      name: \"input-style-error\",\n      filePath: \"preview/components/input-style-error.tsx\",\n      preview: lazy(() => import(\"@/preview/components/input-style-error\")),\n    },\n    \"input-style-with-label\": {\n      name: \"input-style-with-label\",\n      filePath: \"preview/components/input-style-with-label.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/input-style-with-label\"),\n      ),\n    },\n    \"label-style-default\": {\n      name: \"label-style-default\",\n      filePath: \"preview/components/label-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/label-style-default\")),\n    },\n    \"line-chart-style-default\": {\n      name: \"line-chart-style-default\",\n      filePath: \"preview/charts/line-chart-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/line-chart-style-default\")),\n    },\n    \"line-chart-style-multiple\": {\n      name: \"line-chart-style-multiple\",\n      filePath: \"preview/charts/line-chart-style-multiple.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/line-chart-style-multiple\")),\n    },\n    \"loader-style-custom\": {\n      name: \"loader-style-custom\",\n      filePath: \"preview/components/loader-style-custom.tsx\",\n      preview: lazy(() => import(\"@/preview/components/loader-style-custom\"))\n    },\n    \"loader-style-default\": {\n      name: \"loader-style-default\",\n      filePath: \"preview/components/loader-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/loader-style-default\")),\n    },\n    \"loader-style-outline\": {\n      name: \"loader-style-outline\",\n      filePath: \"preview/components/loader-style-outline.tsx\",\n      preview: lazy(() => import(\"@/preview/components/loader-style-outline\")),\n    },\n    \"loader-style-sizes\": {\n      name: \"loader-style-sizes\",\n      filePath: \"preview/components/loader-style-sizes.tsx\",\n      preview: lazy(() => import(\"@/preview/components/loader-style-sizes\")),\n    },\n    \"loader-style-solid\": {\n      name: \"loader-style-solid\",\n      filePath: \"preview/components/loader-style-solid.tsx\",\n      preview: lazy(() => import(\"@/preview/components/loader-style-solid\")),\n    },\n    \"menu-style-default\": {\n      name: \"menu-style-default\",\n      filePath: \"preview/components/menu-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/menu-style-default\")),\n    },\n    \"pie-chart-style-default\": {\n      name: \"pie-chart-style-default\",\n      filePath: \"preview/charts/pie-chart-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/pie-chart-style-default\")),\n    },\n    \"pie-chart-style-donut\": {\n      name: \"pie-chart-style-donut\",\n      filePath: \"preview/charts/pie-chart-style-donut.tsx\",\n      preview: lazy(() => import(\"@/preview/charts/pie-chart-style-donut\")),\n    },\n    \"popover-style-default\": {\n      name: \"popover-style-default\",\n      filePath: \"preview/components/popover-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/popover-style-default\")),\n    },\n    \"popover-style-default-shadow\": {\n      name: \"popover-style-default-shadow\",\n      filePath: \"preview/components/popover-style-default-shadow.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/popover-style-default-shadow\"),\n      ),\n    },\n    \"progress-style-default\": {\n      name: \"progress-style-default\",\n      filePath: \"preview/components/progress-style-default.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/progress-style-default\"),\n      ),\n    },\n    \"radio-style-default\": {\n      name: \"radio-style-default\",\n      filePath: \"preview/components/radio-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/radio-style-default\")),\n    },\n    \"radio-style-sizes\": {\n      name: \"radio-style-sizes\",\n      filePath: \"preview/components/radio-style-sizes.tsx\",\n      preview: lazy(() => import(\"@/preview/components/radio-style-sizes\")),\n    },\n    \"radio-style-variants\": {\n      name: \"radio-style-variants\",\n      filePath: \"preview/components/radio-style-variants.tsx\",\n      preview: lazy(() => import(\"@/preview/components/radio-style-variants\")),\n    },\n    \"retro-player\": {\n      name: \"retro-player\",\n      filePath: \"preview/components/retro-player.tsx\",\n      preview: lazy(() => import(\"@/preview/components/retro-player\"))\n    },\n    \"select-style-default\": {\n      name: \"select-style-default\",\n      filePath: \"preview/components/select-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/select-style-default\")),\n    },\n    \"slider-style-default\": {\n      name: \"slider-style-default\",\n      filePath: \"preview/components/slider-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/slider-style-default\")),\n    },\n    \"sonner-style-colored-status\": {\n      name: \"sonner-style-colored-status\",\n      filePath: \"preview/components/sonner-style-colored-status.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/sonner-style-colored-status\"),\n      ),\n    },\n    \"sonner-style-default\": {\n      name: \"sonner-style-default\",\n      filePath: \"preview/components/sonner-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/sonner-style-default\")),\n    },\n    \"sonner-style-status\": {\n      name: \"sonner-style-status\",\n      filePath: \"preview/components/sonner-style-status.tsx\",\n      preview: lazy(() => import(\"@/preview/components/sonner-style-status\")),\n    },\n    \"switch-style-default\": {\n      name: \"switch-style-default\",\n      filePath: \"preview/components/switch-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/switch-style-default\")),\n    },\n    \"switch-style-disabled\": {\n      name: \"switch-style-disabled\",\n      filePath: \"preview/components/switch-style-disabled.tsx\",\n      preview: lazy(() => import(\"@/preview/components/switch-style-disabled\")),\n    },\n    \"tab-style-default\": {\n      name: \"typography-p\",\n      filePath: \"preview/components/tab-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/tab-style-default\")),\n    },\n    \"table-style-default\": {\n      name: \"table-style-default\",\n      filePath: \"preview/components/table-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/table-style-default\")),\n    },\n    \"table-with-checkbox\": {\n      name: \"table-with-checkbox\",\n      filePath: \"preview/components/table-with-checkbox.tsx\",\n      preview: lazy(() => import(\"@/preview/components/table-with-checkbox\")),\n    },\n    \"table-with-sticky-header\": {\n      name: \"table-with-sticky-header\",\n      filePath: \"preview/components/table-with-sticky-header.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/table-with-sticky-header\"),\n      ),\n    },\n    \"text-headings\": {\n      name: \"text-headings\",\n      filePath: \"preview/components/text-headings.tsx\",\n      preview: lazy(() => import(\"@/preview/components/text-headings\")),\n    },\n    \"textarea-style-default\": {\n      name: \"textarea-style-default\",\n      filePath: \"preview/components/textarea-style-default.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/textarea-style-default\"),\n      ),\n    },\n    \"toc-style-default\": {\n      name: \"toc-style-default\",\n      filePath: \"preview/components/toc-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/toc-style-default\")),\n    },\n    \"toc-style-depth\": {\n      name: \"toc-style-depth\",\n      filePath: \"preview/components/toc-style-depth.tsx\",\n      preview: lazy(() => import(\"@/preview/components/toc-style-depth\")),\n    },\n    \"toc-style-manual\": {\n      name: \"toc-style-manual\",\n      filePath: \"preview/components/toc-style-manual.tsx\",\n      preview: lazy(() => import(\"@/preview/components/toc-style-manual\")),\n    },\n    \"toggle-group-style-default\": {\n      name: \"toggle-group-style-default\",\n      filePath: \"preview/components/toggle-group-style-default.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/toggle-group-style-default\"),\n      ),\n    },\n    \"toggle-group-style-outline-muted\": {\n      name: \"toggle-group-style-outline-muted\",\n      filePath: \"preview/components/toggle-group-style-outline-muted.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/toggle-group-style-outline-muted\"),\n      ),\n    },\n    \"toggle-group-style-outlined\": {\n      name: \"toggle-group-style-outlined\",\n      filePath: \"preview/components/toggle-group-style-outlined.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/toggle-group-style-outlined\"),\n      ),\n    },\n    \"toggle-group-style-solid\": {\n      name: \"toggle-group-style-solid\",\n      filePath: \"preview/components/toggle-group-style-solid.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/toggle-group-style-solid\"),\n      ),\n    },\n    \"toggle-style-default\": {\n      name: \"toggle-style-default\",\n      filePath: \"preview/components/toggle-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/toggle-style-default\")),\n    },\n    \"toggle-style-outline-muted\": {\n      name: \"toggle-style-outline-muted\",\n      filePath: \"preview/components/toggle-style-outline-muted.tsx\",\n      preview: lazy(\n        () => import(\"@/preview/components/toggle-style-outline-muted\"),\n      ),\n    },\n    \"toggle-style-outlined\": {\n      name: \"toggle-style-outlined\",\n      filePath: \"preview/components/toggle-style-outlined.tsx\",\n      preview: lazy(() => import(\"@/preview/components/toggle-style-outlined\")),\n    },\n    \"toggle-style-solid\": {\n      name: \"toggle-style-solid\",\n      filePath: \"preview/components/toggle-style-solid.tsx\",\n      preview: lazy(() => import(\"@/preview/components/toggle-style-solid\")),\n    },\n    \"tooltip-style-default\": {\n      name: \"tooltip-style-default\",\n      filePath: \"preview/components/tooltip-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/tooltip-style-default\")),\n    },\n    \"tooltip-style-primary\": {\n      name: \"tooltip-style-primary\",\n      filePath: \"preview/components/tooltip-style-primary.tsx\",\n      preview: lazy(() => import(\"@/preview/components/tooltip-style-primary\")),\n    },\n    \"tooltip-style-solid\": {\n      name: \"tooltip-style-solid\",\n      filePath: \"preview/components/tooltip-style-solid.tsx\",\n      preview: lazy(() => import(\"@/preview/components/tooltip-style-solid\")),\n    },\n    \"typography-p\": {\n      name: \"typography-p\",\n      filePath: \"preview/components/typography-p.tsx\",\n      preview: lazy(() => import(\"@/preview/components/typography-p\")),\n    },\n    \"empty-style-default\": {\n      name: \"empty-style-default\",\n      filePath: \"preview/components/empty-style-default.tsx\",\n      preview: lazy(() => import(\"@/preview/components/empty-style-default\"))\n    },\n    \"empty-style-custom-icon\": {\n      name: \"empty-style-custom-icon\",\n      filePath: \"preview/components/empty-style-custom-icon.tsx\",\n      preview: lazy(() => import(\"@/preview/components/empty-style-custom-icon\"))\n    },\n    \"empty-style-custom-everything\": {\n      name: \"empty-style-custom-everything\",\n      filePath: \"preview/components/empty-style-custom-everything.tsx\",\n      preview: lazy(() => import(\"@/preview/components/empty-style-custom-everything\"))\n    },\n    \"empty-style-table\": {\n      name: \"empty-style-table\",\n      filePath: \"preview/components/empty-style-table.tsx\",\n      preview: lazy(() => import(\"@/preview/components/empty-style-table\"))\n    },\n  },\n};\n"
  },
  {
    "path": "config/index.ts",
    "content": "export * from \"./components\";\nexport * from \"./navigation\";\n"
  },
  {
    "path": "config/navigation.ts",
    "content": "import { INavigationConfig } from \"@/types\";\n\nconst componentsRoute = \"/docs/components\";\nconst chartsRoute = \"/docs/charts\";\nconst utilsRoute = \"/docs/utils\";\n\nexport const navConfig: INavigationConfig = {\n  topNavItems: [\n    { title: \"Docs\", href: \"/docs\" },\n    { title: \"Components\", href: `${componentsRoute}/button` },\n    { title: \"Themes\", href: \"/themes\" },\n    { title: \"Blog\", href: \"/blogs\" },\n    { title: \"Showcase\", href: \"/showcase\" },\n  ],\n  sideNavItems: [\n    {\n      title: \"Getting Started\",\n      children: [\n        { title: \"Introduction\", href: \"/docs\" },\n        {\n          title: \"Installation\",\n          href: \"/docs/install\",\n        },\n        // {\n        //   title: \"Changelog\",\n        //   href: \"https://pro.retroui.dev\",\n        // },\n        {\n          title: \"Blocks\",\n          href: \"https://pro.retroui.dev/blocks\",\n          tag: \"Pro\",\n        },\n        {\n          title: \"Templates\",\n          href: \"https://pro.retroui.dev/templates\",\n          tag: \"Pro\",\n        },\n        {\n          title: \"Figma Kit\",\n          href: \"https://pro.retroui.dev/figma\",\n          tag: \"Pro\",\n        },\n      ],\n    },\n    {\n      title: \"Components\",\n      children: [\n        { title: \"Accordion\", href: `${componentsRoute}/accordion` },\n        { title: \"Alert\", href: `${componentsRoute}/alert` },\n        { title: \"Avatar\", href: `${componentsRoute}/avatar` },\n        { title: \"Badge\", href: `${componentsRoute}/badge` },\n        { title: \"Breadcrumb\", href: `${componentsRoute}/breadcrumb` },\n        { title: \"Button\", href: `${componentsRoute}/button` },\n        { title: \"Card\", href: `${componentsRoute}/card` },\n        { title: \"Calendar\", href: `${componentsRoute}/calendar` },\n        { title: \"Carousel\", href: `${componentsRoute}/carousel` },\n        { title: \"Checkbox\", href: `${componentsRoute}/checkbox` },\n        { title: \"Command\", href: `${componentsRoute}/command` },\n        { title: \"Dialog\", href: `${componentsRoute}/dialog` },\n        { title: \"Drawer\", href: `${componentsRoute}/drawer`, tag: \"New\" },\n        { title: \"Empty\", href: `${componentsRoute}/empty`, tag: \"New\" },\n        { title: \"Input\", href: `${componentsRoute}/input` },\n        { title: \"Label\", href: `${componentsRoute}/label` },\n        { title: \"Loader\", href: `${componentsRoute}/loader` },\n        { title: \"Menu\", href: `${componentsRoute}/menu` },\n        { title: \"Context Menu\", href: `${componentsRoute}/context-menu` },\n        {\n          title: \"Popover\",\n          href: `${componentsRoute}/popover`,\n        },\n        { title: \"Progress\", href: `${componentsRoute}/progress` },\n        { title: \"Radio\", href: `${componentsRoute}/radio` },\n        { title: \"Select\", href: `${componentsRoute}/select` },\n        { title: \"Slider\", href: `${componentsRoute}/slider` },\n        {\n          title: \"Sonner\",\n          href: `${componentsRoute}/sonner`,\n        },\n        { title: \"Switch\", href: `${componentsRoute}/switch` },\n        { title: \"Tab\", href: `${componentsRoute}/tab` },\n        { title: \"Table\", href: `${componentsRoute}/table` },\n        { title: \"Table Of Contents\", href: `${componentsRoute}/toc`, tag: \"New\" },\n        { title: \"Textarea\", href: `${componentsRoute}/textarea` },\n        { title: \"Text\", href: `${componentsRoute}/text` },\n        {\n          title: \"Toggle\",\n          href: `${componentsRoute}/toggle`,\n        },\n        {\n          title: \"Toggle Group\",\n          href: `${componentsRoute}/toggle-group`,\n        },\n        {\n          title: \"Tooltip\",\n          href: `${componentsRoute}/tooltip`,\n        },\n      ],\n    },\n    {\n      title: \"Chart\",\n      children: [\n        { title: \"Bar Chart\", href: `${chartsRoute}/bar-chart`, tag: \"Updated\" },\n        { title: \"Line Chart\", href: `${chartsRoute}/line-chart` },\n        { title: \"Area Chart\", href: `${chartsRoute}/area-chart` },\n        { title: \"Pie Chart\", href: `${chartsRoute}/pie-chart` },\n      ],\n    },\n    {\n      title: \"Utilities\",\n      children: [{ title: \"cn\", href: `${utilsRoute}/cn` }],\n    },\n  ],\n};\n"
  },
  {
    "path": "config/theme.ts",
    "content": "export enum Theme {\n    Default = \"default\",\n    Purple = \"purple\",\n    Lime = \"lime\",\n    Red = \"red\",\n    Lavender = \"lavender\",\n    Orange = \"orange\",\n    Green = \"green\",\n}\n\n\nexport const themeConfig = ({hasRadius = false}: {hasRadius?: boolean}) => ({\n    [Theme.Default]: {\n        name: \"default\",\n        color:\n`:root {\n    --radius: ${hasRadius ? \"0.5rem\" : \"0\"};\n    --background: #fff;\n    --foreground: #000;\n    --card: #fff;\n    --card-foreground: #000;\n    --primary: #ffdb33;\n    --primary-hover: #ffcc00;\n    --primary-foreground: #000;\n    --secondary: #000;\n    --secondary-foreground: #fff;\n    --muted: #cccccc;\n    --muted-foreground: #5a5a5a;\n    --accent: #fae583;\n    --accent-foreground: #000;\n    --destructive: #e63946;\n    --destructive-foreground: #fff;\n    --border: #000;\n}\n\n.dark {\n    --background: #1a1a1a;\n    --foreground: #f5f5f5;\n    --card: #242424;\n    --card-foreground: #f5f5f5;\n    --primary: #ffdb33;\n    --primary-hover: #ffcc00;\n    --primary-foreground: #000;\n    --secondary: #3a3a3a;\n    --secondary-foreground: #f5f5f5;\n    --muted: #3f3f46;\n    --muted-foreground: #a0a0a0;\n    --accent: #fae583;\n    --accent-foreground: #000;\n    --destructive: #e63946;\n    --destructive-foreground: #fff;\n    --border: #5c5c5c;\n}\n`,\n    },\n    [Theme.Purple]: {\n        name: \"purple\",\n        color: \n`:root {\n    --radius: ${hasRadius ? \"0.5rem\" : \"0\"};\n    --background: #f5f5f5;\n    --foreground: #1a1a1a;\n    --card: #FFFFFF;\n    --card-foreground: #f5f5f5;\n    --primary: #5F4FE6;\n    --primary-hover: #4938C2;\n    --primary-foreground: #fff;\n    --secondary: #3a3a3a;\n    --secondary-foreground: #f5f5f5;\n    --muted: #CFCCEA;\n    --muted-foreground: #5B5686;\n    --accent: #FED13B;\n    --accent-foreground: #000000;\n    --destructive: #EF4444;\n    --destructive-foreground: #fff;\n    --border: #3a3a3a;\n}\n\n.dark {\n    --background: #0f0f12;\n    --foreground: #f5f5f5;\n    --card: #1a1a1d;\n    --card-foreground: #eaeaea;\n    --primary: #7b6df5;\n    --primary-hover: #5F4FE6;\n    --primary-foreground: #fff;\n    --secondary: #2a2a2e;\n    --secondary-foreground: #eaeaea;\n    --muted: #3d395a;\n    --muted-foreground: #a49fce;\n    --accent: #FED13B;\n    --accent-foreground: #000;\n    --destructive: #EF4444;\n    --destructive-foreground: #fff;\n    --border: #2e2e32;\n}\n`,\n    },\n    [Theme.Lime]: {\n        name: \"Lime\",\n        color: \n`:root {\n    --radius: ${hasRadius ? \"0.5rem\" : \"0\"};\n    --background: #FFFFFF;\n    --foreground: #000000;\n    --card: #FFFFFF;\n    --card-foreground: #000000;\n    --input: #FFFFFF;\n    --ring: #AAFC3D;\n    --primary: #AAFC3D;\n    --primary-hover: #97f819;\n    --primary-foreground: #FFFFFF;\n    --secondary: #5252FF;\n    --secondary-foreground: #000000;\n    --muted: #F3F4F6;\n    --muted-foreground: #6B7280;\n    --accent: #FF00FF;\n    --accent-foreground: #000000;\n    --destructive: #EF4444;\n    --destructive-foreground: #FFFFFF;\n    --border: #3a3a3a;\n}\n\n.dark {\n    --background: #FFFFFF;\n    --foreground: #000000;\n    --card: #FFFFFF;\n    --card-foreground: #000000;\n    --input: #FFFFFF;\n    --border: #000000;\n    --ring: #AAFC3D;\n    --primary: #AAFC3D;\n    --primary-hover: #97f819;\n    --primary-foreground: #000000;\n    --secondary: #000000;\n    --secondary-foreground: #FFFFFF;\n    --muted: #F3F3F3;\n    --muted-foreground: #444444;\n    --accent: #FF4FD8;\n    --accent-foreground: #000000;\n    --destructive: #FF0033;\n    --destructive-foreground: #FFFFFF;\n}\n`,\n    },\n    [Theme.Red]: {\n        name: \"Red\",\n        color: \n`:root {\n    --radius: ${hasRadius ? \"0.5rem\" : \"0\"};\n    --background: #FCFFE7;\n    --foreground: #000000;\n    --muted: #EFD0D5;\n    --muted-foreground: #A42439;\n    --card: #FFFFFF;\n    --card-foreground: #000000;\n    --popover: #FFFFFF;\n    --popover-foreground: #000000;\n    --border: #000000;\n    --input: #FFFFFF;\n    --primary: #EA435F;\n    --primary-hover: #D00000;\n    --primary-foreground: #FFFFFF;\n    --secondary: #FFDA5C;\n    --secondary-foreground: #000000;\n    --accent: #CEEBFC;\n    --accent-foreground: #000000;\n    --destructive: #D00000;\n    --destructive-foreground: #FFFFFF;\n    --ring: #000000;\n}\n    \n.dark {\n    --background: #0f0f0f;\n    --foreground: #f5f5f5;\n    --muted: #3a1f24;\n    --muted-foreground: #f2a7b2;\n    --card: #1a1a1a;\n    --card-foreground: #ffffff;\n    --popover: #1a1a1a;\n    --popover-foreground: #ffffff;\n    --border: #2a2a2a;\n    --input: #2a2a2a;\n    --primary: #EA435F;\n    --primary-hover: #D00000;\n    --primary-foreground: #ffffff;\n    --secondary: #FFDA5C;\n    --secondary-foreground: #000000;\n    --accent: #2a3b45;\n    --accent-foreground: #CEEBFC;\n    --destructive: #D00000;\n    --destructive-foreground: #ffffff;\n    --ring: #EA435F;\n}\n`,\n    },\n    [Theme.Lavender]: {\n        name: \"Lavender\",\n        color: \n`:root {\n    --radius: ${hasRadius ? \"0.5rem\" : \"0\"};\n    --background: #F9F5F2;\n    --foreground: #000000;\n    --muted: #EDE3FF;\n    --muted-foreground: #5B3B98;\n    --card: #FFFFFF;\n    --card-foreground: #000000;\n    --popover: #FFFFFF;\n    --popover-foreground: #000000;\n    --border: #000000;\n    --input: #FFFFFF;\n    --primary: #C4A1FF;\n    --primary-hover: #9678FF;\n    --primary-foreground: #000000;\n    --secondary: #E7F193;\n    --secondary-foreground: #000000;\n    --accent: #FE91E9;\n    --accent-foreground: #000000;\n    --destructive: #FE3B3B;\n    --destructive-foreground: #FFFFFF;\n    --ring: #000000;\n}\n\n.dark {\n    --background: #121014;\n    --foreground: #f5f5f5;\n    --muted: #2d2440;\n    --muted-foreground: #c7b6f3;\n    --card: #1a1820;\n    --card-foreground: #ffffff;\n    --popover: #1a1820;\n    --popover-foreground: #ffffff;\n    --border: #2a2a2e;\n    --input: #2a2a2e;\n    --primary: #C4A1FF;\n    --primary-hover: #9678FF;\n    --primary-foreground: #000000;\n    --secondary: #E7F193;\n    --secondary-foreground: #000000;\n    --accent: #FE91E9;\n    --accent-foreground: #000000;\n    --destructive: #FE3B3B;\n    --destructive-foreground: #ffffff;\n    --ring: #C4A1FF;\n}\n\n`,\n    },\n    [Theme.Orange]: {\n        name: \"Orange\",\n        color: \n`:root {\n    --radius: ${hasRadius ? \"0.5rem\" : \"0\"};\n    --background: #F9F5F2;\n    --foreground: #000000;\n    --muted: #EFD0D5;\n    --muted-foreground: #A42439;\n    --card: #FFFFFF;\n    --card-foreground: #000000;\n    --popover: #FFFFFF;\n    --popover-foreground: #000000;\n    --border: #000000;\n    --input: #FFFFFF;\n    --primary: #EA435F;\n    --primary-hover: #D00000;\n    --primary-foreground: #FFFFFF;\n    --secondary: #FFDA5C;\n    --secondary-foreground: #000000;\n    --accent: #CEEBFC;\n    --accent-foreground: #000000;\n    --destructive: #D00000;\n    --destructive-foreground: #FFFFFF;\n    --ring: #000000;\n}\n\n.dark {\n    --background: #12100e;\n    --foreground: #f5f5f5;\n    --muted: #3a2617;\n    --muted-foreground: #ffb679;\n    --card: #1a1a1a;\n    --card-foreground: #ffffff;\n    --popover: #1a1a1a;\n    --popover-foreground: #ffffff;\n    --border: #2a2a2a;\n    --input: #2a2a2a;\n    --primary: #F07200;\n    --primary-hover: #ff8011;\n    --primary-foreground: #FDEAD9;\n    --secondary: #EF8C27;\n    --secondary-foreground: #000000;\n    --accent: #FF6B6B;\n    --accent-foreground: #000000;\n    --destructive: #FE3B3B;\n    --destructive-foreground: #ffffff;\n    --ring: #F07200;\n}\n`,\n    },\n    [Theme.Green]: {\n        name: \"Green\",\n        color: \n`:root {\n    --radius: ${hasRadius ? \"0.5rem\" : \"0\"};\n    --background: #F9F5F2;\n    --foreground: #000000;\n    --muted: #EFD0D5;\n    --muted-foreground: #A42439;\n    --card: #FFFFFF;\n    --card-foreground: #000000;\n    --popover: #FFFFFF;\n    --popover-foreground: #000000;\n    --border: #000000;\n    --input: #FFFFFF;\n    --primary: #EA435F;\n    --primary-hover: #D00000;\n    --primary-foreground: #FFFFFF;\n    --secondary: #FFDA5C;\n    --secondary-foreground: #000000;\n    --accent: #CEEBFC;\n    --accent-foreground: #000000;\n    --destructive: #D00000;\n    --destructive-foreground: #FFFFFF;\n    --ring: #000000;\n}\n\n.dark {\n    --background: #0f1210;\n    --foreground: #f5f5f5;\n    --muted: #1f3a2d;\n    --muted-foreground: #9cd9b8;\n    --card: #181c19;\n    --card-foreground: #ffffff;\n    --popover: #181c19;\n    --popover-foreground: #ffffff;\n    --border: #2a2e2b;\n    --input: #2a2e2b;\n    --primary: #599D77;\n    --primary-hover: #39654c;\n    --primary-foreground: #ffffff;\n    --secondary: #3a6f52;\n    --secondary-foreground: #ffffff;\n    --accent: #FFE75A;\n    --accent-foreground: #000000;\n    --destructive: #F05D5D;\n    --destructive-foreground: #ffffff;\n    --ring: #599D77;\n}\n`,\n    },\n});\n\nexport const themes = Object.keys(themeConfig({hasRadius: false}));\n\n"
  },
  {
    "path": "content/blogs/retroui-with-payload-cms.mdx",
    "content": "---\ntitle: Integrate RetroUI with Payload CMS\ncoverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/retroui-with-payload-cms/retroui-with-payload-cms-cover.png\ndescription: Using UI libraries can significantly speed up your development. In this article, we will explore the top 5 for your next React project.\ntags:\n  - react\n  - ui library\n  - top 5\nauthor:\n  name: Arif Hossain\n  avatar: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/arif.jpg\n  x: ariflogs\nstatus: draft\npublishedAt: 14 Nov, 2025\n---\n\n\n\nA practical, end‑to‑end guide to wire up **Payload CMS** as your content backend and **RetroUI** as your front‑end component kit—then ship a clean, neo‑brutalist **Blog List** in Next.js.\n\n> Works great if your stack is **Next.js + TailwindCSS**. Payload is Next‑native and RetroUI is Tailwind‑first, so they snap together nicely.\n\n---\n\n## What you’ll build\n\n* A Payload CMS app with a **Posts** collection\n* A Next.js front‑end that fetches posts from Payload’s REST API\n* A `/blog` page that renders a responsive list using RetroUI components (Cards, Badges, Buttons)\n\n---\n\n## Prerequisites\n\n* **Node.js 20.9+** (Payload requires Node 20.9 or newer)\n* **Next.js 15+** for the front‑end (Payload is Next‑native)\n* Any compatible DB: SQLite (dev), Postgres, or MongoDB\n\n> Tip: For local development, SQLite is the quickest path. Switch to Postgres/Mongo when deploying.\n\n---\n\n## Part 1 — Set up Payload CMS\n\nYou can add Payload to an existing Next.js app or scaffold a new one. We’ll scaffold a dedicated Payload project so its API stays clean and portable.\n\n### 1) Create a new Payload app\n\n```bash\nnpx create-payload-app\n# Follow the prompts: choose a template (blank or blog), set DB (SQLite for dev), etc.\ncd <your-payload-app>\npnpm dev  # or npm run dev / yarn dev\n```\n\nThis starts Payload and its Admin UI (usually at `http://localhost:3000/admin`).\n\n### 2) Define a Posts collection\n\nCreate `src/collections/Posts.ts`:\n\n```ts\nimport { CollectionConfig } from 'payload/types';\n\nconst Posts: CollectionConfig = {\n  slug: 'posts',\n  admin: {\n    useAsTitle: 'title',\n    defaultColumns: ['title', 'publishedAt', 'status'],\n  },\n  access: {\n    read: () => true, // public read access for blog\n  },\n  fields: [\n    {\n      name: 'title',\n      type: 'text',\n      required: true,\n    },\n    {\n      name: 'slug',\n      type: 'text',\n      required: true,\n      unique: true,\n    },\n    {\n      name: 'excerpt',\n      type: 'textarea',\n    },\n    {\n      name: 'coverImage',\n      type: 'upload',\n      relationTo: 'media',\n    },\n    {\n      name: 'status',\n      type: 'select',\n      options: [\n        { label: 'Draft', value: 'draft' },\n        { label: 'Published', value: 'published' },\n      ],\n      defaultValue: 'draft',\n      required: true,\n    },\n    {\n      name: 'publishedAt',\n      type: 'date',\n      admin: { position: 'sidebar' },\n    },\n    {\n      name: 'content',\n      type: 'richText',\n    },\n  ],\n};\n\nexport default Posts;\n```\n\nAdd it to your main config `src/payload.config.ts`:\n\n```ts\nimport { buildConfig } from 'payload/config';\nimport Posts from './collections/Posts';\n\nexport default buildConfig({\n  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,\n  admin: { user: 'users' },\n  collections: [\n    Posts,\n    // Media and Users collections if you need them\n  ],\n});\n```\n\n> If you don’t have a **Media** or **Users** collection yet, run `create-payload-app` with a blog template or add simple collections for uploads and auth later.\n\n### 3) Seed a few posts\n\nOpen the Admin UI → **Posts** → **Create New** and add a couple of published posts with past `publishedAt` dates.\n\n### 4) Confirm the REST API works\n\nPayload exposes a REST API by default at `/api/<collection>`.\n\nVisit:\n\n```\nhttp://localhost:3000/api/posts?limit=10&sort=-publishedAt&where[status][equals]=published\n```\n\nYou should see JSON with your posts.\n\n> When you deploy, set `PAYLOAD_PUBLIC_SERVER_URL` and your DB env vars. If you’re hosting Payload separately from Next.js, enable **CORS** for your front‑end origin.\n\n---\n\n## Part 2 — Set up Next.js + RetroUI front‑end\n\nWe’ll build a Next.js app that consumes the Payload REST API and renders a Blog List using **RetroUI** components.\n\n### 1) Create the Next.js app\n\n```bash\nnpx create-next-app@latest retroui-payload-blog\ncd retroui-payload-blog\n```\n\n### 2) Install TailwindCSS (if you didn’t choose the Tailwind template)\n\n```bash\npnpm i -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\nAdd `./components/**/*.{ts,tsx}` and `./app/**/*.{ts,tsx}` to `tailwind.config.ts` content. Also include RetroUI’s paths if required by the installer.\n\n### 3) Install RetroUI\n\nUse the official installer (CLI) or manual install. Example (pnpm):\n\n```bash\npnpm add retroui\n```\n\nThen import components where needed. (If RetroUI ships a CLI to copy components, run it here and follow prompts.)\n\n### 4) Connect to Payload (env + fetch helper)\n\nCreate `.env.local`:\n\n```\nNEXT_PUBLIC_PAYLOAD_BASE_URL=http://localhost:3000\n```\n\nAdd a tiny fetch utility `lib/payload.ts`:\n\n```ts\nexport type Post = {\n  id: string;\n  title: string;\n  slug: string;\n  excerpt?: string;\n  coverImage?: { url: string; filename: string } | string | null;\n  status: 'draft' | 'published';\n  publishedAt?: string | null;\n};\n\nexport async function getPublishedPosts(limit = 12) {\n  const base = process.env.NEXT_PUBLIC_PAYLOAD_BASE_URL;\n  const url = new URL('/api/posts', base);\n  url.searchParams.set('limit', String(limit));\n  url.searchParams.set('sort', '-publishedAt');\n  url.searchParams.set('where[status][equals]', 'published');\n\n  const res = await fetch(url.toString(), { next: { revalidate: 60 } });\n  if (!res.ok) throw new Error(`Failed to fetch posts: ${res.status}`);\n  const data = await res.json();\n  return data.docs as Post[];\n}\n```\n\n### 5) Build the Blog List page with RetroUI\n\nCreate `app/blog/page.tsx` (App Router):\n\n```tsx\nimport Image from 'next/image';\nimport Link from 'next/link';\nimport { getPublishedPosts, type Post } from '@/lib/payload';\n\n// Example RetroUI components — adjust paths/names per your install\nimport { Card } from 'retroui/card';\nimport { Button } from 'retroui/button';\nimport { Badge } from 'retroui/badge';\n\nexport const revalidate = 60; // ISR cadence\n\nexport default async function BlogListPage() {\n  const posts = await getPublishedPosts(12);\n\n  return (\n    <main className=\"container mx-auto px-4 py-10\">\n      <h1 className=\"text-4xl font-extrabold mb-6\">Blog</h1>\n      <p className=\"text-muted-foreground mb-10\">\n        Latest posts from the Payload CMS backend, styled with RetroUI.\n      </p>\n\n      <section className=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n        {posts.map((post) => (\n          <Card key={post.id} className=\"p-0 overflow-hidden\">\n            {typeof post.coverImage === 'object' && post.coverImage?.url ? (\n              <div className=\"relative h-44 w-full\">\n                <Image\n                  src={post.coverImage.url}\n                  alt={post.title}\n                  fill\n                  className=\"object-cover\"\n                />\n              </div>\n            ) : null}\n\n            <div className=\"p-5 space-y-3\">\n              <div className=\"flex items-center gap-2\">\n                <Badge variant=\"outline\">Article</Badge>\n                {post.publishedAt ? (\n                  <span className=\"text-xs opacity-70\">\n                    {new Date(post.publishedAt).toLocaleDateString()}\n                  </span>\n                ) : null}\n              </div>\n\n              <h2 className=\"text-2xl font-bold leading-tight\">\n                <Link href={`/blog/${post.slug}`}>{post.title}</Link>\n              </h2>\n\n              {post.excerpt ? (\n                <p className=\"text-sm text-muted-foreground line-clamp-3\">\n                  {post.excerpt}\n                </p>\n              ) : null}\n\n              <div className=\"pt-2\">\n                <Button asChild>\n                  <Link href={`/blog/${post.slug}`}>Read more</Link>\n                </Button>\n              </div>\n            </div>\n          </Card>\n        ))}\n      </section>\n    </main>\n  );\n}\n```\n\n> If your RetroUI package exposes different import names/paths, adjust `import { Card } from 'retroui/card'` lines to match. You can also swap in any other RetroUI components (Tabs, Inputs, etc.).\n\n### 6) Post detail page (optional)\n\nCreate `app/blog/[slug]/page.tsx`:\n\n```tsx\nimport Image from 'next/image';\nimport Link from 'next/link';\n\nasync function getPost(slug: string) {\n  const base = process.env.NEXT_PUBLIC_PAYLOAD_BASE_URL!;\n  const url = new URL('/api/posts', base);\n  url.searchParams.set('limit', '1');\n  url.searchParams.set('where[slug][equals]', slug);\n  const res = await fetch(url.toString(), { next: { revalidate: 60 } });\n  if (!res.ok) throw new Error('Failed to load post');\n  const data = await res.json();\n  return data.docs[0];\n}\n\nexport default async function PostPage({ params }: { params: { slug: string } }) {\n  const post = await getPost(params.slug);\n  if (!post) return <div className=\"p-10\">Not found</div>;\n\n  return (\n    <article className=\"container mx-auto px-4 py-10 max-w-3xl\">\n      <Link href=\"/blog\" className=\"underline\">← Back to blog</Link>\n      <h1 className=\"text-4xl font-extrabold mt-3\">{post.title}</h1>\n      {post.coverImage?.url ? (\n        <div className=\"relative h-80 w-full my-6\">\n          <Image src={post.coverImage.url} alt={post.title} fill className=\"object-cover\" />\n        </div>\n      ) : null}\n      {post.content?.root ? (\n        // If using Payload Lexical richText renderer, render here\n        <div className=\"prose prose-neutral dark:prose-invert\">\n          {/* Render your rich text */}\n        </div>\n      ) : (\n        post.excerpt ? <p className=\"mt-4 text-lg\">{post.excerpt}</p> : null\n      )}\n    </article>\n  );\n}\n```\n\n> For rich text, use your preferred Payload Renderer (e.g., @payloadcms/richtext-lexical) and render accordingly.\n\n---\n\n## Part 3 — Cross‑origin & deployment notes\n\nIf your Next.js app runs at a different origin than Payload:\n\n* Enable **CORS** in Payload: set `cors: [\"https://your-next-app.com\", \"http://localhost:3000\"]` in `payload.config.ts`.\n* Set `serverURL` (and `PAYLOAD_PUBLIC_SERVER_URL`) correctly so image URLs resolve.\n* Protect drafts: we allowed public `read` above. For private content, replace with an `access.read` function that checks auth/roles.\n\nDeployment options:\n\n* **Self‑host** (Node app on a VPS) or deploy to **Vercel**/**Cloudflare** for modern DX.\n* Use **SQLite** for quick demos, **Postgres/Mongo** for prod.\n\n---\n\n## Part 4 — Enhancements\n\n* **Search & filters**: Use Payload’s query parameters (e.g., `where[title][like]`) and wire a RetroUI **Input** + **Tabs** to filter.\n* **Pagination**: the REST API returns `totalDocs`, `limit`, `page`—build “Load more” with a RetroUI Button.\n* **Images**: move `coverImage` to a dedicated **Media** collection and use Payload’s upload adapter.\n* **Preview mode**: set up a draft preview route in Next.js that fetches with draft‑auth headers.\n* **GraphQL**: Payload also exposes GraphQL—use it if you prefer typed queries.\n\n---\n\n## Troubleshooting\n\n* **CORS errors**: Check `cors` config and ensure `serverURL` is set.\n* **Images not showing**: Confirm the `url` returned for uploads and that Next.js `next.config.js` allows the Payload domain under `images.domains`.\n* **Nothing renders**: Inspect the fetch URL in `lib/payload.ts`. Ensure records exist and `status` is `published`.\n\n---\n\n## Recap\n\nYou now have:\n\n* A Payload CMS app exposing posts over REST\n* A Next.js site styled with RetroUI\n* A `/blog` that lists and links to individual posts\n\nFrom here, add authors, categories, and tags; style with more RetroUI components; and ship it.\n"
  },
  {
    "path": "content/blogs/top-10-nextjs-ui-library.mdx",
    "content": "---\ntitle: Top 10 Next.js UI Libraries in 2025\ncoverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top-10-nextjs-2025/cover.png\ndescription: Using UI libraries can significantly speed up your development. In this article, we will explore the top 10 for your Next.js project.\ntags:\n  - nextjs\n  - ui library\n  - top 10\nauthor:\n  name: Imran Hossain\n  avatar: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/imran.jpg\n  linkedin: faraazhossainimran\n  \nstatus: published\npublishedAt: 31 May, 2025\n---\n\nNext.js has become the go-to React framework for building modern, full-stack web applications. But great functionality alone isn't enough. Your app needs a beautiful, fast, and accessible user interface. That’s where UI libraries come in.\n\n<br />\n\nUsing UI libraries can dramatically streamline your development workflow. The good news is that there’s no shortage of high-quality UI libraries that work seamlessly with Next.js. Below are the top 10 UI libraries in 2025 that can help you build modern, user-friendly interfaces more efficiently in your next Next.js project.\n\n<br />\n\n## [1. RetroUI](https://retroui.dev)\n\n![RetroUI cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/retroui_landing_w_frame.png)\n\nIf you are bored with generic looking UI libraries, you should check out [RetroUI](https://retroui.dev). It brings a combination of retro and modern design elements to create a unique and memorable user experience.\nThe library is built with React and Tailwind CSS, making it easy to integrate into your existing projects.\n\n<br />\n\nRetroUI comes with 100+ utility components, including `buttons`, `cards`, `modals`, and more that you can just copy-paste into your projects.\n\n<br />\n\n#### Why use RetroUI in 2025?\n\n- **Unique Design:** RetroUI's unique design elements make it stand out from other UI libraries.\n- **Easy to Use:** RetroUI's components are easy to use and can be customized with Tailwind CSS.\n- **Bold Design System:** For websites that aims to look bold, RetroUI can be a perfect fit.\n\n<br />\n\n#### Drawbacks\n\n- **Bold Design System:** RetroUI's biggest benefit can also be it's biggest drawback, If you are looking for a more subtle design, RetroUI might not be the best fit.\n- **Smaller Community Size:** As a new UI library, RetroUI doesn't have a large community yet compared to other mainstream libraries.\n\n<br />\n\n#### Use Case\n\nPerfect for someone looking to combine old school and modern design!\n\n<br />\n<br />\n\n## [2. Shadcn/ui](https://ui.shadcn.com)\n\n![Shadcn cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/shadcn_landing_w_frame.png)\n\n\nShadcn/ui has quickly become one of the most talked-about UI libraries in the React and Next.js ecosystem. It blends the power of **Tailwind CSS**, **Radix UI**, and modern design principles to provide a customizable and production-ready set of components.\n\n<br />\n\n#### Why shadcn/ui in 2025?\n\n- **Modern Aesthetic**: Components follow sleek, minimal, and accessible design standards, fitting perfectly with modern UI trends.\n- **Composable & Customizable**: Built on Tailwind CSS and Radix UI primitives, giving developers full control over styles and behavior.\n- **TypeScript Friendly**: All components are fully typed, providing a great developer experience with auto completion and safety.\n- **Great for Next.js**: Designed with app directory support in mind, making it a natural fit for modern Next.js projects.\n\n```tsx\nimport { Button } from \"@/components/ui/button\";\n\n<Button variant=\"outline\">Click me</Button>\n```\n\n<br />\n\n#### Drawbacks\n\n- **Manual Setup**: Unlike Chakra or Material UI, you don’t install it as a complete package. You copy and paste components into your project, which can be tedious for some developers.\n- **Learning Curve**: Requires some familiarity with Tailwind CSS and Radix UI to fully unlock its potential.\n\n<br />\n\n#### Use Case\n\nIdeal for developers who want full control over styling and component behavior while maintaining a modern design system. Especially great for teams building custom design systems or wanting highly optimized Next.js apps without the bloat.\n\n<br />\n<br />\n\n\n## [3. Chakra UI](https://chakra-ui.com)\n![ChakraUI cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/chakraui_landing_w_frame.png)\n\n**Chakra UI** is a popular React component library known for its simplicity, accessibility, and developer-friendly API. It provides a comprehensive set of pre-styled components that speed up the development of clean, responsive UIs.\n\n<br />\n\n#### Why Chakra UI in 2025?\n\n- **Large Selection of Components**: Comes with a wide range of ready-to-use components like modals, forms, alerts, icons, cards, and more.\n- **Prop-Based Styling**: Uses a utility prop system that makes styling components intuitive and efficient without writing separate CSS.\n- **Theming Support**: Fully customizable theme system with support for dark mode and a live theme playground.\n- **Accessibility Built-in**: All components follow WAI-ARIA standards and are keyboard-navigable by default.\n- **Helpful Utilities**: Includes extra helper components and hooks such as useDisclosure, useToast, and more for managing UI state easily.\n\n```tsx\nimport { FormatNumber } from \"@chakra-ui/react\";\n\n<FormatNumber value={1234.45} style=\"currency\" currency=\"USD\" />;\n```\n\n<br />\n\n#### Drawbacks\n\n- **Bundle Size**: The total package size exceeds 2MB (unpacked), and when combined with dependencies, it can add notable weight to your application.\n- **Less Tailwind-Friendly**: Chakra’s styling system differs from utility-first frameworks like Tailwind, which may be limiting for some teams.\n\n<br />\n\n#### Use Case\n\nPerfect for developers who want to move fast without worrying about styling from scratch. Great for dashboards, admin panels, and apps where accessibility and design consistency are important out-of-the-box.\n\n\n## [4. MUI (Material UI)](https://mui.com)\n\n![MUI cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top-10-nextjs-2025/material.png)\n\n**MUI (Material UI)**is one of the most established and feature-rich UI libraries for React. Based on Google's Material Design, it offers a large set of components, robust customization options, and strong community support, making it a go-to choice for many production apps.\n\n<br />\n\n#### Why MUI in 2025?\n\n- **Comprehensive Component Library**: Offers 100+ high-quality components including tables, date pickers, data grids, and more.\n- **Material Design Compliance**: Implements Google's Material Design out-of-the-box for a professional, polished look.\n- **Theming & Customization**: Advanced theming system allows deep customization to fit any design system.\n- **Powerful Layout Tools**: Includes responsive Grid and Box components that simplify layout creation.\n- **Strong Ecosystem**: Comes with official add-ons like MUI X for data-rich components and design kits for Figma.\n\n```tsx\nimport Button from \"@mui/material/Button\";\n\n<Button variant=\"contained\" color=\"primary\">Click Me</Button>\n```\n\n<br />\n\n#### Drawbacks\n\n- **Large Bundle Size**: MUI’s component richness comes at the cost of performance — it can significantly increase bundle size.\n- **Style Customization Can Be Verbose**: Overriding styles using the sx prop or styled() can be less intuitive for Tailwind or Chakra users.\n\n<br />\n\n#### Use Case\n\nBest for enterprise-level applications or teams that want a robust, scalable, and production-ready UI solution with built-in accessibility and design consistency. Ideal for admin dashboards, CRMs, and SaaS platforms.\n\n\n## [5. Radix UI](https://www.radix-ui.com)\n\n![RadixUI cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top-10-nextjs-2025/radix-ui.png)\n**Radix UI** is a low-level UI component library that provides unstyled, accessible primitives for building custom and highly flexible interfaces. Rather than giving you styled components, it offers logic and behavior, allowing complete control over design.\n\n<br />\n\n#### Why Radix UI in 2025?\n\n- **Unstyled by Design**: Gives you complete styling freedom using any CSS approach — Tailwind, CSS Modules, Styled Components, etc.\n- **Accessibility First**: Every component adheres to WAI-ARIA standards and comes with built-in accessibility logic.\n- **Composability**: Components are built as primitives, allowing you to compose and extend them to suit your design needs.\n- **Framework-Agnostic**: While optimized for React, Radix UI is modular enough to be integrated into various setups, including modern Next.js apps.\n- **Consistent API**: Offers a unified API across all components, making it predictable and easy to use once you're familiar with one.\n\n\n```tsx\nimport * as Switch from '@radix-ui/react-switch';\n\n<Switch.Root className=\"...\">\n  <Switch.Thumb className=\"...\" />\n</Switch.Root>\n```\n\n<br />\n\n#### Drawbacks\n\n- **No Styling Included**: Beginners may find it harder to use, as it requires pairing with a styling solution (e.g., Tailwind CSS).\n- **Not a Full UI Kit**: Radix UI doesn’t provide all the components you'd find in traditional UI libraries (e.g., tables, charts, etc.).\n\n<br />\n\n#### Use Case\n\nPerfect for developers and teams who want full control over their UI design and behavior. Ideal for custom design systems and projects where flexibility and accessibility are top priorities.\n\n<br />\n<br />\n\n## [6. Mantine](https://mantine.dev)\n![Mentine info](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/mentine_landing_w_frame.png)\n\n\n**Mantine** is a modern React component library that offers a rich set of customizable and accessible UI components, combined with powerful hooks and utilities. It focuses on developer experience and performance, making it a great choice for building scalable Next.js applications.\n\n<br />\n\n#### Why Mantine in 2025?\n\n- **Extensive Component Library**: Includes over 100 components such as modals, notifications, inputs, and advanced data display elements.\n- **Flexible Styling**: Supports multiple styling approaches including CSS-in-JS, Tailwind CSS integration, and theme overrides.\n- **Built-in Dark Mode**: Offers easy dark/light theme switching with seamless theming capabilities.\n- **Rich Utility Hooks**: Provides handy hooks for common tasks like form handling, modals, and media queries.\n- **TypeScript Support**: Fully typed components for excellent developer experience and safer code.\n\n```tsx\nimport { Button } from '@mantine/core';\n\n<Button variant=\"outline\">Click me</Button>\n```\n\n<br />\n\n#### Drawbacks\n\n- **Smaller Community**: Compared to Chakra UI or MUI, Mantine’s community is growing but still smaller, meaning fewer third-party resources.\n- **Less Established**: Being relatively newer, some components or integrations might be less battle-tested.\n\n<br />\n\n#### Use Case\n\nIdeal for developers looking for a comprehensive and flexible UI toolkit with great developer ergonomics. Perfect for building both small projects and complex apps that require a customizable design system.\n\n<br />\n<br />\n\n## [7. Hero UI](https://heroui.com)\n\n![HeroUI cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/heroui_landing_w_frame.png)\n\n\n**Hero UI** is a lightweight, Tailwind CSS-based component library that focuses on delivering clean, accessible, and modern UI components out-of-the-box. It emphasizes simplicity and responsiveness, making it an excellent choice for developers who prefer a utility-first CSS approach like Tailwind.\n\n<br />\n\n#### Why Hero UI in 2025?\n\n- **Tailwind-First Design**: Built entirely with Tailwind CSS, ensuring consistency and ease of customization for Tailwind users.\n- **Accessible Components**: Prioritizes accessibility with keyboard navigation and screen-reader-friendly components.\n- **Simple Integration**: Easy to plug into any Tailwind + React or Next.js project without heavy configuration.\n- **Well-Designed Defaults**: Offers visually appealing default styles that align with modern UI trends without overwhelming customization.\n- **Fast Prototyping**: Perfect for building UIs quickly with pre-designed, responsive components.\n\n```tsx\nimport { Button } from '@hero-ui/react';\n\n<Button variant=\"primary\">Click me</Button>\n```\n\n<br />\n\n#### Drawbacks\n\n- **Limited Component Set**: Compared to larger libraries like MUI or Mantine, Hero UI has a smaller set of components.\n- **Tailwind Dependency**: Not suitable if you don’t want to use Tailwind CSS, as it relies heavily on Tailwind utility classes.\n- **Minimal Ecosystem**: Fewer plugins or extended tools compared to more mature libraries.\n\n<br />\n\n#### Use Case\n\nBest for developers working with Tailwind CSS who want clean, ready-to-use components with minimal setup. Ideal for small to mid-sized projects, landing pages, and startups looking to ship quickly with a modern design.\n\n<br />\n<br />\n\n## [8. Ant Design](https://ant.design)\n\n![Ant Design cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top-10-nextjs-2025/ant-design.png)\n\n**Ant Design** is a comprehensive and enterprise-grade UI library built for React. Developed by Alibaba, it is widely used in production-level applications, especially in enterprise and admin dashboards, due to its vast component set and professional design system.\n\n<br />\n\n#### Why Ant Design in 2025?\n\n- **Rich Component Library**: Offers a large number of well-crafted components, including complex UI elements like tables, trees, timelines, and charts.\n- **Design System**: Follows a well-defined design philosophy that promotes consistency, usability, and responsiveness.\n- **Internationalization (i18n)**: Built-in support for multiple languages and locale settings out of the box.\n- **Enterprise Features**: Comes with features like form validation, data tables, permission controls, and icon packs that are ideal for large-scale apps.\n- **Custom Theming**: Allows advanced theming using Less variables or CSS-in-JS with full control over visual style.\n\n```tsx\nimport { Button } from 'antd';\n\n<Button type=\"primary\">Click Me</Button>\n```\n\n<br />\n\n#### Drawbacks\n\n- **Heavy Bundle Size**: One of the heaviest UI libraries in terms of bundle size, which might affect performance in smaller apps.\n- **Overhead for Simple Projects**: The complexity and richness may be overkill for lightweight or minimal UIs.\n- **Less Tailwind-Friendly**: Not designed with utility-first frameworks like Tailwind CSS in mind.\n\n<br />\n\n#### Use Case\n\nIdeal for enterprise dashboards, internal tools, admin panels, and data-intensive applications. Best suited for teams who need robust components and built-in business-level features without building from scratch.\n\n<br />\n<br />\n\n## [9. DaisyUI](https://daisyui.com)\n\n![DaisyUI cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top-10-nextjs-2025/daisy-ui.png)\n**DaisyUI** is a plugin for Tailwind CSS that adds pre-styled, customizable UI components. It allows developers to build beautiful interfaces quickly while keeping the flexibility and utility-first approach of Tailwind intact. Lightweight and beginner-friendly, DaisyUI is a popular choice for rapid development.\n\n<br />\n\n#### Why DaisyUI in 2025?\n\n- **Tailwind Native**: Built directly on top of Tailwind CSS, making it seamless to integrate and customize using Tailwind classes.\n- **Theme Support**: Comes with multiple pre-built themes and easy dark mode toggling, customizable via Tailwind config.\n- **Component-Rich**: Provides a wide range of components like buttons, cards, modals, navbars, dropdowns, and more.\n- **Minimal Setup**: Easy to install and integrate into any Tailwind + Next.js project with zero JavaScript bloat.\n- **Open Source & Community Driven**: Actively maintained with a growing contributor base and real-world usage.\n\n#### Drawbacks\n\n- **Basic Functionality**: Most components are presentational and don’t come with built-in interactivity like form validation or dropdown logic.\n- **Not Framework-Specific**: Unlike MUI or Chakra UI, DaisyUI is just styled HTML classes — you'll still need to handle component behavior yourself.\n- **Limited Advanced Components**: Lacks complex or enterprise-level components (e.g., data grids, sortable tables, etc.).\n\n#### Use Case\n\nPerfect for beginners or developers who want to prototype quickly using Tailwind CSS with a pre-styled component set. Ideal for marketing pages, landing pages, blogs, and simple dashboards in Next.js apps.\n\n<br />\n<br />\n\n## [10. Ark UI](https://ark-ui.com)\n\n![Ark UI cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top-10-nextjs-2025/arc-ui.png)\n\n**Ark UI** is a headless, accessible component library built by the creators of Chakra UI. It offers composable, unstyled components that give developers complete control over the UI while handling accessibility and interaction logic internally. It's perfect for custom design systems.\n\n<br />\n\n#### Why Ark UI in 2025?\n\n- **Headless Components**: Ark UI provides the functionality and accessibility of components without imposing styles, allowing full design freedom.\n- **Accessibility by Default**: All components are WAI-ARIA compliant, keyboard navigable, and screen-reader friendly out of the box.\n- **Framework-Agnostic**: Works not only with React/Next.js but also with Vue, Solid, and other frontend frameworks.\n- **Composable Architecture**: Encourages flexibility and reusability by breaking components into primitives that can be composed freely.\n- **Ideal for Design Systems**: Perfect for teams building custom UI libraries or fully branded interfaces.\n\n### Drawbacks\n\n- **No Styling Provided**: Unlike Chakra UI or Mantine, you must style everything yourself using Tailwind, CSS-in-JS, or your preferred method.\n- **Steeper Learning Curve**: Beginners may find it harder to use because it requires more setup and an understanding of headless component architecture.\n- **Fewer Out-of-the-Box Components**: Still expanding its library — may not yet have all the components found in more mature kits.\n\n### Use Case\n\nIdeal for teams or developers who want total styling control and need accessible, composable building blocks for custom UI systems in React or Next.js projects. Great for products with a unique brand identity or when building a design system from scratch."
  },
  {
    "path": "content/blogs/top-5-react-ui-library.mdx",
    "content": "---\ntitle: Top 5 React UI Libraries in 2025\ncoverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top-5-react-ui-library/react-cover.png\ndescription: Using UI libraries can significantly speed up your development. In this article, we will explore the top 5 for your next React project.\ntags:\n  - react\n  - ui library\n  - top 5\nauthor:\n  name: Arif Hossain\n  avatar: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/arif.jpg\n  x: ariflogs\nstatus: published\npublishedAt: 12 Feb, 2024\n---\n\nReact remains one of the most popular JavaScript frameworks for building web applications, and UI libraries play a important role in speeding up development. Using UI libraries can significantly speed up your development process and help you create consistent, high-quality user interfaces.\n\n<br />\nFortunately, there are many React great UI libraries available that can help you\nachieve this. Here are the top 5 React UI libraries in 2025 that you should\nconsider using in your next project.\n\n<br />\n<br />\n\n## [1. RetroUI](https://retroui.dev)\n\n![RetroUI cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/retroui_landing_w_frame.png)\n\nIf you are bored with generic looking UI libraries, you should check out [RetroUI](https://retroui.dev). It brings a combination of retro and modern design elements to create a unique and memorable user experience.\nThe library is built with React and Tailwind CSS, making it easy to integrate into your existing projects.\n\n<br />\n\nRetroUI comes with 100+ utility components, including `buttons`, `cards`, `modals`, and more that you can just copy-paste into your projects.\n\n<br />\n\n#### Why use RetroUI in 2025?\n\n- **Unique Design:** RetroUI's unique design elements make it stand out from other UI libraries.\n- **Easy to Use:** RetroUI's components are easy to use and can be customized with Tailwind CSS.\n- **Bold Design System:** For websites that aims to look bold, RetroUI can be a perfect fit.\n\n<br />\n\n#### Drawbacks\n\n- **Bold Design System:** RetroUI's biggest benefit can also be it's biggest drawback, If you are looking for a more subtle design, RetroUI might not be the best fit.\n- **Smaller Community Size:** As a new UI library, RetroUI doesn't have a large community yet compared to other mainstream libraries.\n\n<br />\n\n#### Use Case\n\nPerfect for someone looking to combine old school and modern design!\n\n<br />\n<br />\n\n## [2. Chakra UI](https://chakra-ui.com)\n\n![ChakraUI cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/chakraui_landing_w_frame.png)\nChakra UI has gained popularity for its simplicity and flexibility. It offers a modern, accessible, and easy-to-use components that can fit any React applications.\n\n<br />\n\n#### Why Chakra UI in 2025?\n\n- Large Selection of Components: Chakra UI offers a wide range of components, including `dialogs`, `forms`, `icons`, `stats`, and more.\n- Ease of Styling: Chakra UI Uses a prop-based styling approach that allows for easily customize the components.\n- Theming Support: Chakra UI allows deep customization along with a playground where you can try and test your themes.\n- Utilities: Chakra UI also provides a bunch of helper components that can handle some common functionalities.\n\n```js\nimport { FormatNumber } from \"@chakra-ui/react\";\n\n<FormatNumber value={1234.45} style=\"currency\" currency=\"USD\" />;\n```\n\n<br />\n\n#### Drawbacks\n\n- Heavy: The unpacked size of Chakra UI is over 2MB, and combining that with it's core dependencies, can make Chakra UI a heavy library to use.\n\n<br />\n\n#### Use Case\n\nDevelopers who don't wanna spend a lot of time on building/styling UIs, as ChakraUI has almost all the common components you can think of.\n\n<br />\n<br />\n\n## [3. Shadcn/UI](https://ui.shadcn.com/)\n\n![Shadcn cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/shadcn_landing_w_frame.png)\n\nShadcn is not necessarily a UI library, but a collection of UI components that you can use to build your own UI library. It's a great starting point for building your own UI library, as it provides a lot of components that you can use and customize.\n\n<br />\n\n#### Why Use ShadCN in 2025?\n\n- Fully Customizable: Unlike traditional UI kits, it doesn't have a specific design language. You can fully customize it to match your brand's design.\n- Minimalistic Design: If you like clean and minimalistic design, you'll love ShadCN.\n- Backed by Vercel: Shadcn is now managed by Vercel and integrates well with other Vercel products like NextJS, v0 and AI SDK.\n- Developer-Friendly: No lock-in—just import and customize as needed.\n\n<br />\n\n#### Drawbacks of ShadCN\n\n- **Learning Curve:** If you're new to component libraries, it might take some time to get used to.\n- **Looks Generic:** ShadCN components look generic, as it's meant to be. So you might have to put some effort into making them look unique.\n\n<br />\n<br />\n\n## [4. Hero UI](https://www.heroui.com/)\n\n![HeroUI cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/heroui_landing_w_frame.png)\n\nHero UI is a relatively newer UI library that offers a wide range of base and animated components for Next.js and React applications.\n\n<br />\n\n#### Why use Hero UI in 2025?\n\n- Modern Design: Hero UI offers a modern and sleek design that is perfect for building responsive and accessible applications.\n- Animation Support: Most of it's components supports animations out of the box.\n- Developer-Friendly: Hero UI is easy to use and integrate with existing React projects.\n- CLI Support: Hero UI comes with a CLI that makes it easy to initialize new projects and install components.\n\n#### Drawbacks\n\n- **Limited Customization:** Hero UI has a opinionated design, so you might not be able to customize it as much as you want.\n\n<br />\n\n#### Use Case:\n\nIf you want to make your website look and feel like Apple's, Hero UI is the go-to choice.\n\n<br />\n<br />\n\n## [5. Mantine](https://mantine.dev/)\n\n![Mentine info](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/mentine_landing_w_frame.png)\n\nMentine is a fully featured React UI library that offers a wide range of components, hooks, and utilities for building modern web applications.\n\n**Why Mantine in 2025?**\n\n- Rich Component Library: Mantine offers a wide range of components, from basic `buttons` to complex `data tables`.\n- Hooks-Based: Mantine's hooks-based architecture makes it easy to integrate with existing React projects.\n- Extensions: Mentine offers some free extensions like `Code Highlight`, `Rich text editor` that can come in handy.\n\n```jsx\nimport { CodeHighlight } from \"@mantine/code-highlight\";\n\nconst exampleCode = `\nfunction Button() {\n  return <button>Click me</button>;\n}\n`;\n\nfunction Demo() {\n  return (\n    <CodeHighlight\n      code={`// Custom copy label${exampleCode}`}\n      language=\"tsx\"\n      copyLabel=\"Copy button code\"\n      copiedLabel=\"Copied!\"\n    />\n  );\n}\n```\n\n- Focus on DX: Mantine prioritizes developer experience with excellent documentation and TypeScript support.\n\n#### Drawbacks:\n\n- Large Size: Mantine's extensive feature set comes at the cost of a larger bundle size!\n- Learning Curve: Mentine as so many features like `@mentine/hooks`, `@mentine/charts`, `extensions` and much more which can be overwhelming for beginners.\n\n#### Use Case:\n\nMentine is a great choice for data intensive applications, dashboards, and admin panels.\n\n<br />\n<br />\n\n### **Conclusion**\n\nIn 2025, the React ecosystem is more vibrant than ever, with UI libraries catering to a wide range of needs. Whether you're looking for a minimal design system like [Shadcn](https://ui.shadcn.com), or an bold design system like [RetroUI](https://retroui.dev), there's a React UI library for almost every project.\n\nWhen choosing a library, consider factors like customization, performance, accessibility, and community support. Each of these top 5 libraries has its strengths, so pick the one that aligns best with your project requirements and development style.\n\n<br />\n<br />\n"
  },
  {
    "path": "content/blogs/why-neobrutalism-is-perfect-for-modern-websites.mdx",
    "content": "---\ntitle: Why Neo-Brutalism is Perfect for Modern Websites\ncoverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/why-neo-brutalism-best-for-modern-websites/cover.png\ndescription: Bored of how every website looks alike? Neo-brutalism breaks the pattern. It’s a design that stands out and might be the perfect fit for modern websites.\ntags:\n  - ui/ux\n  - design\nauthor:\n  name: Imran Hossain\n  avatar: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/imran.jpg\n  linkedin: faraazhossainimran\n  \nstatus: published\npublishedAt: 18 August, 2025\n---\n\n\nBored of how every website looks alike? Neo-brutalism breaks the pattern. It’s a design that stands out and might be the perfect fit for modern websites. \n\n<br />\n\n## **What exactly is Neo-Brutalism?**\n\nNeo-brutalism is a design system, inspired by brutalist architecture, using concrete blocks, exposed structures, and a no-frills style. In web design, that means:\n\n<br />\n\n- → Sharp edges and grid layouts\n- → High-contrast colors\n- → Simple typography\n- → A “hand-coded” or minimalist feel\n\n![Neo Brutalism Example](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/examples/ex_1.png)\n\n<br />\n\n## **Why It Works So Well?**\n\nNowadays, every other website looks the same, making it hard to grab visitor attention!\nIn cases like this Neo Brutalism can help you stand out from the crowd. While exploring at different styles, you come across **neo-brutalism,** a bold and raw design style. It uses plain colors, big text, and basic shapes. It's loud, different, and hard to ignore.\n\n![Neo Brutalism Example](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/examples/ex_6.png)\n<br />\n\nYou think, *“This could grab people’s attention.”*\n\nBut then you ask yourself, *“Does this fit the brand I’m working on?”*\n\nIf your brand wants to make a strong impression, neo-brutalism might be a great choice. But if the brand is more elegant, quiet, or professional, this design could feel too aggressive. \n\nHowever, you might decide to try it on a small site, maybe a creative portfolio or a campaign. But for something long-term, or for a product that needs to work everywhere, you may pick a design that’s more flexible.\n\n<br />\n\n## What are Neo-brutalist Characteristics?\n\n<br />\n\n### 1. It Gets Noticed Fast\n\n![Neo Brutalism Example](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/examples/ex_2.png)\n\nMost websites look similar, but neo-brutalist designs are different. Their simple style catches the eye right away. For brands like startups, designers, or creative people who want to be noticed, this is a big plus.\n\n<br />\n\n### 2. It’s Fast and Lightweight\n\nNeo-brutalist websites usually avoid heavy animations and large frameworks. This makes them load quickly, run smoothly, and work better on mobile devices. It’s good for users, and Google likes it too.\n\n<br />\n\n### 3. It Feels Genuine\n\n![Neo Brutalism Example](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/examples/ex_3.png)\n\nPeople today like things that feel genuine. Neo-brutalism skips the extra polish and shows things as they are. It’s not trying to hide anything or be fancy, and that honesty helps build trust.\n\n<br />\n\n### 4. It’s Developer-Friendly\n\nNeo-brutalism uses simple HTML and basic styles. That makes it easier to build and maintain, especially for developers who want to focus on function over decoration.\n\n<br />\n\n### 5. Unleash Creativity\n\nNeo-Brutalism is a playground for designers. It breaks away from traditional design rules and encourages creative freedom. For brands, this builds a unique brand identity that feels modern.\n\n<br />\n\n## Some Real World Examples\nMany websites use neobrutalist design to stand out. Here are a few examples:\n\n<br />\n\n### [Gumroad](https://gumroad.com)\n\n![Gumroad cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/examples/ex_4.png) \n\n**Gumroad**, a platform for independent creators, also follows a neobrutalist style. Its website looks raw and simple, helping users focus on what matters: selling their work easily and without distractions. This matches Gumroad’s mission of empowering creators with a straightforward, no-frills platform.\n\n<br />\n\n### [Feastables](https://feastables.com)\n\n![Feastables cover](https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/examples/ex_5.png)\n\n**Feastables**, the snack brand created by MrBeast, also uses neobrutalist design to stand out. The website is bold, colorful, and easy to understand. Instead of using shiny effects or fancy styles, Feastables keeps things raw, fun, and direct.\n\n<br />\n\nThe bright colors, big text, and playful layout reflect the brand’s energy and MrBeast’s personality. Everything is made to be clear, fast, and exciting, just like his videos. This matches neobrutalism’s goal of being bold, functional, and different from typical polished designs.\n\nFeastables uses design not just to look good, but to connect quickly with fans and make the brand feel fun and real.\n\n<br />\n\n## Final Thoughts\n\nNeo-brutalism isn’t just about looking different. It’s about rethinking how websites communicate. In a world where everything is overdesigned, a raw, bold approach feels surprisingly fresh.\n\nSo if you’re building a modern website and want to stand out, maybe it’s time to try neo-brutalism.\n"
  },
  {
    "path": "content/docs/charts/area-chart.mdx",
    "content": "---\ntitle: Area Chart\ndescription: A customizable area chart component to visualize your data with gradient fills and smooth curves. 📈\nlastUpdated: 12 Aug, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/AreaChart.tsx\n---\n\n<ComponentShowcase name=\"area-chart-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add 'https://retroui.dev/r/area-chart.json'\" />\n  <ComponentInstall.Manual>\n\n#### 1. Install dependencies:\n\n```sh\nnpm install recharts\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"areaChart\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"area-chart-style-default\" />\n<br />\n<br />\n\n### Multiple Categories\n\n<ComponentShowcase name=\"area-chart-style-multiple\" />\n<br />\n<br />\n\n### Stacked Areas\n\n<ComponentShowcase name=\"area-chart-style-stacked\" />\n<br />\n<br />\n\n## API Reference\n\n<Table>\n  <Table.Header>\n    <Table.Row>\n      <Table.Head>Prop</Table.Head>\n      <Table.Head>Type</Table.Head>\n      <Table.Head>Default</Table.Head>\n      <Table.Head>Description</Table.Head>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">data</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`Record<string, any>[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[]`</Table.Cell>\n      <Table.Cell>Array of data objects to display</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">index</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">-</Table.Cell>\n      <Table.Cell>Key for the x-axis (category) data</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">categories</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[]`</Table.Cell>\n      <Table.Cell>Array of keys for the data values to display as areas</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">fill</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"gradient\" | \"solid\"`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"gradient\"`</Table.Cell>\n      <Table.Cell>Fill style for the areas</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">strokeColors</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[\"var(--foreground)\"]`</Table.Cell>\n      <Table.Cell>Array of stroke colors for the areas</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">fillColors</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[\"var(--primary)\"]`</Table.Cell>\n      <Table.Cell>Array of fill colors for the areas</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">tooltipBgColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--background)\"`</Table.Cell>\n      <Table.Cell>Background color for tooltips</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">tooltipBorderColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--border)\"`</Table.Cell>\n      <Table.Cell>Border color for tooltips</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">gridColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--muted)\"`</Table.Cell>\n      <Table.Cell>Color for the grid lines</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">valueFormatter</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`(value: number) => string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`(value) => value.toString()`</Table.Cell>\n      <Table.Cell>Function to format values</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">showGrid</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`boolean`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`true`</Table.Cell>\n      <Table.Cell>Whether to show grid lines</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">showTooltip</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`boolean`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`true`</Table.Cell>\n      <Table.Cell>Whether to show tooltips on hover</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">className</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">-</Table.Cell>\n      <Table.Cell>Additional CSS classes</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>\n"
  },
  {
    "path": "content/docs/charts/bar-chart.mdx",
    "content": "---\ntitle: Bar Chart\ndescription: A customizable bar chart component to visualize your data with support for multiple categories, custom colors, and horizontal alignment. 📊\nlastUpdated: 02 Jan, 2026\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/BarChart.tsx\n---\n\n<ComponentShowcase name=\"bar-chart-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add 'https://retroui.dev/r/bar-chart.json'\" />\n  <ComponentInstall.Manual>\n\n#### 1. Install dependencies:\n\n```sh\nnpm install recharts\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"barChart\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"bar-chart-style-default\" />\n<br />\n<br />\n\n### Grouped Data\n\n<ComponentShowcase name=\"bar-chart-style-grouped\" />\n<br />\n<br />\n\n### Stacked Data\n\n<ComponentShowcase name=\"bar-chart-style-stacked\" />\n<br />\n<br />\n\n### Horizontal Alignment\n\n<ComponentShowcase name=\"bar-chart-style-horizontal\" />\n<br />\n<br />\n\n## API Reference\n\n<Table>\n  <Table.Header>\n    <Table.Row>\n      <Table.Head>Prop</Table.Head>\n      <Table.Head>Type</Table.Head>\n      <Table.Head>Default</Table.Head>\n      <Table.Head>Description</Table.Head>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">data</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`Record<string, any>[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[]`</Table.Cell>\n      <Table.Cell>Array of data objects to display</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">index</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">-</Table.Cell>\n      <Table.Cell>Key for the x-axis (category) data</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">categories</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[]`</Table.Cell>\n      <Table.Cell>Array of keys for the data values to display as bars</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">alignment</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"vertical\" | \"horizontal\"`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"vertical\"`</Table.Cell>\n      <Table.Cell>Orientation of the bars</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">strokeColors</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[\"var(--foreground)\"]`</Table.Cell>\n      <Table.Cell>Array of stroke colors for the bars</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">fillColors</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[\"var(--primary)\"]`</Table.Cell>\n      <Table.Cell>Array of fill colors for the bars</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">tooltipBgColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--background)\"`</Table.Cell>\n      <Table.Cell>Background color for tooltips</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">tooltipBorderColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--border)\"`</Table.Cell>\n      <Table.Cell>Border color for tooltips</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">gridColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--muted)\"`</Table.Cell>\n      <Table.Cell>Color for the grid lines</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">valueFormatter</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`(value: number) => string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`(value) => value.toString()`</Table.Cell>\n      <Table.Cell>Function to format values</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">showGrid</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`boolean`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`true`</Table.Cell>\n      <Table.Cell>Whether to show grid lines</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">showTooltip</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`boolean`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`true`</Table.Cell>\n      <Table.Cell>Whether to show tooltips on hover</Table.Cell>\n    </Table.Row>\n        <Table.Row>\n      <Table.Cell className=\"font-medium\">stacked</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`boolean`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`false`</Table.Cell>\n      <Table.Cell>Whether to stack the bars</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">className</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">-</Table.Cell>\n      <Table.Cell>Additional CSS classes</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>\n"
  },
  {
    "path": "content/docs/charts/line-chart.mdx",
    "content": "---\ntitle: Line Chart\ndescription: A customizable line chart component to visualize trends and data over time with smooth curves and data points. 📉\nlastUpdated: 12 Aug, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/LineChart.tsx\n---\n\n<ComponentShowcase name=\"line-chart-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add 'https://retroui.dev/r/line-chart.json'\" />\n  <ComponentInstall.Manual>\n\n#### 1. Install dependencies:\n\n```sh\nnpm install recharts\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"lineChart\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"line-chart-style-default\" />\n<br />\n<br />\n\n### Multiple Lines\n\n<ComponentShowcase name=\"line-chart-style-multiple\" />\n<br />\n<br />\n\n## API Reference\n\n<Table>\n  <Table.Header>\n    <Table.Row>\n      <Table.Head>Prop</Table.Head>\n      <Table.Head>Type</Table.Head>\n      <Table.Head>Default</Table.Head>\n      <Table.Head>Description</Table.Head>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">data</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`Record<string, any>[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[]`</Table.Cell>\n      <Table.Cell>Array of data objects to display</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">index</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">-</Table.Cell>\n      <Table.Cell>Key for the x-axis (category) data</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">categories</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[]`</Table.Cell>\n      <Table.Cell>Array of keys for the data values to display as lines</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">strokeColors</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[\"var(--foreground)\"]`</Table.Cell>\n      <Table.Cell>Array of stroke colors for the lines</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">strokeWidth</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`number`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`2`</Table.Cell>\n      <Table.Cell>Width of the line strokes</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">dotSize</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`number`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`4`</Table.Cell>\n      <Table.Cell>Size of the data point dots</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">tooltipBgColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--background)\"`</Table.Cell>\n      <Table.Cell>Background color for tooltips</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">tooltipBorderColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--border)\"`</Table.Cell>\n      <Table.Cell>Border color for tooltips</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">gridColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--muted)\"`</Table.Cell>\n      <Table.Cell>Color for the grid lines</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">valueFormatter</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`(value: number) => string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`(value) => value.toString()`</Table.Cell>\n      <Table.Cell>Function to format values</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">showGrid</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`boolean`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`true`</Table.Cell>\n      <Table.Cell>Whether to show grid lines</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">showTooltip</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`boolean`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`true`</Table.Cell>\n      <Table.Cell>Whether to show tooltips on hover</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">className</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">-</Table.Cell>\n      <Table.Cell>Additional CSS classes</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>\n"
  },
  {
    "path": "content/docs/charts/pie-chart.mdx",
    "content": "---\ntitle: Pie Chart\ndescription: A customizable pie chart component to visualize proportional data with support for donut charts. 🍰\nlastUpdated: 12 Aug, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/PieChart.tsx\n---\n\n<ComponentShowcase name=\"pie-chart-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add 'https://retroui.dev/r/pie-chart.json'\" />\n  <ComponentInstall.Manual>\n\n#### 1. Install dependencies:\n\n```sh\nnpm install recharts\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"pieChart\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"pie-chart-style-default\" />\n<br />\n<br />\n\n### Donut Chart\n\n<ComponentShowcase name=\"pie-chart-style-donut\" />\n<br />\n<br />\n\n## API Reference\n\n<Table>\n  <Table.Header>\n    <Table.Row>\n      <Table.Head>Prop</Table.Head>\n      <Table.Head>Type</Table.Head>\n      <Table.Head>Default</Table.Head>\n      <Table.Head>Description</Table.Head>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">data</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`Record<string, any>[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[]`</Table.Cell>\n      <Table.Cell>Array of data objects to display</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">dataKey</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">-</Table.Cell>\n      <Table.Cell>Key for the data values</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">nameKey</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">-</Table.Cell>\n      <Table.Cell>Key for the category names</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">colors</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string[]`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`[\"var(--chart-1)\", ...]`</Table.Cell>\n      <Table.Cell>Array of colors for the pie segments</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">innerRadius</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`number`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`0`</Table.Cell>\n      <Table.Cell>Inner radius (use > 0 for donut chart)</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">outerRadius</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`number`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`80`</Table.Cell>\n      <Table.Cell>Outer radius of the pie</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">tooltipBgColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--background)\"`</Table.Cell>\n      <Table.Cell>Background color for tooltips</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">tooltipBorderColor</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`\"var(--border)\"`</Table.Cell>\n      <Table.Cell>Border color for tooltips</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">valueFormatter</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`(value: number) => string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`(value) => value.toString()`</Table.Cell>\n      <Table.Cell>Function to format values</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">showTooltip</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`boolean`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`true`</Table.Cell>\n      <Table.Cell>Whether to show tooltips on hover</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell className=\"font-medium\">className</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">`string`</Table.Cell>\n      <Table.Cell className=\"*:text-xs\">-</Table.Cell>\n      <Table.Cell>Additional CSS classes</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>\n"
  },
  {
    "path": "content/docs/components/accordion.mdx",
    "content": "---\ntitle: Accordion\ndescription: This collapsible component let's your users read only the content they care about. 😌\nlastUpdated: 19 Oct, 2024\nlinks:\n  api_reference: https://www.radix-ui.com/primitives/docs/components/accordion#api-reference\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Accordion.tsx\n---\n\n<ComponentShowcase name=\"accordion-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/accordion\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-accordion lucide-react\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"accordion\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"accordion-style-default\" />\n"
  },
  {
    "path": "content/docs/components/alert.mdx",
    "content": "---\ntitle: Alert\ndescription: Notify your users about important events and updates. 📣\nlastUpdated: 24 Oct, 2024\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Alert.tsx\n---\n\n<ComponentShowcase name=\"alert-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/alert\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install class-variance-authority\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"alert\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"alert-style-default\" />\n<br />\n<br />\n\n### Solid\n\n<ComponentShowcase name=\"alert-style-solid\" />\n<br />\n<br />\n\n### With Icon\n\n<ComponentShowcase name=\"alert-style-with-icon\" />\n<br />\n<br />\n\n### Status\n\n<ComponentShowcase name=\"alert-style-all-status\" />\n"
  },
  {
    "path": "content/docs/components/avatar.mdx",
    "content": "---\ntitle: Avatar\ndescription: Default rounded avatar that can show your users profile picture. ✨\nlastUpdated: 12 Oct, 2024\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Avatar.tsx\n---\n\n<ComponentShowcase name=\"avatar-style-circle\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/avatar\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-avatar\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"avatar\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Size variants\n\n<ComponentShowcase name=\"avatar-style-circle-sizes\" />\n\n<br />\n<br />\n\n### Fallbacks\n\nFallbacks are helpfull when there ia an error loading the src of the avatar.\nYou can set fallbacks with `Avatar.Fallback` component.\n\n<br />\n\n<ComponentShowcase name=\"avatar-style-circle-fallbacks\" />\n"
  },
  {
    "path": "content/docs/components/badge.mdx",
    "content": "---\ntitle: Badge\ndescription: The component that looks like a button but isn't clickable!\nlastUpdated: 30 Oct, 2024\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Badge.tsx\n---\n\n<ComponentShowcase name=\"badge-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/badge\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install class-variance-authority\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"badge\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<hr />\n<br />\n<ComponentShowcase name=\"badge-style-default\" />\n<br />\n<br />\n\n### Variants\n\n<hr />\n<br />\n<ComponentShowcase name=\"badge-style-variants\" />\n<br />\n<br />\n\n### Rounded\n\n<ComponentShowcase name=\"badge-style-rounded\" />\n<br />\n<br />\n\n### Sizes\n\n<ComponentShowcase name=\"badge-style-sizes\" />\n"
  },
  {
    "path": "content/docs/components/breadcrumb.mdx",
    "content": "---\ntitle: Breadcrumb\ndescription: A navigation component that shows users where they are within a hierarchy.\nlastUpdated: 12 May, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Breadcrumb.tsx\n---\n\n<ComponentShowcase name=\"breadcrumb-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/breadcrumb\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install lucide-react class-variance-authority\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"breadcrumb\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<hr />\n<br />\n<ComponentShowcase name=\"breadcrumb-style-default\" />\n<br />\n<br />\n\n### Custom Separator\n\n<hr />\n<br />\n<ComponentShowcase name=\"breadcrumb-custom-separator\" />\n<br />\n<br />\n\n### Collapsed\n\n<hr />\n<br />\n<ComponentShowcase name=\"breadcrumb-style-collapsed\" />\n<br />\n<br />\n\n### Link Component\n\n<hr />\n<br />\n<ComponentShowcase name=\"breadcrumb-link-component\" />\n<br />\n<br />\n"
  },
  {
    "path": "content/docs/components/button.mdx",
    "content": "---\ntitle: Button\ndescription: This bold button makes sure your users click on it and perform the actions you want! 🚀\nlastUpdated: 17 Oct, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Button.tsx\n---\n\n<ComponentShowcase name=\"button-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/button\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install class-variance-authority\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"button\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Primary\n\n<ComponentShowcase name=\"button-style-default\" />\n<br />\n<br />\n\n### Secondary\n\n<ComponentShowcase name=\"button-style-secondary\" />\n<br />\n<br />\n\n### Outline\n\n<ComponentShowcase name=\"button-style-outline\" />\n<br />\n<br />\n\n### Link\n\n<ComponentShowcase name=\"button-style-link\" />\n<br />\n<br />\n\n### Icon\n\n<ComponentShowcase name=\"button-style-icon\" />\n<br />\n<br />\n\n### With Icon\n\n<ComponentShowcase name=\"button-style-with-icon\" />\n"
  },
  {
    "path": "content/docs/components/calendar.mdx",
    "content": "---\ntitle: Calendar\ndescription: Let your users select a date to cancel subscription.\nlastUpdated: 14 Nov, 2025\n---\n\n<ComponentShowcase name=\"calendar-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/calendar\" />\n  <ComponentInstall.Manual>\n  \n#### 1. Install dependencies:\n\n```sh\nnpm install react-day-picker lucide-react\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"calendar\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"calendar-style-default\" />"
  },
  {
    "path": "content/docs/components/card.mdx",
    "content": "---\ntitle: Card\ndescription: A customizable card component to visualize your content. 📝\nlastUpdated: 09 Sep, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Card.tsx\n---\n\n<ComponentShowcase name=\"card-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/card\" />\n  <ComponentInstall.Manual>\n\n#### Copy the code 👇 into your project:\n\n<ComponentSource name=\"card\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Title with description\n\n<ComponentShowcase name=\"card-style-default\" />\n<br />\n<br />\n\n### Product card\n\n<ComponentShowcase name=\"card-style-commerce\" />\n<br />\n<br />\n\n### Testimonial card\n\n<ComponentShowcase name=\"card-style-testimonial\" />\n<br />\n<br />\n\n### Retro player card\n\n<ComponentShowcase name=\"retro-player\" />"
  },
  {
    "path": "content/docs/components/carousel.mdx",
    "content": "---\ntitle: Carousel\ndescription: Let your users select a date to cancel subscription.\nlastUpdated: 14 Nov, 2025\n---\n\n<ComponentShowcase name=\"carousel-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/carousel\" />\n  <ComponentInstall.Manual>\n  \n#### 1. Install dependencies:\n\n```sh\nnpm install react-day-picker lucide-react\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"carousel\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"carousel-style-default\" />\n\n<br />\n<br />\n\n### Sizes\n\n<ComponentShowcase name=\"carousel-style-sizes\" />\n\n<br />\n<br />\n\n### Vertical\n\n<ComponentShowcase name=\"carousel-style-vertical\" />\n\n"
  },
  {
    "path": "content/docs/components/checkbox.mdx",
    "content": "---\ntitle: Checkbox\ndescription: Let users confirm or reject an option.\nlastUpdated: 13 Feb, 2024\nlinks:\n  api_reference: https://www.radix-ui.com/primitives/docs/components/checkbox#api-reference\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Checkbox.tsx\n---\n\n<ComponentShowcase name=\"checkbox-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/checkbox\" />\n  <ComponentInstall.Manual>\n  \n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-checkbox class-variance-authority lucide-react\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"checkbox\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Variants\n\n<ComponentShowcase name=\"checkbox-style-variants\" />\n<br />\n<br />\n\n### Sizes\n\n<ComponentShowcase name=\"checkbox-style-sizes\" />\n"
  },
  {
    "path": "content/docs/components/command.mdx",
    "content": "---\ntitle: Command\ndescription: A command palette component for quick navigation and actions\nlastUpdated: 21 Aug, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Command.tsx\n---\n\n<ComponentShowcase name=\"command-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/command\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install class-variance-authority cmdk\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"command\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Dialog\n\n<ComponentShowcase name=\"command-style-dialog\" />\n<br />\n<br />\n"
  },
  {
    "path": "content/docs/components/context-menu.mdx",
    "content": "---\ntitle: Context Menu\ndescription: Displays a menu to the user — such as a set of actions or functions — triggered by a button.\nlastUpdated: 09 Sep, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/ContextMenu.tsx\n---\n\n<ComponentShowcase name=\"context-menu-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/context-menu\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install class-variance-authority\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"context-menu\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n"
  },
  {
    "path": "content/docs/components/dialog.mdx",
    "content": "---\ntitle: Dialog\ndescription: An impactful dialog that ensures your important messages and actions get the attention they deserve! 💬✨\nlastUpdated: 09 Sep, 2025\nlinks:\n  api_reference: https://www.radix-ui.com/primitives/docs/components/dialog#api-reference\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Dialog.tsx\n---\n\n<ComponentShowcase name=\"dialog-style-default\" />\n<br />\n<br />\n\n## Instalation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/dialog\" />\n  <ComponentInstall.Manual>\n  \n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-dialog @radix-ui/react-visually-hidden tailwindcss-animate\n```\n\n<br />\n\n#### 2. Configure your `tailwind.config.ts` add:\n\n```sh\n{\n  content: [...],\n  theme: [...],\n\n  // add plugin\n  plugins: [require(\"tailwindcss-animate\")],\n}\n```\n\n#### 3. Copy the code 👇 into your project:\n\n<ComponentSource name=\"dialog\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Example\n\n### Confirm dialog message\n\n<ComponentShowcase name=\"dialog-style-default\" />\n<br />\n<br />\n\n### With footer\n\n<ComponentShowcase name=\"dialog-style-with-footer\" />\n\n<br />\n<br />\n\n### Size variants\n\n<ComponentShowcase name=\"dialog-style-width-variant\" />\n\n<br />\n<br />\n\n### With form\n\n<ComponentShowcase name=\"dialog-style-with-form\" />\n"
  },
  {
    "path": "content/docs/components/drawer.mdx",
    "content": "---\ntitle: Drawer\ndescription: A component that can slide in from any side of the screen.\nlastUpdated: 21 Aug, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Command.tsx\n---\n\n<ComponentShowcase name=\"drawer-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/drawer\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install vaul\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"drawer\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"drawer-style-default\" />\n<br />\n<br />\n\n### Different Direction\n\n<ComponentShowcase name=\"drawer-style-right-direction\" />\n<br />\n<br />\n"
  },
  {
    "path": "content/docs/components/empty.mdx",
    "content": "---\ntitle: Empty\ndescription: The component that shows when there is no data to show!\nlastUpdated: 13 Jan, 2026\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Empty.tsx\n---\n\n<ComponentShowcase name=\"empty-style-default\" />\n\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/empty\" />\n  <ComponentInstall.Manual>\n\n#### Copy the code 👇 into your project:\n\n<ComponentSource name=\"empty\" />\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"empty-style-default\" />\n\n<br />\n<br />\n\n### Custom Icon\n\n<ComponentShowcase name=\"empty-style-custom-icon\" />\n\n<br />\n<br />\n\n### Customize everything\n\n<ComponentShowcase name=\"empty-style-custom-everything\" />\n\n<br />\n<br />\n\n### Using with table\n\n<ComponentShowcase name=\"empty-style-table\" />\n\n<br />\n<br />\n\n## API Reference\n\nThe Empty component is composed of several sub-components:\n\n<br />\n\n- `Empty` - The main component wrapper\n- `Empty.Content` - Wrapper for the content elements\n- `Empty.Icon` - Section for displaying an icon\n- `Empty.Title` - The main heading for the empty state\n- `Empty.Separator` - A visual separator line\n- `Empty.Description` - Supporting text for the empty state\n"
  },
  {
    "path": "content/docs/components/input.mdx",
    "content": "---\ntitle: Input\ndescription: This pretty input makes your users want to type stuff! ⌨️\nlastUpdated: 09 Sep, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Input.tsx\n---\n\n<ComponentShowcase name=\"input-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/input\" />\n  <ComponentInstall.Manual>\n  \n#### 1. Copy the code 👇 into your project:\n\n<ComponentSource name=\"input\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"input-style-default\" />\n<br />\n<br />\n\n### With label\n\n<ComponentShowcase name=\"input-style-with-label\" />\n<br />\n<br />\n\n### Error\n\n<ComponentShowcase name=\"input-style-error\" />\n<br />\n"
  },
  {
    "path": "content/docs/components/label.mdx",
    "content": "---\ntitle: Label\ndescription: A universal component for labeling various inputs.\nlastUpdated: 09 Sep, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Label.tsx\n---\n\n<ComponentShowcase name=\"label-style-default\" />\n\n<br />\n<br />\n\n <ComponentInstall>\n    <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/label\" />\n    <ComponentInstall.Manual>\n    #### 1. Install dependencies:\n\n    ```sh\n    npm install @radix-ui/react-label\n    ```\n\n    <br />\n    #### 2. Copy the code 👇 into your project:\n\n    <ComponentSource name=\"label\" />\n    </ComponentInstall.Manual>\n\n</ComponentInstall>\n\n<br />\n<br />\n\n## Usage\n\n```tsx\nimport { Label } from \"@/components/retroui/Label\";\n```\n"
  },
  {
    "path": "content/docs/components/loader.mdx",
    "content": "---\ntitle: Loader\ndescription: A customizable loading indicator with bouncing squares. 🔄\nlastUpdated: 20 Aug, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Loader.tsx\n---\n\n<ComponentShowcase name=\"loader-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/loader\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install class-variance-authority\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"loader\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"loader-style-default\" />\n<br />\n<br />\n\n### Secondary\n\n<ComponentShowcase name=\"loader-style-solid\" />\n<br />\n<br />\n\n### Outline\n\n<ComponentShowcase name=\"loader-style-outline\" />\n<br />\n<br />\n\n### Sizes\n\n<ComponentShowcase name=\"loader-style-sizes\" />\n<br />\n<br />\n\n### Custom Configurations\n\n<ComponentShowcase name=\"loader-style-custom\" />\n<br />\n<br />\n\n## Usage\n\n```tsx\nimport { Loader } from \"@/components/ui/loader\"\n\n// Default\n<Loader />\n\n// With variants\n<Loader variant=\"secondary\" size=\"lg\" />\n\n// Custom configuration\n<Loader\n  count={4}           // Number of squares\n  duration={1.2}      // Animation duration in seconds\n  delayStep={120}     // Delay between squares in milliseconds\n/>\n\n// Fully customized\n<Loader\n  variant=\"secondary\"\n  size=\"lg\"\n  count={4}\n  duration={1.2}\n  delayStep={120}\n  className=\"my-4\"\n/>\n```\n\n## Props\n\n- - `variant`\n\n  * Type: `default` | `secondary` | `outline`\n  * Default: `default`\n  * Description: Defines the style variant for the component\n\n- - `size`\n\n  * Type: `sm` | `md` | `lg`\n  * Default: `md`\n  * Description: Controls the size of the loader squares\n\n- - `count`\n\n  * Type: `number`\n  * Default: `3`\n  * Description: Sets the number of bouncing squares\n\n- - `duration`\n\n  * Type: `number`\n  * Default: `0.5`\n  * Description: Controls the animation duration in seconds\n\n- - `delayStep`\n\n  * Type: `number`\n  * Default: `100`\n  * Description: Defines the delay between squares in milliseconds\n\n- - `className`\n\n  * Type: `string`\n  * Default: `undefined`\n  * Description: Allows for adding additional CSS classes for custom styling\n\n- - `asChild`\n  * Type: `boolean`\n  * Default: `false`\n  * Description: When `true`, merges the component's props onto its immediate child element\n\n## Accessibility\n\nThe Loader component includes the following attributes:\n\n- `role=\"status\"`\n- `aria-label=\"Loading...\"`\n\nThis ensures screen readers can properly announce the loading state to users.\n"
  },
  {
    "path": "content/docs/components/menu.mdx",
    "content": "---\ntitle: Menu\ndescription: Show your users a list of actions they can take. 📋\nlastUpdated: 09 Sep, 2025\nlinks:\n  api_reference: https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Menu.tsx\n---\n\n<ComponentShowcase name=\"menu-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/menu\" />\n  <ComponentInstall.Manual>\n\n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-dropdown-menu\n```\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"menu\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"menu-style-default\" />\n"
  },
  {
    "path": "content/docs/components/popover.mdx",
    "content": "---\ntitle: Popover\ndescription: A handy small component for your little input needs...😉\nlastUpdated: 09 Sep, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Popover.tsx\n---\n\n<ComponentShowcase name=\"popover-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/popover\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-popover\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"popover\" />\n    </ComponentInstall.Manual>\n\n</ComponentInstall>\n\n<br />\n<br />\n\n## Usage\n\n```typescript\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/retroui/Popover\";\n```\n\n```typescript\n<Popover>\n  <PopoverTrigger>Open</PopoverTrigger>\n  <PopoverContent>Place content for the popover here.</PopoverContent>\n</Popover>\n```\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"popover-style-default\" />\n<br />\n<br />\n\n### Shadowed\n\n<ComponentShowcase name=\"popover-style-default-shadow\" />\n<br />\n<br />\n"
  },
  {
    "path": "content/docs/components/progress.mdx",
    "content": "---\ntitle: Progress\ndescription: Let's you users know how long to wait.\nlastUpdated: 09 Sep, 2025\nlinks:\n  api_reference: https://www.radix-ui.com/docs/primitives/components/progress#api-reference\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Progress.tsx\n---\n\n<ComponentShowcase name=\"progress-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/progress\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-progress lucide-react\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"progress\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"progress-style-default\" />"
  },
  {
    "path": "content/docs/components/radio.mdx",
    "content": "---\ntitle: Radio\ndescription: Sometimes you need to pick multiple options! That's where the Radio component comes into play.\nlastUpdated: 09 Sep, 2025\nlinks:\n  api_reference: https://www.radix-ui.com/primitives/docs/components/radio-group#api-reference\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Radio.tsx\n---\n\n<ComponentShowcase name=\"radio-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/radio\" />\n  <ComponentInstall.Manual>\n\n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-radio-group class-variance-authority\n```\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"radio\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Variants\n\n<ComponentShowcase name=\"radio-style-variants\" />\n<br />\n<br />\n\n### Sizes\n\n<ComponentShowcase name=\"radio-style-sizes\" />\n<br />\n<br />\n"
  },
  {
    "path": "content/docs/components/select.mdx",
    "content": "---\ntitle: Select\ndescription: Let your users pick what they want.\nlastUpdated: 09 Sep, 2025\nlinks:\n  api_reference: https://www.radix-ui.com/primitives/docs/components/select#api-reference\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Select.tsx\n---\n\n<ComponentShowcase name=\"select-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/select\" />\n  <ComponentInstall.Manual>\n  \n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-select class-variance-authority\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"select\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"select-style-default\" />\n"
  },
  {
    "path": "content/docs/components/slider.mdx",
    "content": "---\ntitle: Slider\ndescription: A customizable slider component with two variants.\nlastUpdated: 09 Sep, 2025\nlinks:\n  api_reference: https://www.radix-ui.com/docs/primitives/components/slider#api-reference\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Slider.tsx\n---\n\n<ComponentShowcase name=\"slider-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/slider\" />\n  <ComponentInstall.Manual>\n\n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-slider\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"slider\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"slider-style-default\" />\n"
  },
  {
    "path": "content/docs/components/sonner.mdx",
    "content": "---\ntitle: Sonner\ndescription: A beautiful toast component that can grab audience attention from any place.\nlastUpdated: 09 Sep, 2025\nlinks:\n  api_reference: https://sonner.emilkowal.ski/toast#api-reference\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Sonner.tsx\n---\n\n<ComponentShowcase name=\"sonner-style-default\" />\n<br />\n<br />\n\n## About\n\n[Sonner](https://sonner.emilkowal.ski) is built and maintained by [Emil Kowalski](https://x.com/emilkowalski_)\n\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/sonner\" />\n  <ComponentInstall.Manual>\n    #### 1. Install dependencies:\n\n    ```sh\n    npm install sonner\n    ```\n\n    <br />\n    #### 2. Copy the code 👇 into your project:\n\n    <ComponentSource name=\"sonner\" />\n\n    <br/>\n    ### 3. Add ``Toaster`` in your ``app/layout.tsx``\n\n    ```tsx\n    import { Toaster } from \"@/components/retroui/sonner\"\n\n    export default function RootLayout({ children }) {\n      return (\n        <html lang=\"en\">\n          <head />\n          <body>\n            <main>{children}</main>\n            <Toaster />\n          </body>\n        </html>\n      )\n    }\n    ```\n    </ComponentInstall.Manual>\n\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"sonner-style-default\" />\n<br />\n<br />\n\n### Status\n\n<ComponentShowcase name=\"sonner-style-status\" />\n<br />\n<br />\n\n### Colored Status\n\n<ComponentShowcase name=\"sonner-style-colored-status\" />\n"
  },
  {
    "path": "content/docs/components/switch.mdx",
    "content": "---\ntitle: Switch\ndescription: Let users to turn on or off your marketing emails or notifications.\nlastUpdated: 09 Sep, 2025\nlinks:\n  api_reference: https://www.radix-ui.com/primitives/docs/components/switch#api-reference\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Switch.tsx\n---\n\n<ComponentShowcase name=\"switch-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/switch\" />\n  <ComponentInstall.Manual>\n  \n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-switch\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"switch\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"switch-style-default\" />\n<br />\n<br />\n\n### Disabled\n\n<ComponentShowcase name=\"switch-style-disabled\" />\n<br />\n<br />\n"
  },
  {
    "path": "content/docs/components/tab.mdx",
    "content": "---\ntitle: Tabs\ndescription: Switch between different views using tabs.\nlastUpdated: 08 Oct, 2024\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Tab.tsx\n---\n\n### Default\n\n<hr />\n<br />\n<ComponentShowcase name=\"tab-style-default\" />\n"
  },
  {
    "path": "content/docs/components/table.mdx",
    "content": "---\ntitle: Table\ndescription: Display your data in a structured tabular format.\nlastUpdated: 14 Nov, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Table.tsx\n---\n\n<ComponentShowcase name=\"table-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/table\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install class-variance-authority\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"table\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"table-style-default\" />\n<br />\n<br />\n\n### With Checkbox Selection\n\n<ComponentShowcase name=\"table-with-checkbox\" />\n<br />\n<br />\n\n### With Sticky Header\n\n<ComponentShowcase name=\"table-with-sticky-header\" />\n<br />\n<br />\n\n## API Reference\n\nThe Table component is composed of several sub-components:\n<br />\n\n  - `Table` - The main table wrapper\n  - `Table.Header` - Table header section (`<thead>`)\n  - `Table.Body` - Table body section (`<tbody>`)\n  - `Table.Footer` - Table footer section (`<tfoot>`)\n  - `Table.Row` - Table row (`<tr>`)\n  - `Table.Head` - Table header cell (`<th>`)\n  - `Table.Cell` - Table data cell (`<td>`)\n"
  },
  {
    "path": "content/docs/components/text.mdx",
    "content": "---\ntitle: Text\ndescription: Show your texts in different styles. 💅\nlastUpdated: 09 Sep, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Text.tsx\n---\n\n## Headings\n\nThe `Text` component is a versatile React component that provides various heading styles. It leverages class-variance-authority for managing variants and allows for the customization of heading elements.\n\n<hr />\n<br />\n\n<ComponentShowcase name=\"text-headings\" />\n<br />\n\n#### Props\n\n`className`: Additional CSS classes to customize the component's styling.\n\n<br />\n\n`as`: Determines the heading and text style. Default is `p`. Variants include:\n\n- `\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"p\"`\n\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/text\" />\n  <ComponentInstall.Manual>\n  \n#### 1. Install dependencies:\n\n```sh\nnpm install class-variance-authority\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"text\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Paragraph\n\n<ComponentShowcase name=\"typography-p\" />\n"
  },
  {
    "path": "content/docs/components/textarea.mdx",
    "content": "---\ntitle: Textarea\ndescription: This pretty input makes your users want to type lots of stuff! ⌨️ ⌨️\nlastUpdated: 08 Oct, 2024\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Textarea.tsx\n---\n\n### Default\n\n<hr />\n<br />\n<ComponentShowcase name=\"textarea-style-default\" />\n"
  },
  {
    "path": "content/docs/components/toc.mdx",
    "content": "---\ntitle: Table of Contents\ndescription: Generate a table of contents for your markdown content.\nlastUpdated: 08 Oct, 2024\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Tab.tsx\n---\n\n<ComponentShowcase name=\"toc-style-default\" />\n<br />\n<br />\n\n## Installation\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/toc\" />\n  <ComponentInstall.Manual>\n  \n#### 1. Copy the code 👇 into your project:\n\n<ComponentSource name=\"toc\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"toc-style-default\" />\n<br />\n<br />\n\n\n### Adjust depth\n\n<ComponentShowcase name=\"toc-style-depth\" />\n<br />\n<br />\n\n### Manual data\n\n<ComponentShowcase name=\"toc-style-manual\" />\n<br />\n<br />"
  },
  {
    "path": "content/docs/components/toggle-group.mdx",
    "content": "---\ntitle: Toggle Group\ndescription: Group of toggling buttons...🤙\nlastUpdated: 09 Sep, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/ToggleGroup.tsx\n---\n\n<ComponentShowcase name=\"toggle-group-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/toggle-group\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-toggle-group @radix-ui/react-toggle\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project `toggle.tsx`:\n\n<ComponentSource name=\"toggle\" />\n\n<br />\n\n#### 3. Copy the code 👇 into your project `toggle-group.tsx`:\n\n<ComponentSource name=\"toggle-group\" />\n    </ComponentInstall.Manual>\n\n</ComponentInstall>\n\n<br />\n<br />\n\n## Usage\n\n```tsx\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/components/retroui/toggle-group\";\n```\n\n```tsx\n<ToggleGroup type=\"single\">\n  <ToggleGroupItem value=\"a\">A</ToggleGroupItem>\n  <ToggleGroupItem value=\"b\">B</ToggleGroupItem>\n  <ToggleGroupItem value=\"c\">C</ToggleGroupItem>\n</ToggleGroup>\n```\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"toggle-group-style-default\" />\n<br />\n<br />\n\n### Outlined\n\n<ComponentShowcase name=\"toggle-group-style-outlined\" />\n<br />\n<br />\n\n### Solid\n\n<ComponentShowcase name=\"toggle-group-style-solid\" />\n<br />\n<br />\n\n### Outline Muted\n\n<ComponentShowcase name=\"toggle-group-style-outline-muted\" />\n"
  },
  {
    "path": "content/docs/components/toggle.mdx",
    "content": "---\ntitle: Toggle\ndescription: This crazy toggling button keeps people toggling...😃\nlastUpdated: 09 Sep, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Toggle.tsx\n---\n\n<ComponentShowcase name=\"toggle-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/toggle\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-toggle\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"toggle\" />\n    </ComponentInstall.Manual>\n\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"toggle-style-default\" />\n<br />\n<br />\n\n### Outlined\n\n<ComponentShowcase name=\"toggle-style-outlined\" />\n<br />\n<br />\n\n### Solid\n\n<ComponentShowcase name=\"toggle-style-solid\" />\n<br />\n<br />\n\n### Outline Muted\n\n<ComponentShowcase name=\"toggle-style-outline-muted\" />\n"
  },
  {
    "path": "content/docs/components/tooltip.mdx",
    "content": "---\ntitle: Tooltip\ndescription: A cool way to give your users a hint of what a component does...😉\nlastUpdated: 09 Sep, 2025\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Tooltip.tsx\n  api_reference: https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference\n---\n\n<ComponentShowcase name=\"tooltip-style-default\" />\n<br />\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add @retroui/tooltip\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install @radix-ui/react-tooltip\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"tooltip\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\n<br />\n\n## Examples\n\n### Default\n\n<ComponentShowcase name=\"tooltip-style-default\" />\n<br />\n<br />\n\n### Primary\n\n<ComponentShowcase name=\"tooltip-style-primary\" />\n<br />\n<br />\n\n### Solid\n\n<ComponentShowcase name=\"tooltip-style-solid\" />\n"
  },
  {
    "path": "content/docs/index.mdx",
    "content": "---\ntitle: Introduction\ndescription: Why another UI Library?\nlastUpdated: 7 Mar, 2024\n---\n\nIf you don't want to put much effort and time into designing your websites, It's hard to build something unique looking these days.\nMost of the UI libraries out here are very generic and hard to distinguish from each other.\n\n<br />\nSo when I started getting into `Retro/Neobrutalist design system`, I wanted to\nbuild my personal website with this design. But I couldn't find a UI library\nthat fit what I was looking for, So I start building my own!\n\n<br />\n\n### Welcome to RetroUI, The UI library that let's you build unique and playful websites.\n\nFollow the [Installation Guide](/docs/install) to get started.\n\n<br />\n<br />\n\n<div className=\"max-w-xl\">\n  <iframe\n    width=\"100%\"\n    height=\"300px\"\n    src=\"https://www.youtube.com/embed/7goHwy6k3gU?si=jwBAOm4ls_QtnN5r\"\n    title=\"YouTube video player\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    referrerpolicy=\"strict-origin-when-cross-origin\"\n    allowfullscreen\n  ></iframe>\n</div>\n\n<br />\n<br />\n<br />\n\n<div className=\"max-w-xl\">\n  <iframe\n    width=\"100%\"\n    height=\"300px\"\n    src=\"https://www.youtube.com/embed/t1a0IH-KAkw?si=yvUevTYbxloSFMJm\"\n    title=\"YouTube video player\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    referrerpolicy=\"strict-origin-when-cross-origin\"\n    allowfullscreen\n  ></iframe>\n</div>\n"
  },
  {
    "path": "content/docs/install/index.mdx",
    "content": "---\ntitle: Installation\ndescription: This guide will help you get started with RetroUI.\nlastUpdated: 30 May, 2025\n---\n\nRetroUI is meant to be compatible with all major `React` frameworks. But for now we are primarily working on `Next.js` , documentation for other frameworks will be live soon...\n\n<br />\n## Pick Framework\n\n<div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n\n<Card>\n  <Link href=\"/docs/install/nextjs\">\n    <Card.Header className=\"flex items-center justify-center space-y-4 py-8\">\n      <Image\n        src=\"/images/logos/nextjs.png\"\n        alt=\"nextjs logo\"\n        height={50}\n        width={50}\n      />\n      <Card.Description className=\"text-xl\">Next.js</Card.Description>\n    </Card.Header>\n  </Link>\n</Card>\n\n  <Card>\n    <Link href=\"/docs/install/vite\">\n    <Card.Header className=\"flex items-center justify-center space-y-4 py-8\">\n      <Image src=\"/images/logos/vite.png\" alt=\"vite logo\" height={50} width={50} />\n      <div className=\"flex items-center space-x-2\">\n        <Card.Description className=\"text-xl\">Vite</Card.Description>\n      </div>\n    </Card.Header>\n    </Link>\n  </Card>\n</div>\n"
  },
  {
    "path": "content/docs/install/nextjs.mdx",
    "content": "---\ntitle: Next.js\ndescription: RetroUI ❤️ Next.js\nlastUpdated: 6 Mar, 2024\n---\n\n### 1. Create Project\n\nRun the init command to create a new Next.js project or to setup an existing one:\n\n<CliCommand npmCommand=\"npx shadcn@latest init\" />\n\n<br />\n\n### 2. Install utilities\n\nIf the `libs/utils.ts` file is not present in your project, you can install it using the following command:\n\n<CliCommand npmCommand=\"npx shadcn@latest add https://retroui.dev/r/utils.json\" />\n\n<br />\n\n### 3. That's it 🚀\n\nNow you can start using RetroUI components in your project. You can install them through CLI or manually.\n\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add 'https://retroui.dev/r/button.json'\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n```sh\nnpm install class-variance-authority\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"button\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\n<br />\nAfter installing the component in your project, you can then simply import it like this:\n\n```tsx\nimport { Button } from \"@/components/retroui/Button\";\n\nexport default function ButtonExample() {\n  return <Button>Click Me!</Button>;\n}\n```\n\n<br />\n<br />\n\n### Optional\n\nYou are free to pick your own fonts and theme, but if you'd like to use RetroUI theme then use the following guide.\n\n<br />\n\n#### 1. Add Fonts\n\nWe are using `Archivo Black` for headings and `Space Grotesk` for everything else. You can install them from Nextjs fonts or manually from Google fonts.\n\n```tsx\nimport { Archivo_Black, Space_Grotesk } from \"next/font/google\";\n\nconst archivoBlack = Archivo_Black({\n  subsets: [\"latin\"],\n  weight: \"400\",\n  variable: \"--font-head\",\n  display: \"swap\",\n});\n\nconst space = Space_Grotesk({\n  subsets: [\"latin\"],\n  weight: \"400\",\n  variable: \"--font-sans\",\n  display: \"swap\",\n});\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <html lang=\"en\">\n      <body className={`${archivoBlack.variable} ${space.variable}`}>\n        {children}\n      </body>\n    </html>\n  );\n}\n```\n\n<br />\n\n#### 2. Add Theme\n\nSave your theme as CSS variables in `global.css`:\n\n```scss\n@theme {\n  --font-head: var(--font-head);\n  --font-sans: var(--font-sans);\n  --radius: var(--radius);\n\n  --shadow-xs: 1px 1px 0 0 var(--border);\n  --shadow-sm: 2px 2px 0 0 var(--border);\n  --shadow: 3px 3px 0 0 var(--border);\n  --shadow-md: 4px 4px 0 0 var(--border);\n  --shadow-lg: 6px 6px 0 0 var(--border);\n  --shadow-xl: 10px 10px 0 1px var(--border);\n  --shadow-2xl: 16px 16px 0 1px var(--border);\n\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-primary-hover: var(--primary-hover);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n}\n\n:root {\n  --radius: 0;\n  --background: #fff;\n  --foreground: #000;\n  --card: #fff;\n  --card-foreground: #000;\n  --primary: #ffdb33;\n  --primary-hover: #ffcc00;\n  --primary-foreground: #000;\n  --secondary: #000;\n  --secondary-foreground: #fff;\n  --muted: #aeaeae;\n  --muted-foreground: #5a5a5a;\n  --accent: #fae583;\n  --accent-foreground: #000;\n  --destructive: #e63946;\n  --destructive-foreground: #fff;\n  --border: #000;\n}\n\n.dark {\n  --radius: 0;\n  --background: #1a1a1a;\n  --foreground: #f5f5f5;\n  --card: #242424;\n  --card-foreground: #f5f5f5;\n  --primary: #ffdb33;\n  --primary-hover: #ffcc00;\n  --primary-foreground: #000;\n  --secondary: #3a3a3a;\n  --secondary-foreground: #f5f5f5;\n  --muted: #3f3f46;\n  --muted-foreground: #a0a0a0;\n  --accent: #fae583;\n  --accent-foreground: #000;\n  --destructive: #e63946;\n  --destructive-foreground: #fff;\n  --border: #3a3a3a;\n}\n```\n\n<br />\n\nIf you need any additional help, you can feel free to ask it in our Discord community."
  },
  {
    "path": "content/docs/install/vite.mdx",
    "content": "---\ntitle: Vite\ndescription: RetroUI ❤️ Vite\nlastUpdated: 30 May, 2025\n---\n\n### 1. Create Project\n\nStart by creating a new React project using vite. Select the React + TypeScript template:\n\n<CliCommand npmCommand=\"npm create vite@latest\" />\n\n<br />\n\n### 2. Install Tailwind CSS\n\nInstall Tailwind CSS using the following command:\n\n<CliCommand npmCommand=\"npm install tailwindcss @tailwindcss/vite\" />\n\nReplace everything in src/index.css with the following:\n\n```css\n@import \"tailwindcss\";\n```\n\n<br />\n\n### 3. Edit tsconfig.json file\n\nThe current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and `tsconfig.app.json` files:\n\n```json\n{\n  \"files\": [],\n  \"references\": [\n    {\n      \"path\": \"./tsconfig.app.json\"\n    },\n    {\n      \"path\": \"./tsconfig.node.json\"\n    }\n  ],\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\"./src/*\"]\n    }\n  }\n}\n```\n\n<br />\n\n### 4. Edit tsconfig.app.json file\nAdd the following code to the tsconfig.app.json file to resolve paths, for your IDE:\n\n```json\n{\n  \"compilerOptions\": {\n    // ...\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\n        \"./src/*\"\n      ]\n    }\n    // ...\n  }\n}\n```\n\n\n\n<br />\n\n### 5. Update vite.config.ts\n\nAdd the following code to the vite.config.ts so your app can resolve paths without error:\n\n<CliCommand npmCommand=\"npm install -D @types/node\" />\n\nvite.config.ts\n```ts\nimport path from \"path\"\nimport tailwindcss from \"@tailwindcss/vite\"\nimport react from \"@vitejs/plugin-react\"\nimport { defineConfig } from \"vite\"\n\n// https://vite.dev/config/\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n  resolve: {\n    alias: {\n      \"@\": path.resolve(__dirname, \"./src\"),\n    },\n  },\n})\n```\n\n<br />\n\n### 6. Install Shadcn\nRun the `shadcn init` command to setup your project:\n\n<CliCommand npmCommand=\"npx shadcn@latest init\" />\n\nYou will be asked a few questions to configure components.json. Select the option you want to use.\n\n<br />\n\n### 7. Add RetroUI Theme\nTo make your app look like RetroUI, you need to add the theme to your app. You can later customize it to your liking.\n\n#### 1. Install fonts\n\nWe are using `Archivo Black` for headings and `Space Grotesk` for everything else. You can install them from Google fonts.\nOnce your have the fonts, import them in your `index.html` or `styles.css` file:\n\n```html\n<!-- index.html -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300..700&display=swap\"\n      rel=\"stylesheet\"\n    />\n```\nor, \n\n```css\n/* styles.css */\n@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');\n```\n<br />\n\n#### 2. Add Theme\n\nSave your theme as CSS variables in `styles.css` file:\n\n```scss\n@theme {\n  --font-head: 'Archivo Black', sans-serif;\n  --font-sans: 'Space Grotesk', sans-serif;\n  --radius: var(--radius);\n\n  --shadow-xs: 1px 1px 0 0 var(--border);\n  --shadow-sm: 2px 2px 0 0 var(--border);\n  --shadow: 3px 3px 0 0 var(--border);\n  --shadow-md: 4px 4px 0 0 var(--border);\n  --shadow-lg: 6px 6px 0 0 var(--border);\n  --shadow-xl: 10px 10px 0 1px var(--border);\n  --shadow-2xl: 16px 16px 0 1px var(--border);\n\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-primary-hover: var(--primary-hover);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n}\n\n:root {\n  --radius: 0;\n  --background: #fff;\n  --foreground: #000;\n  --card: #fff;\n  --card-foreground: #000;\n  --primary: #ffdb33;\n  --primary-hover: #ffcc00;\n  --primary-foreground: #000;\n  --secondary: #000;\n  --secondary-foreground: #fff;\n  --muted: #aeaeae;\n  --muted-foreground: #5a5a5a;\n  --accent: #fae583;\n  --accent-foreground: #000;\n  --destructive: #e63946;\n  --destructive-foreground: #fff;\n  --border: #000;\n}\n\n.dark {\n  --radius: 0;\n  --background: #1a1a1a;\n  --foreground: #f5f5f5;\n  --card: #242424;\n  --card-foreground: #f5f5f5;\n  --primary: #ffdb33;\n  --primary-hover: #ffcc00;\n  --primary-foreground: #000;\n  --secondary: #3a3a3a;\n  --secondary-foreground: #f5f5f5;\n  --muted: #3f3f46;\n  --muted-foreground: #a0a0a0;\n  --accent: #fae583;\n  --accent-foreground: #000;\n  --destructive: #e63946;\n  --destructive-foreground: #fff;\n  --border: #3a3a3a;\n}\n```\n\n<br />\n\n### 8. That's it!\n\nNow you can start using RetroUI components in your project. You can install them through CLI or manually.\n\n<br />\n\n<ComponentInstall>\n  <ComponentInstall.Cli npmCommand=\"npx shadcn@latest add 'https://retroui.dev/r/button.json'\" />\n  <ComponentInstall.Manual>\n#### 1. Install dependencies:\n\n<CliCommand npmCommand=\"npm install class-variance-authority\" />\n\n<br />\n\n#### 2. Copy the code 👇 into your project:\n\n<ComponentSource name=\"button\" />\n\n  </ComponentInstall.Manual>\n</ComponentInstall>\n\nAfter installing the component in your project, you can then simply import it like this:\n\n```tsx\nimport { Button } from \"@/components/retroui/Button\";\n\nexport default function ButtonExample() {\n  return <Button>Click Me!</Button>;\n}\n```\n\nIf you need any additional help, you can feel free to ask it in our [Discord community](https://discord.gg/Jum3NJxK6Q)."
  },
  {
    "path": "content/docs/utils/cn.mdx",
    "content": "---\ntitle: cn\ndescription: A utilily function that saves you from style conflicts.\nlastUpdated: 17 Oct, 2024\nlinks:\n  source: https://github.com/logging-studio/RetroUI/blob/main/lib/utils.ts\n---\n\nThe `cn` utility function combines `clsx` and `tw-merge`.\nThis enables you to construct className strings conditionally without having to worry about Tailwind CSS style conflicts.\n\n<br />\n<br />\n\n## Installation\n\n#### 1. Install the dependencies:\n\n```sh\nnpm install clsx tailwind-merge\n```\n\n<br />\n\n#### 2. Copy the code 👇 into your `lib/utils.ts` file:\n\n```ts\nimport clsx from \"clsx\";\nimport { ClassNameValue, twMerge } from \"tailwind-merge\";\n\nexport function cn(...classes: ClassNameValue[]) {\n  return twMerge(clsx(classes));\n}\n```\n"
  },
  {
    "path": "contentlayer.config.ts",
    "content": "import path from \"path\";\nimport fs from \"fs\";\nimport {\n  defineDocumentType,\n  defineNestedType,\n  makeSource,\n} from \"contentlayer/source-files\";\nimport { visit } from \"unist-util-visit\";\nimport rehypePrettyCode from \"rehype-pretty-code\";\nimport rehypeSlug from \"rehype-slug\";\nimport remarkToc from 'remark-toc'\nimport { u } from \"unist-builder\";\nimport { UnistNode } from \"./types/unist\";\nimport { componentConfig } from \"./config\";\n\nconst Links = defineNestedType(() => {\n  return {\n    name: \"Links\",\n    fields: {\n      source: { type: \"string\", required: false },\n      api_reference: { type: \"string\", required: false },\n    },\n  };\n});\n\nexport const Doc = defineDocumentType(() => ({\n  name: \"Doc\",\n  filePathPattern: `docs/**/*.mdx`,\n  contentType: \"mdx\",\n  fields: {\n    title: { type: \"string\", required: true },\n    description: { type: \"string\", required: true },\n    lastUpdated: { type: \"date\", required: true },\n    links: {\n      type: \"nested\",\n      of: Links,\n      required: false,\n    },\n  },\n  computedFields: {\n    url: {\n      type: \"string\",\n      resolve: (doc) => `/${doc._raw.flattenedPath}`,\n    }\n  },\n}));\n\nconst Author = defineNestedType(() => ({\n  name: \"Author\",\n  fields: {\n    name: { type: \"string\", required: true },\n    avatar: { type: \"string\", required: true },\n    x: { type: \"string\", required: false },\n    linkedin: { type: \"string\", required: false },\n  },\n}));\n\nexport const Blog = defineDocumentType(() => ({\n  name: \"Blog\",\n  filePathPattern: `blogs/**/*.mdx`,\n  contentType: \"mdx\",\n  fields: {\n    title: { type: \"string\", required: true },\n    description: { type: \"string\", required: true },\n    coverImage: { type: \"string\", required: true },\n    publishedAt: { type: \"date\", required: true },\n    author: { type: \"nested\", required: true, of: Author },\n    tags: { type: \"list\", required: true, of: { type: \"string\" } },\n    status: { type: \"enum\", options: [\"draft\", \"published\"], default: \"draft\" },\n  },\n  computedFields: {\n    url: {\n      type: \"string\",\n      resolve: (doc) => `/${doc._raw.flattenedPath}`,\n    },\n  },\n}));\n\nexport default makeSource({\n  mdx: {\n    remarkPlugins: [\n      remarkToc\n    ],\n    rehypePlugins: [\n      rehypeSlug,\n\n      () => (tree) => {\n        visit(tree, (node: UnistNode) => {\n          if (node.name === \"ComponentSource\" && node.attributes) {\n            const name = getNodeAttributeByName(node, \"name\")\n              ?.value as keyof typeof componentConfig.core;\n\n            if (!name) {\n              return null;\n            }\n\n            const component = componentConfig.core[name];\n            const filePath = path.join(process.cwd(), component.filePath);\n            const source = fs.readFileSync(filePath, \"utf8\");\n\n            node.children?.push(\n              u(\"element\", {\n                tagName: \"pre\",\n                properties: {\n                  __src__: filePath,\n                },\n                children: [\n                  u(\"element\", {\n                    tagName: \"code\",\n                    properties: {\n                      className: [\"language-tsx\"],\n                    },\n                    children: [\n                      {\n                        type: \"text\",\n                        value: source,\n                      },\n                    ],\n                  }),\n                ],\n              }),\n            );\n          }\n\n          if (node.name === \"ComponentShowcase\" && node.attributes) {\n            const name = getNodeAttributeByName(node, \"name\")\n              ?.value as keyof typeof componentConfig.examples;\n\n            if (!name) {\n              return null;\n            }\n\n            const component = componentConfig.examples[name];\n            const filePath = path.join(process.cwd(), component.filePath);\n            const source = fs.readFileSync(filePath, \"utf8\");\n\n            node.children?.push(\n              u(\"element\", {\n                tagName: \"pre\",\n                properties: {\n                  __src__: component.filePath,\n                  __rawString__: source,\n                },\n                children: [\n                  u(\"element\", {\n                    tagName: \"code\",\n                    properties: {\n                      className: [\"language-tsx\"],\n                    },\n                    children: [\n                      {\n                        type: \"text\",\n                        value: source,\n                      },\n                    ],\n                  }),\n                ],\n              }),\n            );\n          }\n        });\n      },\n      [\n        rehypePrettyCode as any,\n        {\n          theme: \"dracula-soft\",\n        },\n      ],\n    ],\n  },\n  contentDirPath: \"./content\",\n  documentTypes: [Doc, Blog],\n});\n\nconst getNodeAttributeByName = (node: UnistNode, name: string) => {\n  return node.attributes?.find((attribute) => attribute.name === name);\n};\n"
  },
  {
    "path": "contexts/ThemeContext.tsx",
    "content": "\"use client\";\n\nimport React, { createContext, useContext, useEffect, useState } from \"react\";\nimport { Theme as ColorTheme } from \"@/config/theme\";\n\ntype DarkMode = \"light\" | \"dark\";\n\ninterface ThemeContextType {\n  darkMode: DarkMode;\n  colorTheme: ColorTheme;\n  variant: string;\n  isDarkMode: boolean;\n  toggleDarkMode: () => void;\n  setDarkMode: (theme: DarkMode) => void;\n  setColorTheme: (theme: ColorTheme) => void;\n  setVariant: (variant: string) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\nexport function ThemeProvider({ children }: { children: React.ReactNode }) {\n  const [darkMode, setDarkModeState] = useState<DarkMode>(\"light\");\n  const [colorTheme, setColorThemeState] = useState<ColorTheme>(ColorTheme.Default);\n  const [variant, setVariantState] = useState(\"box\");\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n    const savedDarkMode = localStorage.getItem(\"darkMode\") as DarkMode;\n    const savedColorTheme = localStorage.getItem(\"colorTheme\") as ColorTheme;\n    const savedVariant = localStorage.getItem(\"variant\") || \"box\";\n    \n    if (savedDarkMode === \"dark\" || savedDarkMode === \"light\") {\n      setDarkModeState(savedDarkMode);\n      applyDarkMode(savedDarkMode);\n    }\n    if (savedColorTheme && Object.values(ColorTheme).includes(savedColorTheme)) {\n      setColorThemeState(savedColorTheme);\n    }\n    setVariantState(savedVariant);\n  }, []);\n\n  const applyDarkMode = (newDarkMode: DarkMode) => {\n    if (newDarkMode === \"dark\") {\n      document.documentElement.classList.add(\"dark\");\n    } else {\n      document.documentElement.classList.remove(\"dark\");\n    }\n  };\n\n  const setDarkMode = (newDarkMode: DarkMode) => {\n    setDarkModeState(newDarkMode);\n    localStorage.setItem(\"darkMode\", newDarkMode);\n    applyDarkMode(newDarkMode);\n  };\n\n  const setColorTheme = (newColorTheme: ColorTheme) => {\n    setColorThemeState(newColorTheme);\n    localStorage.setItem(\"colorTheme\", newColorTheme);\n  };\n\n  const setVariant = (newVariant: string) => {\n    setVariantState(newVariant);\n    localStorage.setItem(\"variant\", newVariant);\n  };\n\n  const toggleDarkMode = () => {\n    const newDarkMode = darkMode === \"light\" ? \"dark\" : \"light\";\n    setDarkMode(newDarkMode);\n  };\n\n  const value: ThemeContextType = {\n    darkMode,\n    colorTheme,\n    variant,\n    isDarkMode: darkMode === \"dark\",\n    toggleDarkMode,\n    setDarkMode,\n    setColorTheme,\n    setVariant,\n  };\n\n  if (!mounted) {\n    return null;\n  }\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  if (context === undefined) {\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n  }\n  return context;\n}"
  },
  {
    "path": "lib/payload.ts",
    "content": "import { PayloadSDK } from '@payloadcms/sdk'\n\n\nexport const sdk = new PayloadSDK({\n  baseURL: 'https://cms.retroui.dev/api',\n})"
  },
  {
    "path": "lib/registry.ts",
    "content": "export const registryDependencyPath = (item: string) => {\n  return `https://retroui.dev/r/${item}.json`;\n};\n"
  },
  {
    "path": "lib/toc.ts",
    "content": "import { toc } from \"mdast-util-toc\"\nimport { remark } from \"remark\"\nimport { visit } from \"unist-util-visit\"\nimport type { VFile } from \"vfile\"\n\nconst textTypes = [\"text\", \"emphasis\", \"strong\", \"inlineCode\"] as const\n\nfunction flattenNode(node: any): string {\n  const p: string[] = []\n  visit(node as any, (node: any) => {\n    if (!textTypes.includes(node.type as any)) return\n    if ('value' in node && typeof node.value === 'string') {\n      p.push(node.value)\n    }\n  })\n  return p.join('')\n}\n\ninterface Item {\n  title: string\n  url: string\n  items?: Item[]\n}\n\ninterface Items {\n  items?: Item[]\n}\n\nfunction getItems(node: any, current: any): Items {\n  if (!node) {\n    return {}\n  }\n\n  if (node.type === \"paragraph\") {\n    visit(node, (item: any) => {\n      if (item.type === \"link\") {\n        current.url = item.url\n        current.title = flattenNode(node)\n      }\n\n      if (item.type === \"text\") {\n        current.title = flattenNode(node)\n      }\n    })\n\n    return current\n  }\n\n  if (node.type === \"list\") {\n    current.items = node.children.map((i: any) => getItems(i, {}))\n\n    return current\n  } else if (node.type === \"listItem\") {\n    const heading = getItems(node.children[0], {})\n\n    if (node.children.length > 1) {\n      getItems(node.children[1], heading)\n    }\n\n    return heading\n  }\n\n  return {}\n}\n\nconst getToc = () => (node: any, file: VFile) => {\n  const table = toc(node, { maxDepth: 3 })\n  const items = getItems(table.map, {})\n\n  file.data = { ...file.data, ...items }\n}\n\nexport type TableOfContents = Items\n\nexport const generateToc = async (content: string): Promise<TableOfContents> => {\n  const result = await remark().use(getToc).process(content)\n\n  return result.data as TableOfContents\n}"
  },
  {
    "path": "lib/utils.ts",
    "content": "import clsx from \"clsx\";\nimport { ClassNameValue, twMerge } from \"tailwind-merge\";\n\nexport function cn(...classes: ClassNameValue[]) {\n  return twMerge(clsx(classes));\n}\n"
  },
  {
    "path": "next.config.mjs",
    "content": "import { withContentlayer } from \"next-contentlayer\";\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n  swcMinify: true,\n  images: {\n    remotePatterns: [\n      {\n        protocol: \"https\",\n        hostname: \"pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev\",\n      },\n      {\n        protocol: \"https\",\n        hostname: \"cms.retroui.dev\",\n      },\n    ],\n  },\n};\n\nexport default withContentlayer(nextConfig);\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"retro-ui\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\",\n    \"registry:build\": \"shadcn build\"\n  },\n  \"dependencies\": {\n    \"@headlessui/react\": \"^2.1.9\",\n    \"@payloadcms/richtext-lexical\": \"^3.71.1\",\n    \"@payloadcms/sdk\": \"^3.71.1\",\n    \"@radix-ui/react-accordion\": \"^1.2.1\",\n    \"@radix-ui/react-avatar\": \"^1.1.1\",\n    \"@radix-ui/react-checkbox\": \"^1.1.4\",\n    \"@radix-ui/react-context-menu\": \"^2.2.16\",\n    \"@radix-ui/react-dialog\": \"^1.1.2\",\n    \"@radix-ui/react-dropdown-menu\": \"^2.1.2\",\n    \"@radix-ui/react-label\": \"^2.1.2\",\n    \"@radix-ui/react-popover\": \"^1.1.10\",\n    \"@radix-ui/react-progress\": \"^1.1.2\",\n    \"@radix-ui/react-radio-group\": \"^1.2.3\",\n    \"@radix-ui/react-select\": \"^2.1.6\",\n    \"@radix-ui/react-slider\": \"^1.2.4\",\n    \"@radix-ui/react-slot\": \"^1.2.2\",\n    \"@radix-ui/react-switch\": \"^1.1.3\",\n    \"@radix-ui/react-toggle\": \"^1.1.6\",\n    \"@radix-ui/react-toggle-group\": \"^1.1.7\",\n    \"@radix-ui/react-tooltip\": \"^1.2.3\",\n    \"@radix-ui/react-visually-hidden\": \"^1.1.0\",\n    \"@vercel/analytics\": \"^1.5.0\",\n    \"@vercel/speed-insights\": \"^1.2.0\",\n    \"@wandry/analytics-sdk\": \"^1.16.0\",\n    \"class-variance-authority\": \"^0.7.0\",\n    \"clsx\": \"^2.1.1\",\n    \"cmdk\": \"^1.1.1\",\n    \"contentlayer\": \"^0.3.4\",\n    \"date-fns\": \"^4.1.0\",\n    \"embla-carousel-react\": \"^8.6.0\",\n    \"lucide-react\": \"^0.445.0\",\n    \"mdast-util-toc\": \"^7.1.0\",\n    \"next\": \"14.2.7\",\n    \"next-contentlayer\": \"^0.3.4\",\n    \"react\": \"^18\",\n    \"react-day-picker\": \"^9.11.1\",\n    \"react-dom\": \"^18\",\n    \"recharts\": \"^3.1.2\",\n    \"rehype-pretty-code\": \"^0.14.0\",\n    \"rehype-slug\": \"^6.0.0\",\n    \"remark\": \"^15.0.1\",\n    \"remark-toc\": \"^9.0.0\",\n    \"resend\": \"^6.8.0\",\n    \"shadcn\": \"2.4.0-canary.10\",\n    \"sonner\": \"^2.0.3\",\n    \"tailwind-merge\": \"^2.5.3\",\n    \"tw-animate-css\": \"^1.3.7\",\n    \"unist\": \"^0.0.1\",\n    \"unist-builder\": \"^4.0.0\",\n    \"unist-util-visit\": \"^5.0.0\",\n    \"vaul\": \"^1.1.2\",\n    \"vfile\": \"^6.0.3\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/postcss\": \"^4.0.14\",\n    \"@types/node\": \"^20\",\n    \"@types/react\": \"^18\",\n    \"@types/react-dom\": \"^18\",\n    \"eslint\": \"^8\",\n    \"eslint-config-next\": \"14.2.7\",\n    \"postcss\": \"^8\",\n    \"prettier\": \"^3.5.3\",\n    \"tailwindcss\": \"^4.0.14\",\n    \"tailwindcss-animate\": \"^1.0.7\",\n    \"typescript\": \"^5\"\n  },\n  \"packageManager\": \"pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a\"\n}\n"
  },
  {
    "path": "postcss.config.mjs",
    "content": "/** @type {import('postcss-load-config').Config} */\nconst config = {\n  plugins: {\n    \"@tailwindcss/postcss\": {},\n  },\n};\n\nexport default config;\n"
  },
  {
    "path": "preview/blocks/course-card.tsx",
    "content": "import { Card } from \"@/components/retroui/Card\";\nimport { Badge } from \"@/components/retroui/Badge\";\nimport { Text } from \"@/components/retroui/Text\";\nimport { Button } from \"@/components/retroui/Button\";\n\nconst CourseCard = () => {\n    return (\n        <div className=\"flex justify-center\">\n            <Card className=\"w-[400px] mx-auto border-2 shadow-none\">\n                {/* Course Content */}\n                <Card.Content>\n                    {/* Title & Price */}\n                    <div className=\"flex justify-between items-start mb-2 gap-6\">\n                        <Card.Title className=\"font-sans\">\n                            Advanced React Patterns\n                        </Card.Title>\n                        <div>\n                            <Badge className=\"font-medium\">\n                                $49.99\n                            </Badge>\n                        </div>\n                    </div>\n\n                    {/* Description */}\n                    <Text className=\"text-sm font-normal text-muted-foreground mb-4\">\n                        Master advanced React patterns and build scalable applications with\n                        best practices.\n                    </Text>\n\n                    {/* Stats */}\n                    <div className=\"flex text-sm justify-between gap-4 py-4 border-y-2 border-black/10 mb-4\">\n                        <div className=\"flex items-center gap-1\">\n                            <span>📚</span>\n                            <span className=\"font-medium\">12 Modules</span>\n                        </div>\n                        <div className=\"flex items-center gap-1\">\n                            <span>⭐</span>\n                            <span className=\"font-medium\">4.9/5</span>\n                        </div>\n                        <div className=\"flex items-center gap-1\">\n                            <span>👥</span>\n                            <span className=\"font-medium\">2.1k enrolled</span>\n                        </div>\n                    </div>\n\n                    <Button className=\"w-full font-bold font-sans justify-center\">\n                        Enroll Now →\n                    </Button>\n                </Card.Content>\n            </Card>\n        </div>\n    );\n};\n\nexport default CourseCard;"
  },
  {
    "path": "preview/blocks/sign-in.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\nimport { Text } from \"@/components/retroui/Text\";\n\nimport { Checkbox } from \"@/components/retroui/Checkbox\";\nimport { Input } from \"@/components/retroui/Input\";\nimport { Label } from \"@/components/retroui/Label\";\nimport { Eye, EyeOff, Github, Mail } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport default function SignInBlock() {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n      <div className=\"mx-auto w-full max-w-lg overflow-hidden rounded border-2 bg-card\">\n        <div className=\"bg-accent p-6\">\n          <Text as=\"h3\" className=\"text-accent-foreground\">Sign In</Text>\n          <Text className=\"text-sm text-accent-foreground\">\n            Welcome back! Enter your details to access your account.\n          </Text>\n        </div>\n        <div className=\"p-6\">\n          <div className=\"space-y-4\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input id=\"email\" type=\"email\" placeholder=\"you@example.com\" />\n            </div>\n            <div className=\"space-y-2\">\n              <div className=\"flex items-center justify-between\">\n                <Label htmlFor=\"password\">Password</Label>\n                <a\n                  href=\"/forgot-password\"\n                  className=\"text-sm font-medium underline underline-offset-4\"\n                >\n                  Forgot password?\n                </a>\n              </div>\n              <div className=\"relative\">\n                <Input\n                  id=\"password\"\n                  type={showPassword ? \"text\" : \"password\"}\n                  placeholder=\"••••••••\"\n                />\n                <button\n                  type=\"button\"\n                  className=\"absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent\"\n                  onClick={() => setShowPassword(!showPassword)}\n                >\n                  {showPassword ? (\n                    <EyeOff className=\"h-4 w-4\" />\n                  ) : (\n                    <Eye className=\"h-4 w-4\" />\n                  )}\n                  <span className=\"sr-only\">\n                    {showPassword ? \"Hide password\" : \"Show password\"}\n                  </span>\n                </button>\n              </div>\n            </div>\n\n            <div className=\"flex items-center space-x-2\">\n              <Checkbox id=\"remember\" />\n              <label\n                htmlFor=\"remember\"\n                className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                Remember me\n              </label>\n            </div>\n          </div>\n          <div className=\"mt-8 space-y-6\">\n            <Button className=\"w-full justify-center\">Sign In</Button>\n            <div className=\"relative\">\n              <div className=\"absolute inset-0 flex items-center\">\n                <span className=\"w-full border-t border-gray-300\" />\n              </div>\n              <div className=\"relative flex justify-center text-xs uppercase\">\n                <span className=\"bg-white px-2 text-gray-500\">\n                  Or continue with\n                </span>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <Button\n                variant=\"secondary\"\n                className=\"flex items-center justify-center\"\n              >\n                <Github className=\"mr-2 h-5 w-5\" />\n                Github\n              </Button>\n              <Button\n                variant=\"secondary\"\n                className=\"flex items-center justify-center\"\n              >\n                <Mail className=\"mr-2 h-5 w-5\" />\n                Google\n              </Button>\n            </div>\n          </div>\n          <div className=\"mt-6 text-center text-sm\">\n            Don't have an account?{\" \"}\n            <a\n              href=\"/sign-up\"\n              className=\"font-bold underline underline-offset-4\"\n            >\n              Sign up\n            </a>\n          </div>\n        </div>\n      </div>\n  );\n}"
  },
  {
    "path": "preview/blocks/team-members.tsx",
    "content": "import { Avatar } from \"@/components/retroui/Avatar\";\nimport { Badge } from \"@/components/retroui/Badge\";\nimport { Text } from \"@/components/retroui/Text\";\nimport { Clock, User } from \"lucide-react\";\n\nexport default function TeamMembersBlock() {\n    return (\n        <div className=\"flex flex-col gap-3\">\n            <div\n                className=\"border-2 p-4 flex items-center justify-between gap-3 bg-card rounded\"\n            >\n                <div className=\"flex items-center gap-3\">\n                    <Avatar className=\"w-10 h-10\">\n                        <Avatar.Image\n                            src=\"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/person_a.png\"\n                            alt=\"Person A\"\n                        />\n                        <Avatar.Fallback>\n                            <User className=\"h-5 w-5 text-muted-foreground\" />\n                        </Avatar.Fallback>\n                    </Avatar>\n                    <div>\n                        <Text className=\"font-semibold\">Alex Johnson</Text>\n                        <span className=\"text-sm text-muted-foreground\">alex@example.com</span>\n                    </div>\n                </div>\n                <Badge variant=\"solid\" size=\"sm\">\n                    Admin\n                </Badge>\n            </div>\n\n            <div className=\"border-2 p-4 flex items-center justify-between gap-3 bg-card rounded\">\n                <div className=\"flex items-center gap-3\">\n                    <Avatar className=\"w-10 h-10\">\n                        <Avatar.Image\n                            src=\"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/person_b.png\"\n                            alt=\"Person B\"\n                        />\n                        <Avatar.Fallback>\n                            <User className=\"h-5 w-5 text-muted-foreground\" />\n                        </Avatar.Fallback>\n                    </Avatar>\n                    <div>\n                        <Text className=\"font-semibold\">John Doe</Text>\n                        <span className=\"text-sm text-muted-foreground\">john@example.com</span>\n                    </div>\n                </div>\n                <Badge variant=\"solid\" size=\"sm\">\n                    Member\n                </Badge>\n            </div>\n\n            <div className=\"border-2 p-4 flex items-center justify-between gap-3 bg-card rounded\">\n                <div className=\"flex items-center gap-3\">\n                    <Avatar className=\"w-10 h-10\">\n                        <Avatar.Image\n                            src=\"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/person_c.png\"\n                            alt=\"Person C\"\n                        />\n                        <Avatar.Fallback>\n                            <User className=\"h-5 w-5 text-muted-foreground\" />\n                        </Avatar.Fallback>\n                    </Avatar>\n                    <div>\n                        <Text className=\"font-semibold\">Jane Smith</Text>\n                        <span className=\"text-sm text-muted-foreground\">jane@example.com</span>\n                    </div>\n                </div>\n\n\n                <Badge variant=\"surface\" size=\"sm\">\n                    Pending\n                </Badge>\n            </div>\n        </div>\n    );\n}"
  },
  {
    "path": "preview/charts/area-chart-style-default.tsx",
    "content": "// import { LineChart, Line, CartesianGrid, XAxis, YAxis, ResponsiveContainer } from 'recharts';\n\nimport { AreaChart } from \"@/components/retroui/charts/AreaChart\";\n\nconst data = [{ name: 'Jan', orders: 12 }, { name: 'Feb', orders: 32 }, { name: 'Mar', orders: 19 }, { name: 'Apr', orders: 35 }, { name: 'May', orders: 40 }, { name: 'Jun', orders: 25 }];\n\nexport default function ChartStyleDefault() {\n    return (\n        <AreaChart\n            data={data}\n            index=\"name\"\n            categories={[\"orders\"]}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/area-chart-style-minimal.tsx",
    "content": "import { AreaChart } from \"@/components/retroui/charts/AreaChart\";\n\nconst data = [\n  { date: '01', value: 120 },\n  { date: '02', value: 190 },\n  { date: '03', value: 300 },\n  { date: '04', value: 500 },\n  { date: '05', value: 280 },\n  { date: '06', value: 400 }\n];\n\nexport default function AreaChartStyleMinimal() {\n    return (\n        <AreaChart\n            data={data}\n            index=\"date\"\n            categories={[\"value\"]}\n            showGrid={false}\n            fillColors={[\"var(--muted)\"]}\n            strokeColors={[\"var(--muted-foreground)\"]}\n            className=\"h-32\"\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/area-chart-style-multiple.tsx",
    "content": "import { AreaChart } from \"@/components/retroui/charts/AreaChart\";\n\nconst data = [{ name: 'Jan', orders: 12, cancel: 9 }, { name: 'Feb', orders: 32, cancel: 19 }, { name: 'Mar', orders: 19, cancel: 8 }, { name: 'Apr', orders: 35, cancel: 14 }, { name: 'May', orders: 40, cancel: 12 }, { name: 'Jun', orders: 25, cancel: 5 }];\n\nexport default function ChartStyleMultiple() {\n    return (\n        <AreaChart\n            data={data}\n            index=\"name\"\n            categories={[\"orders\", \"cancel\"]}\n            strokeColors={[\"var(--foreground)\", \"var(--destructive)\"]}\n            fillColors={[\"var(--primary)\", \"var(--destructive)\"]}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/area-chart-style-stacked.tsx",
    "content": "import { AreaChart } from \"@/components/retroui/charts/AreaChart\";\n\nconst data = [\n  { name: 'Jan', mobile: 20, desktop: 30, tablet: 10 },\n  { name: 'Feb', mobile: 25, desktop: 35, tablet: 15 },\n  { name: 'Mar', mobile: 22, desktop: 28, tablet: 12 },\n  { name: 'Apr', mobile: 30, desktop: 40, tablet: 18 },\n  { name: 'May', mobile: 28, desktop: 38, tablet: 16 },\n  { name: 'Jun', mobile: 32, desktop: 42, tablet: 20 }\n];\n\nexport default function AreaChartStyleStacked() {\n    return (\n        <AreaChart\n            data={data}\n            index=\"name\"\n            showGrid={false}\n            categories={[\"mobile\", \"desktop\", \"tablet\"]}\n            strokeColors={[\"var(--primary)\", \"var(--secondary)\", \"var(--accent)\"]}\n            fillColors={[\"var(--primary)\", \"var(--secondary)\", \"var(--accent)\"]}\n            fill=\"solid\"\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/bar-chart-style-default.tsx",
    "content": "import { BarChart } from \"@/components/retroui/charts/BarChart\";\n\nconst data = [{ name: 'Jan', orders: 12 }, { name: 'Feb', orders: 32 }, { name: 'Mar', orders: 19 }, { name: 'Apr', orders: 35 }, { name: 'May', orders: 40 }, { name: 'Jun', orders: 25 }];\n\nexport default function BarChartStyleDefault() {\n    return (\n        <BarChart\n            data={data}\n            index=\"name\"\n            categories={[\"orders\"]}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/bar-chart-style-grouped.tsx",
    "content": "import { BarChart } from \"@/components/retroui/charts/BarChart\";\n\nconst data = [{ name: 'Jan', orders: 12, cancel: 9 }, { name: 'Feb', orders: 32, cancel: 19 }, { name: 'Mar', orders: 19, cancel: 8 }, { name: 'Apr', orders: 35, cancel: 14 }, { name: 'May', orders: 40, cancel: 12 }, { name: 'Jun', orders: 25, cancel: 5 }];\n\nexport default function BarChartStyleMultiple() {\n    return (\n        <BarChart\n            data={data}\n            index=\"name\"\n            categories={[\"orders\", \"cancel\"]}\n            strokeColors={[\"var(--foreground)\", \"var(--destructive)\"]}\n            fillColors={[\"var(--primary)\", \"var(--destructive)\"]}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/bar-chart-style-horizontal.tsx",
    "content": "import { BarChart } from \"@/components/retroui/charts/BarChart\";\n\nconst data = [\n  { category: 'Sales', value: 400 },\n  { category: 'Marketing', value: 300 },\n  { category: 'Support', value: 200 },\n  { category: 'Development', value: 500 },\n  { category: 'HR', value: 100 }\n];\n\nexport default function BarChartStyleHorizontal() {\n    return (\n        <BarChart\n            data={data}\n            index=\"category\"\n            categories={[\"value\"]}\n            alignment=\"horizontal\"\n            fillColors={[\"var(--primary)\"]}\n            className=\"h-96\"\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/bar-chart-style-multiple.tsx",
    "content": "import { BarChart } from \"@/components/retroui/charts/BarChart\";\n\nconst data = [{ name: 'Jan', orders: 12, cancel: 9 }, { name: 'Feb', orders: 32, cancel: 19 }, { name: 'Mar', orders: 19, cancel: 8 }, { name: 'Apr', orders: 35, cancel: 14 }, { name: 'May', orders: 40, cancel: 12 }, { name: 'Jun', orders: 25, cancel: 5 }];\n\nexport default function BarChartStyleMultiple() {\n    return (\n        <BarChart\n            data={data}\n            index=\"name\"\n            categories={[\"orders\", \"cancel\"]}\n            strokeColors={[\"var(--foreground)\", \"var(--destructive)\"]}\n            fillColors={[\"var(--primary)\", \"var(--destructive)\"]}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/bar-chart-style-stacked.tsx",
    "content": "import { BarChart } from \"@/components/retroui/charts/BarChart\";\n\nconst data = [{ name: 'Jan', orders: 12, cancel: 2 }, { name: 'Feb', orders: 32, cancel: 9 }, { name: 'Mar', orders: 19, cancel: 5 }, { name: 'Apr', orders: 35, cancel: 8 }, { name: 'May', orders: 40, cancel: 17 }, { name: 'Jun', orders: 15, cancel: 12 }];\n\nexport default function BarChartStyleStacked() {\n    return (\n        <BarChart\n            data={data}\n            index=\"name\"\n            stacked\n            categories={[\"orders\", \"cancel\"]}\n            fillColors={[\"var(--primary)\", \"var(--destructive)\"]}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/line-chart-style-curved.tsx",
    "content": "import { LineChart } from \"@/components/retroui/charts/LineChart\";\n\nconst data = [\n  { time: '00:00', cpu: 20, memory: 40 },\n  { time: '04:00', cpu: 35, memory: 50 },\n  { time: '08:00', cpu: 60, memory: 75 },\n  { time: '12:00', cpu: 80, memory: 85 },\n  { time: '16:00', cpu: 65, memory: 70 },\n  { time: '20:00', cpu: 40, memory: 55 },\n  { time: '24:00', cpu: 25, memory: 45 }\n];\n\nexport default function LineChartStyleCurved() {\n    return (\n        <LineChart\n            data={data}\n            index=\"time\"\n            categories={[\"cpu\", \"memory\"]}\n            strokeColors={[\"var(--destructive)\", \"var(--warning)\"]}\n            strokeWidth={3}\n            dotSize={6}\n            valueFormatter={(value) => `${value}%`}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/line-chart-style-default.tsx",
    "content": "import { LineChart } from \"@/components/retroui/charts/LineChart\";\n\nconst data = [{ name: 'Jan', orders: 12 }, { name: 'Feb', orders: 32 }, { name: 'Mar', orders: 19 }, { name: 'Apr', orders: 35 }, { name: 'May', orders: 40 }, { name: 'Jun', orders: 25 }];\n\nexport default function LineChartStyleDefault() {\n    return (\n        <LineChart\n            data={data}\n            index=\"name\"\n            categories={[\"orders\"]}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/line-chart-style-dots.tsx",
    "content": "import { LineChart } from \"@/components/retroui/charts/LineChart\";\n\nconst data = [\n  { week: 'W1', engagement: 85 },\n  { week: 'W2', engagement: 92 },\n  { week: 'W3', engagement: 78 },\n  { week: 'W4', engagement: 96 },\n  { week: 'W5', engagement: 88 },\n  { week: 'W6', engagement: 94 }\n];\n\nexport default function LineChartStyleDots() {\n    return (\n        <LineChart\n            data={data}\n            index=\"week\"\n            categories={[\"engagement\"]}\n            strokeColors={[\"var(--primary)\"]}\n            strokeWidth={1}\n            dotSize={8}\n            showGrid={false}\n            valueFormatter={(value) => `${value}%`}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/line-chart-style-multiple.tsx",
    "content": "import { LineChart } from \"@/components/retroui/charts/LineChart\";\n\nconst data = [{ name: 'Jan', orders: 12, cancel: 9 }, { name: 'Feb', orders: 32, cancel: 19 }, { name: 'Mar', orders: 19, cancel: 8 }, { name: 'Apr', orders: 35, cancel: 14 }, { name: 'May', orders: 40, cancel: 12 }, { name: 'Jun', orders: 25, cancel: 5 }];\n\nexport default function LineChartStyleMultiple() {\n    return (\n        <LineChart\n            data={data}\n            index=\"name\"\n            categories={[\"orders\", \"cancel\"]}\n            strokeColors={[\"var(--foreground)\", \"var(--destructive)\"]}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/pie-chart-style-default.tsx",
    "content": "import { PieChart } from \"@/components/retroui/charts/PieChart\";\n\nconst data = [\n  { name: 'Desktop', value: 400 },\n  { name: 'Mobile', value: 300 },\n  { name: 'Tablet', value: 200 },\n  { name: 'Other', value: 100 }\n];\n\nexport default function PieChartStyleDefault() {\n    return (\n        <PieChart\n            data={data}\n            dataKey=\"value\"\n            nameKey=\"name\"\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/pie-chart-style-donut.tsx",
    "content": "import { PieChart } from \"@/components/retroui/charts/PieChart\";\n\nconst data = [\n  { name: 'Desktop', value: 400 },\n  { name: 'Mobile', value: 300 },\n  { name: 'Tablet', value: 200 },\n  { name: 'Other', value: 100 }\n];\n\nexport default function PieChartStyleDonut() {\n    return (\n        <PieChart\n            data={data}\n            dataKey=\"value\"\n            nameKey=\"name\"\n            innerRadius={70}\n            colors={[\"var(--primary)\", \"var(--secondary)\", \"var(--destructive)\", \"var(--muted)\"]}\n        />\n    )\n}"
  },
  {
    "path": "preview/charts/pie-chart-style-small.tsx",
    "content": "import { PieChart } from \"@/components/retroui/charts/PieChart\";\n\nconst data = [\n  { browser: 'Chrome', users: 65 },\n  { browser: 'Firefox', users: 25 },\n  { browser: 'Safari', users: 8 },\n  { browser: 'Edge', users: 2 }\n];\n\nexport default function PieChartStyleSmall() {\n    return (\n        <PieChart\n            data={data}\n            dataKey=\"users\"\n            nameKey=\"browser\"\n            outerRadius={60}\n            colors={[\"var(--chart-1)\", \"var(--chart-2)\", \"var(--chart-3)\", \"var(--chart-4)\"]}\n            valueFormatter={(value) => `${value}%`}\n            className=\"h-60\"\n        />\n    )\n}"
  },
  {
    "path": "preview/components/accordion-style-default.tsx",
    "content": "\"use client\";\n\nimport { Accordion } from \"@/components/retroui/Accordion\";\n\nexport default function AccordionStyleDefault() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"space-y-4 w-full\">\n      <Accordion.Item value=\"item-1\">\n        <Accordion.Header>Accordion Item 1</Accordion.Header>\n        <Accordion.Content>\n          This is the content of the first accordion item.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item value=\"item-2\">\n        <Accordion.Header>Accordion Item 2</Accordion.Header>\n        <Accordion.Content>\n          This is the content of the second accordion item.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item value=\"item-3\">\n        <Accordion.Header>Accordion Item 3</Accordion.Header>\n        <Accordion.Content>\n          This is the content of the third accordion item.\n        </Accordion.Content>\n      </Accordion.Item>\n    </Accordion>\n  );\n}\n"
  },
  {
    "path": "preview/components/alert-style-all-status.tsx",
    "content": "import { Alert } from \"@/components/retroui/Alert\";\nimport { CheckCircle, InfoIcon, XIcon } from \"lucide-react\";\n\nexport default function AlertAllStatus() {\n  return (\n    <div className=\"space-y-4\">\n      <Alert status=\"success\" className=\"flex items-center\">\n        <CheckCircle className=\"h-4 w-4 mr-4\" />\n        <Alert.Title>This is a success alert!</Alert.Title>\n      </Alert>\n      <Alert status=\"info\" className=\"flex items-center\">\n        <InfoIcon className=\"h-4 w-4 mr-4\" />\n        <Alert.Title>This is an info alert!</Alert.Title>\n      </Alert>\n      <Alert status=\"error\" className=\"flex items-center\">\n        <XIcon className=\"h-4 w-4 mr-4\" />\n        <Alert.Title>This is an error alert!</Alert.Title>\n      </Alert>\n      <Alert status=\"warning\" className=\"flex items-center\">\n        <InfoIcon className=\"h-4 w-4 mr-4\" />\n        <Alert.Title>This is an error alert!</Alert.Title>\n      </Alert>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/alert-style-default.tsx",
    "content": "import { Alert } from \"@/components/retroui/Alert\";\n\nexport default function AlertStyleDefault() {\n  return (\n    <Alert>\n      <Alert.Title>Heads up!</Alert.Title>\n      <Alert.Description>\n        This is where you can write description that no one reads...\n      </Alert.Description>\n    </Alert>\n  );\n}\n"
  },
  {
    "path": "preview/components/alert-style-solid.tsx",
    "content": "import { Alert } from \"@/components/retroui/Alert\";\n\nexport default function AlertStyleDefault() {\n  return (\n    <Alert variant=\"solid\">\n      <Alert.Title>Heads up!</Alert.Title>\n      <Alert.Description>\n        This is where you can write description that no one reads...\n      </Alert.Description>\n    </Alert>\n  );\n}\n"
  },
  {
    "path": "preview/components/alert-style-with-icon.tsx",
    "content": "import { Alert } from \"@/components/retroui/Alert\";\nimport { CheckCircle } from \"lucide-react\";\n\nexport default function AlertStyleDefaultIcon() {\n  return (\n    <Alert className=\"flex\">\n      <CheckCircle className=\"h-5 w-5 mr-4 mt-2\" />\n      <div>\n        <Alert.Title>Heads up!</Alert.Title>\n        <Alert.Description>\n          This is where you can write description that no one reads...\n        </Alert.Description>\n      </div>\n    </Alert>\n  );\n}\n"
  },
  {
    "path": "preview/components/avatar-style-circle-fallbacks.tsx",
    "content": "import { Avatar } from \"@/components/retroui/Avatar\";\n\nexport default function AvatarStyleFallback() {\n  return (\n    <Avatar>\n      <Avatar.Image src=\"broken-link\" alt=\"Arif Logs\" />\n      <Avatar.Fallback>AH</Avatar.Fallback>\n    </Avatar>\n  );\n}\n"
  },
  {
    "path": "preview/components/avatar-style-circle-sizes.tsx",
    "content": "import { Avatar } from \"@/components/retroui/Avatar\";\n\nexport default function AvatarStyleCircleSizes() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Avatar>\n        <Avatar.Image src=\"/images/avatar.jpeg\" alt=\"Arif Logs\" />\n        <Avatar.Fallback>AH</Avatar.Fallback>\n      </Avatar>\n      <Avatar className=\"h-16 w-16\">\n        <Avatar.Image src=\"/images/avatar.jpeg\" alt=\"Arif Logs\" />\n        <Avatar.Fallback>AH</Avatar.Fallback>\n      </Avatar>\n      <Avatar className=\"h-20 w-20\">\n        <Avatar.Image src=\"/images/avatar.jpeg\" alt=\"Arif Logs\" />\n        <Avatar.Fallback>AH</Avatar.Fallback>\n      </Avatar>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/avatar-style-circle.tsx",
    "content": "import { Avatar } from \"@/components/retroui/Avatar\";\n\nexport default function AvatarStyleCircle() {\n  return (\n    <Avatar>\n      <Avatar.Image src=\"/images/avatar.jpeg\" alt=\"Arif Logs\" />\n      <Avatar.Fallback>AH</Avatar.Fallback>\n    </Avatar>\n  );\n}\n"
  },
  {
    "path": "preview/components/badge-style-default.tsx",
    "content": "import { Badge } from \"@/components/retroui/Badge\";\n\nexport default function BadgeStyleDefault() {\n  return <Badge>Default Badge</Badge>;\n}\n"
  },
  {
    "path": "preview/components/badge-style-rounded.tsx",
    "content": "import { Badge } from \"@/components/retroui/Badge\";\n\nexport default function BadgeStyleRounded() {\n  return (\n    <div className=\"space-x-4\">\n      <Badge variant=\"solid\" className=\"rounded-sm\">\n        Rounded\n      </Badge>\n      <Badge variant=\"solid\" className=\"rounded-full\">\n        Full\n      </Badge>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/badge-style-sizes.tsx",
    "content": "import { Badge } from \"@/components/retroui/Badge\";\n\nexport default function BadgeStyleVariants() {\n  return (\n    <div className=\"space-x-4\">\n      <Badge size=\"sm\">small</Badge>\n      <Badge>medium</Badge>\n      <Badge size=\"lg\">large</Badge>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/badge-style-variants.tsx",
    "content": "import { Badge } from \"@/components/retroui/Badge\";\n\nexport default function BadgeStyleVariants() {\n  return (\n    <div className=\"flex flex-wrap gap-4\">\n      <Badge>Default</Badge>\n      <Badge variant=\"outline\">Outlined</Badge>\n      <Badge variant=\"solid\">Solid</Badge>\n      <Badge variant=\"surface\">Surface</Badge>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/breadcrumb-custom-separator.tsx",
    "content": "import { Breadcrumb } from \"@/components/retroui/Breadcrumb\";\nimport { Slash } from \"lucide-react\";\n\nexport default function BreadcrumbCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <Breadcrumb.List>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"/\">Home</Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator>\n          <Slash />\n        </Breadcrumb.Separator>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"/docs/components\">Components</Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator>\n          <Slash />\n        </Breadcrumb.Separator>\n        <Breadcrumb.Item>\n          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>\n        </Breadcrumb.Item>\n      </Breadcrumb.List>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "preview/components/breadcrumb-link-component.tsx",
    "content": "import Link from \"next/link\"\n\nimport { Breadcrumb } from \"@/components/retroui/Breadcrumb\"\n\nexport default function BreadcrumbLinkComponent() {\n  return (\n    <Breadcrumb>\n      <Breadcrumb.List>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link asChild>\n            <Link href=\"/\">Home</Link>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator />\n        <Breadcrumb.Item>\n          <Breadcrumb.Link asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator />\n        <Breadcrumb.Item>\n          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>\n        </Breadcrumb.Item>\n      </Breadcrumb.List>\n    </Breadcrumb>\n  )\n}\n"
  },
  {
    "path": "preview/components/breadcrumb-style-collapsed.tsx",
    "content": "import Link from \"next/link\"\n\nimport { Breadcrumb } from \"@/components/retroui/Breadcrumb\";\n\nexport default function BreadcrumbCollapsed() {\n  return (\n    <Breadcrumb>\n      <Breadcrumb.List>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link asChild>\n            <Link href=\"/\">Home</Link>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Item>\n          <Breadcrumb.Ellipsis />\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator />\n        <Breadcrumb.Item>\n          <Breadcrumb.Link asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator />\n        <Breadcrumb.Item>\n          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>\n        </Breadcrumb.Item>\n      </Breadcrumb.List>\n    </Breadcrumb>\n  )\n}\n"
  },
  {
    "path": "preview/components/breadcrumb-style-default.tsx",
    "content": "import { Breadcrumb } from \"@/components/retroui/Breadcrumb\";\n\nexport default function BreadcrumbStyleDefault() {\n  return (\n    <Breadcrumb>\n      <Breadcrumb.List>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"/\">Home</Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator />\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"/docs/components\">Components</Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator />\n        <Breadcrumb.Item>\n          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>\n        </Breadcrumb.Item>\n      </Breadcrumb.List>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "preview/components/button-style-default.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\n\nexport default function ButtonStyleDefault() {\n  return <Button>Click Me!</Button>;\n}\n"
  },
  {
    "path": "preview/components/button-style-icon.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\nimport { PenIcon } from \"lucide-react\";\n\nexport default function ButtonStyleIcon() {\n  return (\n    <Button size=\"icon\">\n      <PenIcon className=\"w-4 h-4\" />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "preview/components/button-style-link.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\n\nexport default function ButtonStyleLink() {\n  return <Button variant=\"link\">Click Me!</Button>;\n}\n"
  },
  {
    "path": "preview/components/button-style-outline.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\n\nexport default function ButtonStyleOutline() {\n  return <Button variant=\"outline\">Click Me!</Button>;\n}\n"
  },
  {
    "path": "preview/components/button-style-secondary.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\n\nexport default function ButtonStyleSecondary() {\n  return <Button variant=\"secondary\">Click Me!</Button>;\n}\n"
  },
  {
    "path": "preview/components/button-style-with-icon.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\nimport { Trash } from \"lucide-react\";\n\nexport default function ButtonStyleWithIcon() {\n  return (\n    <Button className=\"bg-destructive text-white hover:bg-destructive/90\">\n      <Trash className=\"h-4 w-4 mr-2\" /> Delete\n    </Button>\n  );\n}\n"
  },
  {
    "path": "preview/components/calendar-style-default.tsx",
    "content": "\"use client\"\n\nimport { Calendar } from \"@/components/retroui/Calendar\"\n\nconst start = new Date()\n\nexport default function CalendarStyleDefault() {\n  return (\n    <div className=\"max-w-[350px] w-full\">\n        <Calendar\n          numberOfMonths={1}\n          mode=\"single\"\n          defaultMonth={start}\n          selected={start}\n        />\n    </div>\n  )\n}"
  },
  {
    "path": "preview/components/card-style-commerce.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\nimport { Card } from \"@/components/retroui/Card\";\n\nexport default function CommerceCard() {\n  return (\n    <Card className=\"w-[350px] shadow-none hover:shadow-none\">\n      <Card.Content className=\"pb-0\">\n        <img\n          src=\"/images/gameboy.jpg\"\n          className=\"w-full h-full\"\n          alt=\"Gameboy\"\n        />\n      </Card.Content>\n      <Card.Header className=\"pb-0\">\n        <Card.Title>Classic 8-bit Gameboy</Card.Title>\n      </Card.Header>\n      <Card.Content className=\"flex justify-between items-center\">\n        <p className=\"text-lg font-semibold\">$29.90</p>\n        <Button>Add to cart</Button>\n      </Card.Content>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "preview/components/card-style-default.tsx",
    "content": "import { Card } from \"@/components/retroui/Card\";\n\nexport default function BasicCard() {\n  return (\n    <Card>\n      <Card.Header>\n        <Card.Title>This is Card Title</Card.Title>\n        <Card.Description>\n          I can not find what to write here.. so imagine I wrote some good\n          stuff.\n        </Card.Description>\n      </Card.Header>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "preview/components/card-style-testimonial.tsx",
    "content": "import { Text } from \"@/components/retroui/Text\";\nimport { Card } from \"@/components/retroui/Card\";\nimport { Avatar } from \"@/components/retroui/Avatar\";\n\nexport default function TestimonialCard() {\n  return (\n    <Card className=\"w-full max-w-[400px] shadow-none hover:shadow-md\">\n      <Card.Content>\n        <Text className=\"text-lg\">\n          &quot; RetroUI is the cooling looking UI library out there! &quot;\n        </Text>\n\n        <div className=\"flex items-center space-x-2 mt-6\">\n          <Avatar className=\"h-10 w-10\">\n            <Avatar.Image\n              alt=\"avatar\"\n              src=\"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80\"\n            />\n          </Avatar>\n          <div>\n            <div className=\"font-medium\">Leroy Jenkins</div>\n            <div className=\"text-sm text-gray-500 dark:text-gray-400\">\n              CEO of Uber\n            </div>\n          </div>\n        </div>\n      </Card.Content>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "preview/components/carousel-style-default.tsx",
    "content": "import * as React from \"react\"\n\nimport { Card } from \"@/components/retroui/Card\"\nimport {\n    Carousel,\n} from \"@/components/retroui/Carousel\"\n\nexport default function CarouselStyleDefault() {\n    return (\n        <Carousel className=\"w-full max-w-xs\">\n            <Carousel.Content>\n                {Array.from({ length: 5 }).map((_, index) => (\n                    <Carousel.Item key={index}>\n                        <div className=\"p-4\">\n                            <Card className=\"w-full\">\n                                <Card.Content className=\"flex aspect-square items-center justify-center p-6\">\n                                    <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                                </Card.Content>\n                            </Card>\n                        </div>\n                    </Carousel.Item>\n                ))}\n            </Carousel.Content>\n            <Carousel.Previous />\n            <Carousel.Next />\n        </Carousel>\n    )\n}\n"
  },
  {
    "path": "preview/components/carousel-style-sizes.tsx",
    "content": "import * as React from \"react\"\n\nimport { Card } from \"@/components/retroui/Card\"\nimport {\n    Carousel,\n} from \"@/components/retroui/Carousel\"\n\nexport default function CarouselStyleSizes() {\n    return (\n        <Carousel className=\"w-full max-w-sm\">\n            <Carousel.Content>\n                {Array.from({ length: 5 }).map((_, index) => (\n                    <Carousel.Item key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                        <div className=\"p-1\">\n                            <Card className=\"w-full\">\n                                <Card.Content className=\"flex aspect-square items-center justify-center p-6\">\n                                    <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                                </Card.Content>\n                            </Card>\n                        </div>\n                    </Carousel.Item>\n                ))}\n            </Carousel.Content>\n            <Carousel.Previous />\n            <Carousel.Next />\n        </Carousel>\n    )\n}\n"
  },
  {
    "path": "preview/components/carousel-style-vertical.tsx",
    "content": "import * as React from \"react\"\n\nimport { Card } from \"@/components/retroui/Card\"\nimport {\n    Carousel,\n} from \"@/components/retroui/Carousel\"\n\nconst cards = [\n    {label: \"1\", color: \"purple-300\"},\n    {label: \"2\", color: \"green-300\"},\n    {label: \"3\", color: \"red-300\"},\n    {label: \"4\", color: \"yellow-300\"},\n    {label: \"5\", color: \"blue-300\"},\n]\nexport default function CarouselStyleVertical() {\n    return (\n        <Carousel opts={{\n            align: \"start\",\n        }} className=\"w-full max-w-xs\" orientation=\"vertical\">\n            <Carousel.Content className=\"h-[300px]\">\n                {cards.map((card, index) => (\n                    <Carousel.Item key={index} className=\"md:basis-1/2\">\n                        <div className=\"p-1\">\n                            <Card className={`w-full h-[200px] bg-${card.color} rounded-lg`}>\n                                <Card.Content className=\"flex h-full w-full items-center justify-center p-6\">\n                                    <span className=\"text-4xl font-semibold\">{card.label}</span>\n                                </Card.Content>\n                            </Card>\n                        </div>\n                    </Carousel.Item>\n                ))}\n            </Carousel.Content>\n            <Carousel.Previous className=\"rounded-full shadow-sm\" />\n            <Carousel.Next className=\"rounded-full shadow-sm\" />\n        </Carousel>\n    )\n}\n"
  },
  {
    "path": "preview/components/checkbox-style-default.tsx",
    "content": "import { Checkbox } from \"@/components/retroui/Checkbox\";\nimport { Text } from \"@/components/retroui/Text\";\n\nexport default function CheckboxStyleDefault() {\n  return (\n    <div className=\"flex gap-2 items-center\">\n      <Checkbox />\n      <Text>Accept terms and conditions</Text>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/checkbox-style-sizes.tsx",
    "content": "import { Checkbox } from \"@/components/retroui/Checkbox\";\n\nexport default function CheckboxStyleSizes() {\n  return (\n    <div className=\"flex gap-4\">\n      <Checkbox size=\"sm\" />\n      <Checkbox />\n      <Checkbox size=\"lg\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/checkbox-style-variants.tsx",
    "content": "import { Checkbox } from \"@/components/retroui/Checkbox\";\n\nexport default function CheckboxStyleVariants() {\n  return (\n    <div className=\"flex gap-4\">\n      <Checkbox />\n      <Checkbox variant=\"outline\" />\n      <Checkbox variant=\"solid\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/command-style-default.tsx",
    "content": "\"use client\";\n\nimport { Command } from \"@/components/retroui/Command\";\n\nimport {\n  Settings,\n  User,\n  Calendar,\n  Calculator,\n  Smile,\n  CreditCard,\n} from \"lucide-react\";\n\nexport default function CommandStyleDefault() {\n  return (\n    <div className=\"space-y-4\">\n      <Command className=\"border shadow-md md:min-w-[450px] max-w-[500px]\">\n        <Command.Input placeholder=\"Type a command or search...\" />\n        <Command.List>\n          <Command.Empty>No results found.</Command.Empty>\n          <Command.Group heading=\"Suggestions\">\n            <Command.Item>\n              <Calendar />\n              <span>Calendar</span>\n            </Command.Item>\n            <Command.Item>\n              <Smile />\n              <span>Search Emoji</span>\n            </Command.Item>\n            <Command.Item disabled>\n              <Calculator />\n              <span>Calculator</span>\n            </Command.Item>\n          </Command.Group>\n          <Command.Separator />\n          <Command.Group heading=\"Settings\">\n            <Command.Item>\n              <User />\n              <span>Profile</span>\n              <Command.Shortcut>⌘P</Command.Shortcut>\n            </Command.Item>\n            <Command.Item>\n              <CreditCard />\n              <span>Billing</span>\n              <Command.Shortcut>⌘B</Command.Shortcut>\n            </Command.Item>\n            <Command.Item>\n              <Settings />\n              <span>Settings</span>\n              <Command.Shortcut>⌘S</Command.Shortcut>\n            </Command.Item>\n          </Command.Group>\n        </Command.List>\n      </Command>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/command-style-dialog.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Command } from \"@/components/retroui/Command\";\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\";\n\nexport default function Component() {\n  const [open, setOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((open) => !open);\n      }\n    };\n\n    document.addEventListener(\"keydown\", down);\n    return () => document.removeEventListener(\"keydown\", down);\n  }, []);\n\n  return (\n    <>\n      <p className=\"text-muted-foreground text-sm\">\n        Press{\" \"}\n        <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <Command.Dialog open={open} onOpenChange={setOpen}>\n        <Command.Input placeholder=\"Type a command or search...\" />\n        <Command.List>\n          <Command.Empty>No results found.</Command.Empty>\n          <Command.Group heading=\"Suggestions\">\n            <Command.Item>\n              <Calendar />\n              <span>Calendar</span>\n            </Command.Item>\n            <Command.Item>\n              <Smile />\n              <span>Search Emoji</span>\n            </Command.Item>\n            <Command.Item>\n              <Calculator />\n              <span>Calculator</span>\n            </Command.Item>\n          </Command.Group>\n          <Command.Separator />\n          <Command.Group heading=\"Settings\">\n            <Command.Item>\n              <User />\n              <span>Profile</span>\n              <Command.Shortcut>⌘P</Command.Shortcut>\n            </Command.Item>\n            <Command.Item>\n              <CreditCard />\n              <span>Billing</span>\n              <Command.Shortcut>⌘B</Command.Shortcut>\n            </Command.Item>\n            <Command.Item>\n              <Settings />\n              <span>Settings</span>\n              <Command.Shortcut>⌘S</Command.Shortcut>\n            </Command.Item>\n          </Command.Group>\n        </Command.List>\n      </Command.Dialog>\n    </>\n  );\n}\n"
  },
  {
    "path": "preview/components/context-menu-style-default.tsx",
    "content": "\"use client\";\n\nimport { ContextMenu } from \"@/components/retroui/ContextMenu\";\n\nexport default function ContextMenuStyleDefault() {\n  return (\n    <div className=\"flex items-center justify-center min-h-[200px] p-8\">\n      <ContextMenu>\n        <ContextMenu.Trigger\n          className=\"flex h-[150px] w-[300px] items-center justify-center \n            border-2 border-dashed border-border text-sm bg-background \n            transition-all\"\n        >\n          Right click here\n        </ContextMenu.Trigger>\n        <ContextMenu.Content>\n          <ContextMenu.Item>Copy</ContextMenu.Item>\n          <ContextMenu.Item>Cut</ContextMenu.Item>\n          <ContextMenu.Item>Paste</ContextMenu.Item>\n          <ContextMenu.Separator />\n          <ContextMenu.Item>Share</ContextMenu.Item>\n          <ContextMenu.Sub>\n            <ContextMenu.SubTrigger>More options</ContextMenu.SubTrigger>\n            <ContextMenu.SubContent>\n              <ContextMenu.Item>Archive</ContextMenu.Item>\n              <ContextMenu.Item>Delete</ContextMenu.Item>\n            </ContextMenu.SubContent>\n          </ContextMenu.Sub>\n          <ContextMenu.Separator />\n          <ContextMenu.CheckboxItem checked>\n            Show hidden files\n          </ContextMenu.CheckboxItem>\n          <ContextMenu.RadioGroup value=\"one\">\n            <ContextMenu.Label>View mode</ContextMenu.Label>\n            <ContextMenu.RadioItem value=\"one\">List</ContextMenu.RadioItem>\n            <ContextMenu.RadioItem value=\"two\">Grid</ContextMenu.RadioItem>\n          </ContextMenu.RadioGroup>\n        </ContextMenu.Content>\n      </ContextMenu>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/dialog-style-default.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\nimport { Dialog } from \"@/components/retroui/Dialog\";\nimport { Text } from \"@/components/retroui/Text\";\n\nexport default function DialogStyleDefault() {\n  return (\n    <Dialog>\n      <Dialog.Trigger asChild>\n        <Button>Open Dialog</Button>\n      </Dialog.Trigger>\n      <Dialog.Content>\n        <Dialog.Header>\n          <Text as=\"h5\">Confirm your action?</Text>\n        </Dialog.Header>\n        <section className=\"flex flex-col gap-4 p-4\">\n          <section className=\"text-xl\">\n            <p>Are you sure you want to delete this item?</p>\n            <p>This action cannout be undone.</p>\n          </section>\n          <section className=\"flex w-full justify-end\">\n            <Dialog.Trigger asChild>\n              <Button>Confirm</Button>\n            </Dialog.Trigger>\n          </section>\n        </section>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "preview/components/dialog-style-width-variant.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\nimport { Dialog } from \"@/components/retroui/Dialog\";\nimport { Text } from \"@/components/retroui/Text\";\nimport { useState } from \"react\";\n\ntype Variants =\n  | \"auto\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\"\n  | \"screen\";\n\nexport default function DialogStyleWidthVariant() {\n  const [variant, setVariant] = useState<Variants>(\"auto\");\n\n  const sizes: Variants[] = [\n    \"auto\",\n    \"sm\",\n    \"md\",\n    \"lg\",\n    \"xl\",\n    \"2xl\",\n    \"3xl\",\n    \"4xl\",\n    \"screen\",\n  ];\n\n  return (\n    <Dialog>\n      <Dialog.Trigger asChild>\n        <Button>Open Dialog</Button>\n      </Dialog.Trigger>\n      <Dialog.Content size={variant}>\n        <Dialog.Header>\n          <Text as=\"h5\">Dialog with variants</Text>\n        </Dialog.Header>\n        <section className=\"flex flex-col gap-4 p-4\">\n          <section className=\"text-xl\">\n            <p>Choose your width size</p>\n            <section className=\"flex flex-wrap gap-4\">\n              {sizes.map((singleVariant) => (\n                <Button\n                  key={\"variant-list-\" + singleVariant}\n                  type=\"button\"\n                  variant={singleVariant == variant ? \"default\" : \"outline\"}\n                  onClick={() => setVariant(singleVariant)}\n                >\n                  {singleVariant}\n                </Button>\n              ))}\n            </section>\n          </section>\n        </section>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "preview/components/dialog-style-with-footer.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\nimport { Text } from \"@/components/retroui/Text\";\nimport { Dialog } from \"@/components/retroui/Dialog\";\n\nexport default function DialogStyleWithFooter() {\n  return (\n    <Dialog>\n      <Dialog.Trigger asChild>\n        <Button>Open Dialog</Button>\n      </Dialog.Trigger>\n      <Dialog.Content>\n        <Dialog.Header position={\"fixed\"} asChild>\n          <Text as=\"h5\">Confirm your action?</Text>\n        </Dialog.Header>\n        <section className=\"flex flex-col gap-4 p-4\">\n          <section className=\"text-xl\">\n            <p>Are you sure you want to delete this item?</p>\n            <p>This action cannout be undone.</p>\n          </section>\n        </section>\n        <Dialog.Footer>\n          <Dialog.Trigger asChild>\n            <Button>Confirm</Button>\n          </Dialog.Trigger>\n          <Dialog.Trigger asChild>\n            <Button variant={\"outline\"}>Close</Button>\n          </Dialog.Trigger>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "preview/components/dialog-style-with-form.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\nimport { Dialog } from \"@/components/retroui/Dialog\";\nimport { Input } from \"@/components/retroui/Input\";\nimport { Text } from \"@/components/retroui/Text\";\n\nexport default function DialogStyleWithForm() {\n  return (\n    <Dialog>\n      <Dialog.Trigger asChild>\n        <Button>Open Form</Button>\n      </Dialog.Trigger>\n      <Dialog.Content size={\"md\"}>\n        <Dialog.Header position={\"fixed\"}>\n          <Text as=\"h5\">Contact Us</Text>\n        </Dialog.Header>\n        <form className=\"flex flex-col gap-4\">\n          <div className=\"flex flex-col p-4 gap-4\">\n            <div className=\"flex-col gap-2\">\n              <label htmlFor=\"name\">\n                Your name <span className=\"text-red-500\">*</span>\n              </label>\n              <Input placeholder=\"Type your name\" required />\n            </div>\n            <div className=\"flex-col gap-2\">\n              <label htmlFor=\"name\">\n                Your e-email <span className=\"text-red-500\">*</span>\n              </label>\n              <Input placeholder=\"Type your name\" required />\n            </div>\n          </div>\n          <Dialog.Footer>\n            <Dialog.Trigger asChild>\n              <Button type=\"submit\">Submit</Button>\n            </Dialog.Trigger>\n          </Dialog.Footer>\n        </form>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "preview/components/drawer-style-default.tsx",
    "content": "import * as React from \"react\"\nimport { Drawer } from \"@/components/retroui/Drawer\"\nimport { Button } from \"@/components/retroui/Button\"\n\nexport default function DrawerStyleDefault() {\n    return (\n        <Drawer>\n            <Drawer.Trigger asChild>\n                <Button>Submit</Button>\n            </Drawer.Trigger>\n            <Drawer.Content>\n                <Drawer.Header>\n                    <Drawer.Title>Are you absolutely sure?</Drawer.Title>\n                    <Drawer.Description>This action cannot be undone.</Drawer.Description>\n                </Drawer.Header>\n                <Drawer.Footer>\n                    <div className=\"flex justify-center gap-3\">\n                        <Button>Submit</Button>\n                        <Drawer.Close>\n                            <Button variant=\"outline\">Cancel</Button>\n                        </Drawer.Close>\n                    </div>\n\n                </Drawer.Footer>\n            </Drawer.Content>\n        </Drawer>\n    )\n}\n"
  },
  {
    "path": "preview/components/drawer-style-right-direction.tsx",
    "content": "import * as React from \"react\"\nimport { Drawer } from \"@/components/retroui/Drawer\"\nimport { Button } from \"@/components/retroui/Button\"\nimport { Input } from \"@/components/retroui/Input\"\nimport { Label } from \"@/components/retroui/Label\"\nimport { Textarea } from \"@/components/retroui/Textarea\"\n\nexport default function DrawerStyleRightDirection() {\n    return (\n        <Drawer direction=\"right\">\n            <Drawer.Trigger asChild>\n                <Button>Review Us</Button>\n            </Drawer.Trigger>\n            <Drawer.Content>\n                <Drawer.Header>\n                    <Drawer.Title>Edit Profile</Drawer.Title>\n                    <Drawer.Description>Make changes to your profile here. Click save when you're done.</Drawer.Description>\n                </Drawer.Header>\n\n                <form className=\"flex flex-col space-y-4 p-4\">\n                    <div className=\"flex flex-col space-y-2\">\n                        <Label>Email</Label>\n                        <Input placeholder=\"Enter your email\" />\n                    </div>\n                    <div className=\"flex flex-col space-y-2\">\n                        <Label>Comment</Label>\n                        <Textarea rows={4} placeholder=\"Enter your comment\" />\n                    </div>\n                </form>\n                <Drawer.Footer>\n                    <div className=\"flex justify-start gap-3\">\n                        <Button>Submit</Button>\n                        <Drawer.Close>\n                            <Button variant=\"outline\">Cancel</Button>\n                        </Drawer.Close>\n                    </div>\n                </Drawer.Footer>\n            </Drawer.Content>\n        </Drawer>\n    )\n}\n"
  },
  {
    "path": "preview/components/empty-style-custom-everything.tsx",
    "content": "import { Button, Empty } from \"@/components/retroui\";\nimport { InboxIcon } from \"lucide-react\";\n\n\nexport default function CustomEverythingEmpty() {\n  return (\n    <Empty>\n      <Empty.Content>\n        <Empty.Icon>\n          <InboxIcon className=\"size-10 md:size-12\" />\n        </Empty.Icon>\n        <Empty.Title>No data</Empty.Title>\n        <Empty.Description>\n          Get started by creating your first item\n        </Empty.Description>\n        <Button>Create now</Button>\n      </Empty.Content>\n    </Empty>\n  );\n}\n"
  },
  {
    "path": "preview/components/empty-style-custom-icon.tsx",
    "content": "import { Empty } from \"@/components/retroui/Empty\";\n\nexport default function CustomIconEmpty() {\n  return (\n    <Empty>\n      <Empty.Content>\n        <Empty.Icon>\n          <span className=\"text-4xl\">👻</span>\n        </Empty.Icon>\n        <Empty.Title>No data</Empty.Title>\n        <Empty.Separator />\n        <Empty.Description>\n          There is nothing to show here yet. Imagine you wrote some good stuff\n          here.\n        </Empty.Description>\n      </Empty.Content>\n    </Empty>\n  );\n}\n"
  },
  {
    "path": "preview/components/empty-style-default.tsx",
    "content": "import { Empty } from \"@/components/retroui\";\n\nexport default function DefaultEmpty() {\n  return (\n    <Empty>\n      <Empty.Content>\n        <Empty.Icon className=\"size-10 md:size-12\" />\n        <Empty.Title>No Results</Empty.Title>\n        <Empty.Separator />\n        <Empty.Description>\n          Your search didn't match any items. Try adjusting your filters.\n        </Empty.Description>\n      </Empty.Content>\n    </Empty>\n  );\n}\n"
  },
  {
    "path": "preview/components/empty-style-table.tsx",
    "content": "import { Empty } from \"@/components/retroui/Empty\";\n\nimport { Table } from \"@/components/retroui/Table\";\n\nconst invoices = [];\n\nexport default function TableEmpty() {\n  return (\n    <Table className=\"mx-auto\">\n      <Table.Header>\n        <Table.Row>\n          <Table.Head className=\"w-[100px]\">Invoice</Table.Head>\n          <Table.Head>Customer</Table.Head>\n          <Table.Head>Status</Table.Head>\n          <Table.Head>Method</Table.Head>\n          <Table.Head className=\"text-right\">Amount</Table.Head>\n        </Table.Row>\n      </Table.Header>\n\n      <Table.Body>\n        {invoices?.length === 0 && (\n          <Table.Row>\n            <Table.Cell colSpan={5}>\n              <Empty className=\"border-none shadow-none\">\n                <Empty.Content>\n                  <Empty.Icon className=\"size-8\" />\n                  <Empty.Title className=\"md:text-base\">Empty</Empty.Title>\n                  <Empty.Description>\n                    Get started by creating your first invoice.\n                  </Empty.Description>\n                </Empty.Content>\n              </Empty>\n            </Table.Cell>\n          </Table.Row>\n        )}\n      </Table.Body>\n    </Table>\n  );\n}\n"
  },
  {
    "path": "preview/components/input-style-default.tsx",
    "content": "import { Input } from \"@/components/retroui/Input\";\n\nexport default function InputStyleDefault() {\n  return <Input type=\"text\" placeholder=\"type something...\" />;\n}\n"
  },
  {
    "path": "preview/components/input-style-error.tsx",
    "content": "import { Input } from \"@/components/retroui/Input\";\nimport { Label } from \"@/components/retroui/Label\";\n\nexport default function InputStyleError() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"pokemon\">Favorite Pokemon</Label>\n      <Input\n        type=\"pokemon\"\n        id=\"pokemon\"\n        placeholder=\"Charmander\"\n        defaultValue=\"Son Goku\"\n        aria-invalid\n      />\n      <p className=\"text-sm text-red-500\">Please provide a valid pokemon!</p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/input-style-with-label.tsx",
    "content": "import { Input } from \"@/components/retroui/Input\";\nimport { Label } from \"@/components/retroui/Label\";\n\nexport default function InputStyleWithLabel() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"pokemon\">Favorite Pokemon</Label>\n      <Input type=\"pokemon\" id=\"pokemon\" placeholder=\"Charmander\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/label-style-default.tsx",
    "content": "import { Input, Label } from \"@/components/retroui\";\n\nexport default function LabelStyleDefault() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"pokemon\">Favorite Pokemon</Label>\n      <Input type=\"pokemon\" id=\"pokemon\" placeholder=\"Charmander\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/label.tsx",
    "content": "\"use client\";\n\nimport { Checkbox } from \"@/components/retroui\";\nimport { Label } from \"@/components/retroui\";\n\nexport default function LabelDefault() {\n  return (\n    <div className=\"flex items-center bg-background space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/loader-style-custom.tsx",
    "content": "import { Loader } from \"@/components/retroui/Loader\";\n\nexport default function LoaderPreview() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex items-center gap-4\">\n        <Loader count={4} />\n        <Loader count={5} delayStep={80} />\n      </div>\n      <div className=\"flex items-center gap-4\">\n        <Loader duration={1.5} />\n        <Loader variant=\"secondary\" count={4} duration={1.2} delayStep={120} />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/loader-style-default.tsx",
    "content": "import { Loader } from \"@/components/retroui/Loader\";\n\nexport default function LoaderPreview() {\n  return <Loader />;\n}\n\n"
  },
  {
    "path": "preview/components/loader-style-outline.tsx",
    "content": "import { Loader } from \"@/components/retroui/Loader\";\n\nexport default function LoaderPreview() {\n  return <Loader variant=\"outline\" />;\n}\n\n"
  },
  {
    "path": "preview/components/loader-style-sizes.tsx",
    "content": "import { Loader } from \"@/components/retroui/Loader\";\n\nexport default function LoaderPreview() {\n  return (\n    <div className=\"flex items-end gap-4\">\n      <Loader size=\"sm\" />\n      <Loader size=\"md\" />\n      <Loader size=\"lg\" />\n    </div>\n  );\n}\n\n"
  },
  {
    "path": "preview/components/loader-style-solid.tsx",
    "content": "import { Loader } from \"@/components/retroui/Loader\";\n\nexport default function LoaderPreview() {\n  return <Loader variant=\"secondary\" />;\n}\n\n"
  },
  {
    "path": "preview/components/menu-style-default.tsx",
    "content": "import { Button } from \"@/components/retroui/Button\";\nimport { Menu } from \"@/components/retroui/Menu\";\n\nexport default function MenuDefault() {\n  return (\n    <Menu>\n      <Menu.Trigger asChild>\n        <Button>Menu</Button>\n      </Menu.Trigger>\n      <Menu.Content className=\"min-w-36\">\n        <Menu.Item>Menu Item 1</Menu.Item>\n        <Menu.Item>Menu Item 2</Menu.Item>\n        <Menu.Item>Menu Item 3</Menu.Item>\n      </Menu.Content>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "preview/components/popover-style-default-shadow.tsx",
    "content": "\"use client\";\n\nimport { Popover, Label, Button, Input } from \"@/components/retroui\";\n\nexport default function PopoverStyleDefaultShadow() {\n  return (\n    <Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Popover</Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"w-80 shadow-md\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "preview/components/popover-style-default.tsx",
    "content": "\"use client\";\n\nimport { Popover, Label, Button, Input } from \"@/components/retroui\";\n\nexport default function PopoverStyleDefault() {\n  return (\n    <Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Popover</Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"w-80 font-sans\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "preview/components/progress-style-default.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Progress } from \"@/components/retroui/Progress\";\n\nexport default function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13);\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500);\n    return () => clearTimeout(timer);\n  }, []);\n\n  return <Progress value={progress} className=\"w-[60%]\" />;\n}\n"
  },
  {
    "path": "preview/components/radio-style-default.tsx",
    "content": "import { RadioGroup } from \"@/components/retroui/Radio\";\n\nexport default function RadioStyleSizes() {\n  return (\n    <RadioGroup>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroup.Item value=\"1\" />\n        <label htmlFor=\"1\"> Option 1</label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroup.Item value=\"2\" />\n        <label htmlFor=\"2\"> Option 2</label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroup.Item value=\"3\" />\n        <label htmlFor=\"3\"> Option 3</label>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "preview/components/radio-style-sizes.tsx",
    "content": "import { RadioGroup } from \"@/components/retroui/Radio\";\n\nexport default function RadioStyleSizes() {\n  return (\n    <div className=\"flex gap-4\">\n      <RadioGroup>\n        <div className=\"flex items-center space-x-2\">\n          <RadioGroup.Item value=\"sm\" size=\"sm\" />\n          <label htmlFor=\"sm\" className=\"text-sm\">\n            Small\n          </label>\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <RadioGroup.Item value=\"md\" size=\"md\" />\n          <label htmlFor=\"md\">Medium</label>\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <RadioGroup.Item value=\"lg\" size=\"lg\" />\n          <label htmlFor=\"lg\" className=\"text-lg\">\n            Large Size\n          </label>\n        </div>\n      </RadioGroup>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/radio-style-variants.tsx",
    "content": "import { RadioGroup } from \"@/components/retroui/Radio\";\n\nexport default function RadioStyleVariants() {\n  return (\n    <div className=\"flex gap-4\">\n      <RadioGroup>\n        <div className=\"flex items-center space-x-2\">\n          <RadioGroup.Item value=\"default\" variant=\"default\" />\n          <label htmlFor=\"default\">Default Style</label>\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <RadioGroup.Item value=\"outline\" variant=\"outline\" />\n          <label htmlFor=\"outline\">Outline Style</label>\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <RadioGroup.Item value=\"solid\" variant=\"solid\" />\n          <label htmlFor=\"solid\">Solid Style</label>\n        </div>\n      </RadioGroup>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/retro-player.tsx",
    "content": "import { Button, Card } from \"@/components/retroui\";\nimport { Slider } from \"@/components/retroui/Slider\";\nimport {\n  ArrowLeft,\n  Heart,\n  Pause,\n  Repeat,\n  Shuffle,\n  Sparkle,\n  StepBack,\n  StepForward,\n} from \"lucide-react\";\n\n\nexport default function RetroPlayerStyle() {\n  return (\n    <Card className=\"w-full max-w-sm rounded-lg shadow-none\">\n      {/* header */}\n      <Card.Header className=\"flex flex-row justify-between border-b border-black/50 dark:border-white/50\">\n        <Button variant=\"ghost\" className=\"p-0\">\n          <ArrowLeft className=\"size-5\" />\n        </Button>\n        <p className=\"text-sm font-bold\">Now playing</p>\n        <Button variant=\"ghost\" className=\"p-0\">\n          <Heart className=\"size-5\" />\n        </Button>\n      </Card.Header>\n      {/* card content */}\n      <Card.Content className=\"relative px-4 sm:px-12 py-6 overflow-hidden\">\n        {/* thumbnail box */}\n        <div className=\"flex items-center gap-4 mb-6\">\n          <img\n            src=\"/images/punk.svg\"\n            alt=\"retro player album\"\n            className=\"size-12 object-contain rounded-md border\"\n          />\n          <div className=\"flex-1\">\n            <p className=\"font-semibold\">Punk Anthem Music</p>\n            <p className=\"text-sm\">by Punk</p>\n          </div>\n        </div>\n\n        <div className=\"\">\n          {/* timeline box */}\n          <div>\n            <Slider value={[50]} />\n            <div className=\"flex items-center justify-between mt-1.5 select-none\">\n              <p className=\"text-xs text-muted-foreground\">\n                01:10\n              </p>\n              <p className=\"text-xs text-muted-foreground\">\n                02:15\n              </p>\n            </div>\n          </div>\n          {/* controls */}\n          <div className=\"flex gap-2 sm:gap-3 items-center justify-between mt-3\">\n            <Button variant=\"ghost\" className=\"p-0\">\n              <Repeat className=\"size-4\" />\n            </Button>\n            <Button variant=\"ghost\" className=\"p-0\">\n              <StepBack className=\"size-5\" />\n            </Button>\n            <Button\n              variant=\"outline\"\n              className=\"rounded-full h-14 w-14\"\n            >\n              <Pause className=\"size-5\" />\n            </Button>\n            <Button variant=\"ghost\" className=\"p-0\">\n              <StepForward className=\"size-5\" />\n            </Button>\n            <Button variant=\"ghost\" className=\"p-0\">\n              <Shuffle className=\"size-4\" />\n            </Button>\n          </div>\n        </div>\n\n        <Sparkle\n          size={30}\n          strokeWidth={0.5}\n          className=\"absolute sm:block hidden -right-2 top-26 fill-amber-300 rotate-12\"\n        />\n        <Sparkle\n          size={20}\n          strokeWidth={0.5}\n          className=\"absolute sm:block hidden left-1 bottom-20 fill-slate-500\"\n        />\n      </Card.Content>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "preview/components/select-style-default.tsx",
    "content": "import { Select } from \"@/components/retroui/Select\";\nimport React from \"react\";\n\nexport default function SelectStyleDefault() {\n  return (\n    <Select>\n      <Select.Trigger className=\"w-60\">\n        <Select.Value placeholder=\"Pick your Pokemon\" />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Group>\n          <Select.Item value=\"pikachu\">Pikachu</Select.Item>\n          <Select.Item value=\"charizard\">Charizard</Select.Item>\n          <Select.Item value=\"bulbasaur\">Bulbasaur</Select.Item>\n          <Select.Item value=\"squirtle\">Squirtle</Select.Item>\n        </Select.Group>\n      </Select.Content>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "preview/components/slider-style-default.tsx",
    "content": "import { Slider } from \"@/components/retroui/Slider\";\n\nexport default function SliderDefault() {\n  return (\n    <div className=\"w-[400px]\">\n      <Slider\n        defaultValue={[50]}\n        min={0}\n        max={100}\n        step={1}\n        aria-label=\"Slider Control\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/sonner-style-colored-status.tsx",
    "content": "import { Button } from \"@/components/retroui\";\nimport { toast } from \"sonner\";\n\nexport default function SonnerStyleRichColors() {\n  const onClick = () => {\n    toast.success(\"Congrats man (Colored) 🎉\", {\n      richColors: true,\n    });\n  };\n\n  return <Button onClick={onClick}>Congratulate Me</Button>;\n}\n"
  },
  {
    "path": "preview/components/sonner-style-default.tsx",
    "content": "import { Button } from \"@/components/retroui\";\nimport { toast } from \"sonner\";\n\nexport default function SonnerStyleDefault() {\n  const onClick = () => {\n    toast(\"Event has been created\", {\n      description: \"Sunday, December 03, 2025\",\n      cancel: {\n        label: \"Undo\",\n        onClick: () => {},\n      },\n    });\n  };\n\n  return <Button onClick={onClick}>Show Toast</Button>;\n}\n"
  },
  {
    "path": "preview/components/sonner-style-error.tsx",
    "content": "import { Button } from \"@/components/retroui\";\nimport { toast } from \"sonner\";\n\nexport default function SonnerStyleError() {\n  const onClick = () => {\n    toast.error(\"Oops! you ran into a pot hole\");\n  };\n\n  return <Button onClick={onClick}>Show Toast (Error)</Button>;\n}\n"
  },
  {
    "path": "preview/components/sonner-style-status.tsx",
    "content": "import { Button } from \"@/components/retroui\";\nimport { toast } from \"sonner\";\n\nexport default function SonnerStyleStatus() {\n  const onClick = () => {\n    toast.success(\"Congrats man 🎉 (Plain)\");\n  };\n\n  return <Button onClick={onClick}>Congratulate Me</Button>;\n}\n"
  },
  {
    "path": "preview/components/switch-style-default.tsx",
    "content": "import { Switch } from \"@/components/retroui/Switch\";\nimport React from \"react\";\n\nexport default function SwitchStyleDefault() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"notification\" />\n      <label htmlFor=\"notification\">Email Notifications</label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/switch-style-disabled.tsx",
    "content": "import { Switch } from \"@/components/retroui/Switch\";\nimport React from \"react\";\n\nexport default function SwitchStyleDisabled() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"notification\" disabled />\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/tab-style-default.tsx",
    "content": "import { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList } from \"@/components/retroui/Tab\";\n\nexport default function TabStyleDefault() {\n  return (\n    <Tabs className=\"w-full\">\n      <TabsTriggerList>\n        <TabsTrigger>Home</TabsTrigger>\n        <TabsTrigger>About</TabsTrigger>\n        <TabsTrigger>Contact</TabsTrigger>\n      </TabsTriggerList>\n      <TabsPanels>\n        <TabsContent>\n          Welcome to RetroUI, a retro styled UI library built with React,\n          Tailwind CSS & Headless UI.\n        </TabsContent>\n        <TabsContent>This is the about section!</TabsContent>\n        <TabsContent>And, this is the contact section!</TabsContent>\n      </TabsPanels>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "preview/components/table-style-default.tsx",
    "content": "import { Badge } from \"@/components/retroui\"\nimport {\n    Table,\n} from \"@/components/retroui/Table\"\n\nconst invoices = [\n    {\n        invoice: \"INV001\",\n        customer: \"John Doe\",\n        paymentStatus: \"Paid\",\n        totalAmount: \"$250.00\",\n        paymentMethod: \"Credit Card\",\n    },\n    {\n        invoice: \"INV002\",\n        customer: \"Jane Doe\",\n        paymentStatus: \"Pending\",\n        totalAmount: \"$150.00\",\n        paymentMethod: \"PayPal\",\n    },\n    {\n        invoice: \"INV003\",\n        customer: \"Mark Doe\",\n        paymentStatus: \"Unpaid\",\n        totalAmount: \"$350.00\",\n        paymentMethod: \"Bank Transfer\",\n    },\n    {\n        invoice: \"INV004\",\n        customer: \"Robert Doe\",\n        paymentStatus: \"Paid\",\n        totalAmount: \"$450.00\",\n        paymentMethod: \"Credit Card\",\n    },\n    {\n        invoice: \"INV005\",\n        customer: \"Isabella Doe\",\n        paymentStatus: \"Paid\",\n        totalAmount: \"$550.00\",\n        paymentMethod: \"PayPal\",\n    },\n    {\n        invoice: \"INV006\",\n        customer: \"Mrs. Doe\",\n        paymentStatus: \"Pending\",\n        totalAmount: \"$200.00\",\n        paymentMethod: \"Bank Transfer\",\n    },\n    {\n        invoice: \"INV007\",\n        customer: \"Mr. Doe\",\n        paymentStatus: \"Unpaid\",\n        totalAmount: \"$300.00\",\n        paymentMethod: \"Credit Card\",\n    },\n]\n\nexport default function TableStyleDefault() {\n    return (\n        <Table className=\"max-w-lg mb-6 mx-auto\">\n            <Table.Header>\n                <Table.Row>\n                    <Table.Head className=\"w-[100px]\">Invoice</Table.Head>\n                    <Table.Head>Customer</Table.Head>\n                    <Table.Head>Status</Table.Head>\n                    <Table.Head>Method</Table.Head>\n                    <Table.Head className=\"text-right\">Amount</Table.Head>\n                </Table.Row>\n            </Table.Header>\n            <Table.Body>\n                {invoices.map((invoice) => (\n                    <Table.Row key={invoice.invoice}>\n                        <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n                        <Table.Cell>{invoice.customer}</Table.Cell>\n                        <Table.Cell><Badge variant=\"solid\" size=\"sm\">{invoice.paymentStatus}</Badge></Table.Cell>\n                        <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n                        <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n                    </Table.Row>\n                ))}\n            </Table.Body>\n            <Table.Footer>\n                <Table.Row>\n                    <Table.Cell colSpan={4}>Total</Table.Cell>\n                    <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n                </Table.Row>\n            </Table.Footer>\n        </Table>\n    )\n}"
  },
  {
    "path": "preview/components/table-with-checkbox.tsx",
    "content": "import { Badge, Checkbox } from \"@/components/retroui\"\nimport {\n  Table,\n} from \"@/components/retroui/Table\"\nimport { useState } from \"react\"\n\nconst employees = [\n  {\n    id: \"1\",\n    name: \"Alice Johnson\",\n    department: \"Engineering\",\n    status: \"Active\",\n    salary: \"85,000\",\n  },\n  {\n    id: \"2\",\n    name: \"Bob Smith\",\n    department: \"Product\",\n    status: \"Active\",\n    salary: \"95,000\",\n  },\n  {\n    id: \"3\",\n    name: \"Carol Williams\",\n    department: \"Design\",\n    status: \"On Leave\",\n    salary: \"70,000\",\n  },\n  {\n    id: \"4\",\n    name: \"David Brown\",\n    department: \"Engineering\",\n    status: \"Active\",\n    salary: \"90,000\",\n  },\n  {\n    id: \"5\",\n    name: \"Eve Davis\",\n    department: \"Engineering\",\n    status: \"Active\",\n    salary: \"75,000\",\n  },\n  {\n    id: \"6\",\n    name: \"Frank Wilson\",\n    department: \"Marketing\",\n    status: \"Inactive\",\n    salary: \"80,000\",\n  },\n]\n\nexport default function TableWithCheckbox() {\n  const [selectedEmployees, setSelectedEmployees] = useState<Set<string>>(new Set())\n\n  const handleSelectAll = (checked: boolean) => {\n    if (checked) {\n      setSelectedEmployees(new Set(employees.map(emp => emp.id)))\n    } else {\n      setSelectedEmployees(new Set())\n    }\n  }\n\n  const handleSelectEmployee = (employeeId: string, checked: boolean) => {\n    const newSelected = new Set(selectedEmployees)\n    if (checked) {\n      newSelected.add(employeeId)\n    } else {\n      newSelected.delete(employeeId)\n    }\n    setSelectedEmployees(newSelected)\n  }\n\n  const isAllSelected = selectedEmployees.size === employees.length\n\n  return (\n    <Table className=\"max-w-lg mb-6 mx-auto\">\n      <Table.Header>\n        <Table.Row>\n          <Table.Head className=\"w-[50px]\">\n            <Checkbox\n              checked={isAllSelected}\n              onCheckedChange={handleSelectAll}\n            />\n          </Table.Head>\n          <Table.Head>Name</Table.Head>\n          <Table.Head>Department</Table.Head>\n          <Table.Head>Status</Table.Head>\n          <Table.Head className=\"text-right\">Salary</Table.Head>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {employees.map((employee) => (\n          <Table.Row key={employee.id}>\n            <Table.Cell>\n              <Checkbox\n                checked={selectedEmployees.has(employee.id)}\n                onCheckedChange={(checked) => handleSelectEmployee(employee.id, Boolean(checked))}\n              />\n            </Table.Cell>\n            <Table.Cell className=\"font-medium\">{employee.name}</Table.Cell>\n            <Table.Cell>{employee.department}</Table.Cell>\n            <Table.Cell>\n              <Badge\n                variant={employee.status === 'Active' ? 'default' : employee.status === 'On Leave' ? 'outline' : 'solid'}\n                size=\"sm\"\n              >\n                {employee.status}\n              </Badge>\n            </Table.Cell>\n            <Table.Cell className=\"text-right\">$ {employee.salary}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n      <Table.Footer>\n        <Table.Row>\n          <Table.Cell colSpan={4}>Selected: {selectedEmployees.size} / {employees.length}</Table.Cell>\n          <Table.Cell className=\"text-right font-semibold\">$ {employees.reduce((total, employee) => total + Number(employee.salary.replace(',', '')), 0)}</Table.Cell>\n        </Table.Row>\n      </Table.Footer>\n    </Table>\n  )\n}"
  },
  {
    "path": "preview/components/table-with-sticky-header.tsx",
    "content": "import { Badge } from \"@/components/retroui\";\nimport { Table } from \"@/components/retroui/Table\";\n\nconst transactions = [\n  {\n    id: \"TXN001\",\n    date: \"2024-01-15\",\n    description: \"Payment from Customer A\",\n    amount: \"$1,250.00\",\n    category: \"Revenue\",\n  },\n  {\n    id: \"TXN002\",\n    date: \"2024-01-15\",\n    description: \"Office Supplies Purchase\",\n    amount: \"-$85.50\",\n    category: \"Expense\",\n  },\n  {\n    id: \"TXN003\",\n    date: \"2024-01-16\",\n    description: \"Software License Renewal\",\n    category: \"Expense\",\n    amount: \"-$299.99\",\n  },\n  {\n    id: \"TXN004\",\n    date: \"2024-01-16\",\n    description: \"Payment from Customer B\",\n    category: \"Revenue\",\n    amount: \"$750.00\",\n  },\n  {\n    id: \"TXN005\",\n    date: \"2024-01-17\",\n    description: \"Marketing Campaign\",\n    category: \"Expense\",\n    amount: \"-$500.00\",\n  },\n  {\n    id: \"TXN006\",\n    date: \"2024-01-17\",\n    description: \"Freelancer Payment\",\n    category: \"Expense\",\n    amount: \"-$400.00\",\n  },\n  {\n    id: \"TXN007\",\n    date: \"2024-01-18\",\n    description: \"Payment from Customer C\",\n    category: \"Revenue\",\n    amount: \"$2,100.00\",\n  },\n  {\n    id: \"TXN008\",\n    date: \"2024-01-18\",\n    description: \"Equipment Purchase\",\n    category: \"Expense\",\n    amount: \"-$1,200.00\",\n  },\n  {\n    id: \"TXN009\",\n    date: \"2024-01-19\",\n    description: \"Subscription Fee\",\n    category: \"Expense\",\n    amount: \"-$49.99\",\n    status: \"Pending\",\n  },\n  {\n    id: \"TXN010\",\n    date: \"2024-01-19\",\n    description: \"Payment from Customer D\",\n    category: \"Revenue\",\n    amount: \"$890.00\",\n  },\n  {\n    id: \"TXN011\",\n    date: \"2024-01-20\",\n    description: \"Travel Expenses\",\n    category: \"Expense\",\n    amount: \"-$350.00\",\n  },\n  {\n    id: \"TXN012\",\n    date: \"2024-01-20\",\n    description: \"Payment from Customer E\",\n    category: \"Revenue\",\n    amount: \"$1,500.00\",\n  },\n];\n\nexport default function TableWithStickyHeader() {\n  return (\n    <div className=\"h-96 border-2\">\n      <Table className=\"border-0 shadow-none\">\n        <Table.Header className=\"sticky top-0\">\n          <Table.Row className=\"bg-secondary hover:bg-secondary\">\n            <Table.Head className=\"w-[100px] text-secondary-foreground\">\n              ID\n            </Table.Head>\n            <Table.Head className=\"text-secondary-foreground\">Date</Table.Head>\n            <Table.Head className=\"text-secondary-foreground\">\n              Description\n            </Table.Head>\n            <Table.Head className=\"text-secondary-foreground\">\n              Category\n            </Table.Head>\n            <Table.Head className=\"text-right text-secondary-foreground\">\n              Amount\n            </Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {transactions.map((transaction) => (\n            <Table.Row key={transaction.id}>\n              <Table.Cell className=\"font-medium\">{transaction.id}</Table.Cell>\n              <Table.Cell>{transaction.date}</Table.Cell>\n              <Table.Cell>{transaction.description}</Table.Cell>\n              <Table.Cell>\n                <Badge\n                  variant={\n                    transaction.category === \"Revenue\" ? \"default\" : \"outline\"\n                  }\n                  size=\"sm\"\n                >\n                  {transaction.category}\n                </Badge>\n              </Table.Cell>\n              <Table.Cell\n                className={`text-right font-medium ${transaction.amount.startsWith(\"-\") ? \"text-destructive\" : \"text-foreground\"}`}\n              >\n                {transaction.amount}\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/text-headings.tsx",
    "content": "import { Text } from \"@/components/retroui/Text\";\n\nexport default function TextHeadings() {\n  return (\n    <div className=\"space-y-4\">\n      <Text as=\"h1\">This is H1</Text>\n      <Text as=\"h2\">This is H2</Text>\n      <Text as=\"h3\">This is H3</Text>\n      <Text as=\"h4\">This is H4</Text>\n      <Text as=\"h5\">This is H5</Text>\n      <Text as=\"h6\">This is H6</Text>\n    </div>\n  );\n}\n"
  },
  {
    "path": "preview/components/textarea-style-default.tsx",
    "content": "import { Textarea } from \"@/components/retroui/Textarea\";\n\nexport default function TextareaStyleDefault() {\n  return (\n    <Textarea\n      rows={4}\n      placeholder=\"type something...\"\n      className=\"px-4 py-2 w-full border-2 shadow-md transition focus:outline-hidden focus:shadow-xs\"\n    />\n  );\n}\n"
  },
  {
    "path": "preview/components/toc-style-default.tsx",
    "content": "\nimport { TableOfContents } from \"@/components/retroui/TableOfContents\";\n\nexport default function TocStyleDefault() {\n    return <TableOfContents />\n}"
  },
  {
    "path": "preview/components/toc-style-depth.tsx",
    "content": "\nimport { TableOfContents } from \"@/components/retroui/TableOfContents\";\nimport { Text } from \"@/components/retroui/Text\";\n\nexport default function TocStyleDepth() {\n    return <TableOfContents depth={3} className=\"w-80 h-96\">\n        <Text className=\"mb-3 border-b pb-2\">On this page</Text>\n    </TableOfContents>\n}"
  },
  {
    "path": "preview/components/toc-style-manual.tsx",
    "content": "import { TableOfContents } from \"@/components/retroui/TableOfContents\";\nimport { Text } from \"@/components/retroui/Text\";\n\nexport default function TocStyleManual() {\n    const manualData = [\n        { id: 'introduction', title: 'Introduction', depth: 1 },\n        { id: 'getting-started', title: 'Getting Started', depth: 2 },\n        { id: 'installation', title: 'Installation', depth: 3 },\n        { id: 'configuration', title: 'Configuration', depth: 3 },\n        { id: 'advanced-usage', title: 'Advanced Usage', depth: 1 },\n        { id: 'api-reference', title: 'API Reference', depth: 2 },\n        { id: 'examples', title: 'Examples', depth: 2 },\n        { id: 'troubleshooting', title: 'Troubleshooting', depth: 1 },\n    ];\n\n    return <TableOfContents \n        data={manualData}\n        className=\"w-80 h-96\"\n    >\n        <Text className=\"mb-3 border-b pb-2\">Manual TOC</Text>\n    </TableOfContents>\n}"
  },
  {
    "path": "preview/components/toggle-group-style-default.tsx",
    "content": "\"use client\";\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/retroui\";\nimport { Bold, Italic, Underline } from \"lucide-react\";\n\nexport default function ToggleGroupStyleDefault() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"default\">\n      <ToggleGroupItem value=\"bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "preview/components/toggle-group-style-outline-muted.tsx",
    "content": "\"use client\";\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/retroui\";\nimport { Bold, Italic, Underline } from \"lucide-react\";\n\nexport default function ToggleGroupStyleOutlineMuted() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"outline-muted\">\n      <ToggleGroupItem value=\"bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "preview/components/toggle-group-style-outlined.tsx",
    "content": "\"use client\";\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/retroui\";\nimport { Bold, Italic, Underline } from \"lucide-react\";\n\nexport default function ToggleGroupStyleOutlined() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"outlined\">\n      <ToggleGroupItem value=\"bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "preview/components/toggle-group-style-solid.tsx",
    "content": "\"use client\";\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/retroui\";\nimport { Bold, Italic, Underline } from \"lucide-react\";\n\nexport default function ToggleGroupStyleSolid() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"solid\">\n      <ToggleGroupItem value=\"bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "preview/components/toggle-style-default.tsx",
    "content": "import { Toggle } from \"@/components/retroui\";\nimport { Bold } from \"lucide-react\";\n\nexport default function ToggleStyleDefault() {\n  return (\n    <Toggle>\n      <Bold />\n    </Toggle>\n  );\n}\n"
  },
  {
    "path": "preview/components/toggle-style-outline-muted.tsx",
    "content": "import { Toggle } from \"@/components/retroui\";\nimport { Bold } from \"lucide-react\";\n\nexport default function ToggleStyleOutlineMuted() {\n  return (\n    <Toggle variant=\"outline-muted\">\n      <Bold />\n    </Toggle>\n  );\n}\n"
  },
  {
    "path": "preview/components/toggle-style-outlined.tsx",
    "content": "import { Toggle } from \"@/components/retroui\";\nimport { Bold } from \"lucide-react\";\n\nexport default function ToggleStyleOutlined() {\n  return (\n    <Toggle variant=\"outlined\">\n      <Bold />\n    </Toggle>\n  );\n}\n"
  },
  {
    "path": "preview/components/toggle-style-solid.tsx",
    "content": "import { Toggle } from \"@/components/retroui\";\nimport { Italic } from \"lucide-react\";\n\nexport default function ToggleStyleSolid() {\n  return (\n    <Toggle variant=\"solid\">\n      <Italic /> Italics\n    </Toggle>\n  );\n}\n"
  },
  {
    "path": "preview/components/tooltip-style-default.tsx",
    "content": "\"use client\";\n\nimport { Button, Tooltip } from \"@/components/retroui\";\n\nexport default function TooltipStyleDefault() {\n  return (\n    <Tooltip.Provider>\n      <Tooltip>\n        <Tooltip.Trigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </Tooltip.Trigger>\n        <Tooltip.Content variant=\"default\">Add to Library</Tooltip.Content>\n      </Tooltip>\n    </Tooltip.Provider>\n  );\n}\n"
  },
  {
    "path": "preview/components/tooltip-style-primary.tsx",
    "content": "\"use client\";\n\nimport { Button, Tooltip } from \"@/components/retroui\";\n\nexport default function TooltipStylePrimary() {\n  return (\n    <Tooltip.Provider>\n      <Tooltip>\n        <Tooltip.Trigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </Tooltip.Trigger>\n        <Tooltip.Content variant=\"primary\">Add to Library</Tooltip.Content>\n      </Tooltip>\n    </Tooltip.Provider>\n  );\n}\n"
  },
  {
    "path": "preview/components/tooltip-style-solid.tsx",
    "content": "\"use client\";\n\nimport { Button, Tooltip } from \"@/components/retroui\";\n\nexport default function TooltipStyleSolid() {\n  return (\n    <Tooltip.Provider>\n      <Tooltip>\n        <Tooltip.Trigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </Tooltip.Trigger>\n        <Tooltip.Content variant=\"solid\">Add to Library</Tooltip.Content>\n      </Tooltip>\n    </Tooltip.Provider>\n  );\n}\n"
  },
  {
    "path": "preview/components/typography-p.tsx",
    "content": "import { Text } from \"@/components/retroui/Text\";\n\nexport default function TextParagraph() {\n  return (\n    <Text className=\"font-sans text-base\">\n      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos,\n      doloremque inventore nesciunt quo sequi veniam impedit alias libero\n      dolorem tempore quia esse fugit fuga iste aliquam expedita molestias\n      iusto?\n    </Text>\n  );\n}\n"
  },
  {
    "path": "public/r/accordion-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"accordion-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"accordion-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/accordion-style-default.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Accordion } from \\\"@/components/retroui/Accordion\\\";\\n\\nexport default function AccordionStyleDefault() {\\n  return (\\n    <Accordion type=\\\"single\\\" collapsible className=\\\"space-y-4 w-full\\\">\\n      <Accordion.Item value=\\\"item-1\\\">\\n        <Accordion.Header>Accordion Item 1</Accordion.Header>\\n        <Accordion.Content>\\n          This is the content of the first accordion item.\\n        </Accordion.Content>\\n      </Accordion.Item>\\n      <Accordion.Item value=\\\"item-2\\\">\\n        <Accordion.Header>Accordion Item 2</Accordion.Header>\\n        <Accordion.Content>\\n          This is the content of the second accordion item.\\n        </Accordion.Content>\\n      </Accordion.Item>\\n      <Accordion.Item value=\\\"item-3\\\">\\n        <Accordion.Header>Accordion Item 3</Accordion.Header>\\n        <Accordion.Content>\\n          This is the content of the third accordion item.\\n        </Accordion.Content>\\n      </Accordion.Item>\\n    </Accordion>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/accordion-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/accordion.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"accordion\",\n  \"type\": \"registry:component\",\n  \"title\": \"Accordion\",\n  \"description\": \"This collapsible component let's your users read only the content they care about. 😌\",\n  \"dependencies\": [\n    \"@radix-ui/react-accordion\",\n    \"lucide-react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Accordion.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport * as AccordionPrimitive from \\\"@radix-ui/react-accordion\\\";\\nimport { ChevronDown } from \\\"lucide-react\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst Accordion = AccordionPrimitive.Root;\\n\\nconst AccordionItem = React.forwardRef<\\n  React.ElementRef<typeof AccordionPrimitive.Item>,\\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\\n>(({ className, ...props }, ref) => (\\n  <AccordionPrimitive.Item\\n    ref={ref}\\n    className={cn(\\n      \\\"border-2 bg-background rounded text-foreground shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden\\\",\\n      className,\\n    )}\\n    {...props}\\n  />\\n));\\nAccordionItem.displayName = AccordionPrimitive.Item.displayName;\\n\\nconst AccordionHeader = React.forwardRef<\\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\\n>(({ className, children, ...props }, ref) => (\\n  <AccordionPrimitive.Header className=\\\"flex\\\">\\n    <AccordionPrimitive.Trigger\\n      ref={ref}\\n      className={cn(\\n        \\\"flex flex-1 items-start justify-between px-4 py-2 font-head cursor-pointer focus:outline-hidden [&[data-state=open]>svg]:rotate-180\\\",\\n        className,\\n      )}\\n      {...props}\\n    >\\n      {children}\\n      <ChevronDown className=\\\"h-4 w-4 shrink-0 transition-transform duration-200\\\" />\\n    </AccordionPrimitive.Trigger>\\n  </AccordionPrimitive.Header>\\n));\\nAccordionHeader.displayName = AccordionPrimitive.Header.displayName;\\n\\nconst AccordionContent = React.forwardRef<\\n  React.ElementRef<typeof AccordionPrimitive.Content>,\\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\\n>(({ className, children, ...props }, ref) => (\\n  <AccordionPrimitive.Content\\n    ref={ref}\\n    className=\\\"overflow-hidden font-body bg-white text-gray-700 data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up\\\"\\n    {...props}\\n  >\\n    <div className={cn(\\\"px-4 pt-2 pb-4\\\", className)}>{children}</div>\\n  </AccordionPrimitive.Content>\\n));\\n\\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\\n\\nconst AccordionComponent = Object.assign(Accordion, {\\n  Item: AccordionItem,\\n  Header: AccordionHeader,\\n  Content: AccordionContent,\\n});\\n\\nexport { AccordionComponent as Accordion };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Accordion.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/alert-style-all-status.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"alert-style-all-status\",\n  \"type\": \"registry:block\",\n  \"title\": \"alert-style-all-status\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/alert.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/alert-style-all-status.tsx\",\n      \"content\": \"import { Alert } from \\\"@/components/retroui/Alert\\\";\\nimport { CheckCircle, InfoIcon, XIcon } from \\\"lucide-react\\\";\\n\\nexport default function AlertAllStatus() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <Alert status=\\\"success\\\" className=\\\"flex items-center\\\">\\n        <CheckCircle className=\\\"h-4 w-4 mr-4\\\" />\\n        <Alert.Title>This is a success alert!</Alert.Title>\\n      </Alert>\\n      <Alert status=\\\"info\\\" className=\\\"flex items-center\\\">\\n        <InfoIcon className=\\\"h-4 w-4 mr-4\\\" />\\n        <Alert.Title>This is an info alert!</Alert.Title>\\n      </Alert>\\n      <Alert status=\\\"error\\\" className=\\\"flex items-center\\\">\\n        <XIcon className=\\\"h-4 w-4 mr-4\\\" />\\n        <Alert.Title>This is an error alert!</Alert.Title>\\n      </Alert>\\n      <Alert status=\\\"warning\\\" className=\\\"flex items-center\\\">\\n        <InfoIcon className=\\\"h-4 w-4 mr-4\\\" />\\n        <Alert.Title>This is an error alert!</Alert.Title>\\n      </Alert>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/alert-style-all-status.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/alert-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"alert-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"alert-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/alert.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/alert-style-default.tsx\",\n      \"content\": \"import { Alert } from \\\"@/components/retroui/Alert\\\";\\n\\nexport default function AlertStyleDefault() {\\n  return (\\n    <Alert>\\n      <Alert.Title>Heads up!</Alert.Title>\\n      <Alert.Description>\\n        This is where you can write description that no one reads...\\n      </Alert.Description>\\n    </Alert>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/alert-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/alert-style-solid.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"alert-style-solid\",\n  \"type\": \"registry:block\",\n  \"title\": \"alert-style-solid\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/alert.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/alert-style-solid.tsx\",\n      \"content\": \"import { Alert } from \\\"@/components/retroui/Alert\\\";\\n\\nexport default function AlertStyleDefault() {\\n  return (\\n    <Alert variant=\\\"solid\\\">\\n      <Alert.Title>Heads up!</Alert.Title>\\n      <Alert.Description>\\n        This is where you can write description that no one reads...\\n      </Alert.Description>\\n    </Alert>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/alert-style-solid.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/alert-style-with-icon.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"alert-style-with-icon\",\n  \"type\": \"registry:block\",\n  \"title\": \"alert-style-with-icon\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/alert.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/alert-style-with-icon.tsx\",\n      \"content\": \"import { Alert } from \\\"@/components/retroui/Alert\\\";\\nimport { CheckCircle } from \\\"lucide-react\\\";\\n\\nexport default function AlertStyleDefaultIcon() {\\n  return (\\n    <Alert className=\\\"flex\\\">\\n      <CheckCircle className=\\\"h-5 w-5 mr-4 mt-2\\\" />\\n      <div>\\n        <Alert.Title>Heads up!</Alert.Title>\\n        <Alert.Description>\\n          This is where you can write description that no one reads...\\n        </Alert.Description>\\n      </div>\\n    </Alert>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/alert-style-with-icon.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/alert.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"alert\",\n  \"type\": \"registry:component\",\n  \"title\": \"Alert\",\n  \"description\": \"Notify your users about important events and updates. 📣\",\n  \"dependencies\": [\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Alert.tsx\",\n      \"content\": \"import { HtmlHTMLAttributes } from \\\"react\\\";\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\nimport { Text } from \\\"@/components/retroui/Text\\\";\\n\\nconst alertVariants = cva(\\\"relative w-full rounded border-2 p-4\\\", {\\n  variants: {\\n    variant: {\\n      default: \\\"bg-background text-foreground [&_svg]:shrink-0\\\",\\n      solid: \\\"bg-black text-white\\\",\\n    },\\n    status: {\\n      error: \\\"bg-red-300 text-red-800 border-red-800\\\",\\n      success: \\\"bg-green-300 text-green-800 border-green-800\\\",\\n      warning: \\\"bg-yellow-300 text-yellow-800 border-yellow-800\\\",\\n      info: \\\"bg-blue-300 text-blue-800 border-blue-800\\\",\\n    },\\n  },\\n  defaultVariants: {\\n    variant: \\\"default\\\",\\n  },\\n});\\n\\ninterface IAlertProps\\n  extends HtmlHTMLAttributes<HTMLDivElement>,\\n    VariantProps<typeof alertVariants> {}\\n\\nconst Alert = ({ className, variant, status, ...props }: IAlertProps) => (\\n  <div\\n    role=\\\"alert\\\"\\n    className={cn(alertVariants({ variant, status }), className)}\\n    {...props}\\n  />\\n);\\nAlert.displayName = \\\"Alert\\\";\\n\\ninterface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}\\nconst AlertTitle = ({ className, ...props }: IAlertTitleProps) => (\\n  <Text as=\\\"h5\\\" className={cn(className)} {...props} />\\n);\\nAlertTitle.displayName = \\\"AlertTitle\\\";\\n\\ninterface IAlertDescriptionProps\\n  extends HtmlHTMLAttributes<HTMLParagraphElement> {}\\nconst AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (\\n  <div className={cn(\\\"text-muted-foreground\\\", className)} {...props} />\\n);\\n\\nAlertDescription.displayName = \\\"AlertDescription\\\";\\n\\nconst AlertComponent = Object.assign(Alert, {\\n  Title: AlertTitle,\\n  Description: AlertDescription,\\n});\\n\\nexport { AlertComponent as Alert };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Alert.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/area-chart.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"area-chart\",\n  \"type\": \"registry:component\",\n  \"title\": \"Area Chart\",\n  \"description\": \"Beautiful area chart for data visualization with retro styling\",\n  \"dependencies\": [\n    \"recharts\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/charts/AreaChart.tsx\",\n      \"content\": \"\\\"use client\\\"\\n\\nimport { cn } from \\\"@/lib/utils\\\"\\nimport React from \\\"react\\\"\\nimport {\\n  Area,\\n  AreaChart as RechartsAreaChart,\\n  CartesianGrid,\\n  ResponsiveContainer,\\n  Tooltip,\\n  XAxis,\\n  YAxis,\\n} from \\\"recharts\\\"\\n\\ninterface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {\\n  data: Record<string, any>[]\\n  index: string\\n  categories: string[]\\n  strokeColors?: string[]\\n  fillColors?: string[]\\n  tooltipBgColor?: string\\n  tooltipBorderColor?: string\\n  gridColor?: string\\n  valueFormatter?: (value: number) => string\\n  showGrid?: boolean\\n  showTooltip?: boolean\\n  fill?: \\\"gradient\\\" | \\\"solid\\\"\\n  className?: string\\n}\\n\\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\\n  (\\n    {\\n      data = [],\\n      index,\\n      categories = [],\\n      strokeColors = [\\\"var(--foreground)\\\"],\\n      fillColors = [\\\"var(--primary)\\\"],\\n      tooltipBgColor = \\\"var(--background)\\\",\\n      tooltipBorderColor = \\\"var(--border)\\\",\\n      gridColor = \\\"var(--muted)\\\",\\n      valueFormatter = (value: number) => value.toString(),\\n      showGrid = true,\\n      showTooltip = true,\\n      fill = \\\"gradient\\\",\\n      className,\\n      ...props\\n    },\\n    ref\\n  ) => {\\n    const chartId = React.useId()\\n\\n    return (\\n      <div ref={ref} className={cn(\\\"h-80 w-full\\\", className)} {...props}>\\n        <ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\">\\n          <RechartsAreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>\\n            <defs>\\n              {categories.map((category, index) => {\\n                const fillColor = fillColors[index] || fillColors[0]\\n                const gradientId = `gradient-${chartId}-${category}`\\n                return (\\n                  <linearGradient key={category} id={gradientId} x1=\\\"0\\\" y1=\\\"0\\\" x2=\\\"0\\\" y2=\\\"1\\\">\\n                    {fill === \\\"gradient\\\" ? (\\n                      <>\\n                        <stop offset=\\\"5%\\\" stopColor={fillColor} stopOpacity={0.8} />\\n                        <stop offset=\\\"95%\\\" stopColor={fillColor} stopOpacity={0} />\\n                      </>\\n                    ) : (\\n                      <stop stopColor={fillColor} stopOpacity={0.6} />\\n                    )}\\n                  </linearGradient>\\n                )\\n              })}\\n            </defs>\\n            \\n            {showGrid && (\\n              <CartesianGrid strokeDasharray=\\\"3 3\\\" stroke={gridColor} />\\n            )}\\n            \\n            <XAxis \\n              dataKey={index}\\n              axisLine={false}\\n              tickLine={false}\\n              className=\\\"text-xs fill-muted-foreground\\\"\\n            />\\n            \\n            <YAxis\\n              axisLine={false}\\n              tickLine={false}\\n              className=\\\"text-xs fill-muted-foreground\\\"\\n              tickFormatter={valueFormatter}\\n            />\\n            \\n            {showTooltip && (\\n              <Tooltip\\n                content={({ active, payload, label }) => {\\n                  if (!active || !payload?.length) return null\\n                  \\n                  return (\\n                    <div \\n                      className=\\\"border p-2 shadow\\\"\\n                      style={{ \\n                        backgroundColor: tooltipBgColor,\\n                        borderColor: tooltipBorderColor \\n                      }}\\n                    >\\n                      <div className=\\\"grid grid-cols-2 gap-2\\\">\\n                        <div className=\\\"flex flex-col\\\">\\n                          <span className=\\\"text-[0.70rem] uppercase text-muted-foreground\\\">\\n                            {index}\\n                          </span>\\n                          <span className=\\\"font-bold text-muted-foreground\\\">\\n                            {label}\\n                          </span>\\n                        </div>\\n                        {payload.map((entry, index) => (\\n                          <div key={index} className=\\\"flex flex-col\\\">\\n                            <span className=\\\"text-[0.70rem] uppercase text-muted-foreground\\\">\\n                              {entry.dataKey}\\n                            </span>\\n                            <span className=\\\"font-bold\\\" style={{ color: strokeColors[0] }}>\\n                              {valueFormatter(entry.value as number)}\\n                            </span>\\n                          </div>\\n                        ))}\\n                      </div>\\n                    </div>\\n                  )\\n                }}\\n              />\\n            )}\\n            \\n            {categories.map((category, index) => {\\n              const strokeColor = strokeColors[index] || strokeColors[0]\\n              const gradientId = `gradient-${chartId}-${category}`\\n              \\n              return (\\n                <Area\\n                  key={category}\\n                  dataKey={category}\\n                  stroke={strokeColor}\\n                  fill={`url(#${gradientId})`}\\n                  strokeWidth={2}\\n                />\\n              )\\n            })}\\n          </RechartsAreaChart>\\n        </ResponsiveContainer>\\n      </div>\\n    )\\n  }\\n)\\n\\nAreaChart.displayName = \\\"AreaChart\\\"\\n\\nexport { AreaChart, type AreaChartProps }\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/charts/AreaChart.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/avatar-style-circle-sizes.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"avatar-style-circle-sizes\",\n  \"type\": \"registry:block\",\n  \"title\": \"avatar-style-circle-sizes\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/avatar-style-circle-sizes.tsx\",\n      \"content\": \"import { Avatar } from \\\"@/components/retroui/Avatar\\\";\\n\\nexport default function AvatarStyleCircleSizes() {\\n  return (\\n    <div className=\\\"flex items-center space-x-4\\\">\\n      <Avatar>\\n        <Avatar.Image src=\\\"/images/avatar.jpeg\\\" alt=\\\"Arif Logs\\\" />\\n        <Avatar.Fallback>AH</Avatar.Fallback>\\n      </Avatar>\\n      <Avatar className=\\\"h-16 w-16\\\">\\n        <Avatar.Image src=\\\"/images/avatar.jpeg\\\" alt=\\\"Arif Logs\\\" />\\n        <Avatar.Fallback>AH</Avatar.Fallback>\\n      </Avatar>\\n      <Avatar className=\\\"h-20 w-20\\\">\\n        <Avatar.Image src=\\\"/images/avatar.jpeg\\\" alt=\\\"Arif Logs\\\" />\\n        <Avatar.Fallback>AH</Avatar.Fallback>\\n      </Avatar>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/avatar-style-circle-sizes.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/avatar-style-circle.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"avatar-style-circle\",\n  \"type\": \"registry:block\",\n  \"title\": \"avatar-style-circle\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/avatar-style-circle.tsx\",\n      \"content\": \"import { Avatar } from \\\"@/components/retroui/Avatar\\\";\\n\\nexport default function AvatarStyleCircle() {\\n  return (\\n    <Avatar>\\n      <Avatar.Image src=\\\"/images/avatar.jpeg\\\" alt=\\\"Arif Logs\\\" />\\n      <Avatar.Fallback>AH</Avatar.Fallback>\\n    </Avatar>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/avatar-style-circle.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/avatar-style-fallbacks.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"avatar-style-fallbacks\",\n  \"type\": \"registry:block\",\n  \"title\": \"avatar-style-fallbacks\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/avatar-style-circle-fallbacks.tsx\",\n      \"content\": \"import { Avatar } from \\\"@/components/retroui/Avatar\\\";\\n\\nexport default function AvatarStyleFallback() {\\n  return (\\n    <Avatar>\\n      <Avatar.Image src=\\\"broken-link\\\" alt=\\\"Arif Logs\\\" />\\n      <Avatar.Fallback>AH</Avatar.Fallback>\\n    </Avatar>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/avatar-style-circle-fallbacks.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/avatar.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"avatar\",\n  \"type\": \"registry:component\",\n  \"title\": \"Avatar\",\n  \"description\": \"Default rounded avatar that can show your users profile picture. ✨\",\n  \"dependencies\": [\n    \"@radix-ui/react-avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Avatar.tsx\",\n      \"content\": \"import * as React from \\\"react\\\";\\nimport * as AvatarPrimitive from \\\"@radix-ui/react-avatar\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst Avatar = React.forwardRef<\\n  React.ElementRef<typeof AvatarPrimitive.Root>,\\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\\n>(({ className, ...props }, ref) => (\\n  <AvatarPrimitive.Root\\n    ref={ref}\\n    className={cn(\\n      \\\"relative flex h-14 w-14 border-2 rounded-full overflow-hidden\\\",\\n      className,\\n    )}\\n    {...props}\\n  />\\n));\\nAvatar.displayName = \\\"Avatar\\\";\\n\\nconst AvatarImage = React.forwardRef<\\n  React.ElementRef<typeof AvatarPrimitive.Image>,\\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\\n>(({ className, ...props }, ref) => (\\n  <AvatarPrimitive.Image\\n    ref={ref}\\n    className={cn(\\\"aspect-square h-full w-full\\\", className)}\\n    {...props}\\n  />\\n));\\nAvatarImage.displayName = \\\"Avatar.Image\\\";\\n\\nconst AvatarFallback = React.forwardRef<\\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\\n>(({ className, ...props }, ref) => (\\n  <AvatarPrimitive.Fallback\\n    ref={ref}\\n    className={cn(\\n      \\\"flex h-full w-full items-center justify-center rounded-full bg-muted bg-primary\\\",\\n      className,\\n    )}\\n    {...props}\\n  />\\n));\\nAvatarFallback.displayName = \\\"Avatar.Fallback\\\";\\n\\nconst AvatarComponent = Object.assign(Avatar, {\\n  Image: AvatarImage,\\n  Fallback: AvatarFallback,\\n});\\n\\nexport { AvatarComponent as Avatar };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Avatar.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/badge-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"badge-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"badge-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/badge-style-rounded.tsx\",\n      \"content\": \"import { Badge } from \\\"@/components/retroui/Badge\\\";\\n\\nexport default function BadgeStyleRounded() {\\n  return (\\n    <div className=\\\"space-x-4\\\">\\n      <Badge variant=\\\"solid\\\" className=\\\"rounded-sm\\\">\\n        Rounded\\n      </Badge>\\n      <Badge variant=\\\"solid\\\" className=\\\"rounded-full\\\">\\n        Full\\n      </Badge>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/badge-style-rounded.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/badge-style-sizes.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"badge-style-sizes\",\n  \"type\": \"registry:block\",\n  \"title\": \"badge-style-sizes\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/badge-style-sizes.tsx\",\n      \"content\": \"import { Badge } from \\\"@/components/retroui/Badge\\\";\\n\\nexport default function BadgeStyleVariants() {\\n  return (\\n    <div className=\\\"space-x-4\\\">\\n      <Badge size=\\\"sm\\\">small</Badge>\\n      <Badge>medium</Badge>\\n      <Badge size=\\\"lg\\\">large</Badge>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/badge-style-sizes.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/badge-style-variants.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"badge-style-variants\",\n  \"type\": \"registry:block\",\n  \"title\": \"badge-style-variants\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/badge-style-variants.tsx\",\n      \"content\": \"import { Badge } from \\\"@/components/retroui/Badge\\\";\\n\\nexport default function BadgeStyleVariants() {\\n  return (\\n    <div className=\\\"flex flex-wrap gap-4\\\">\\n      <Badge>Default</Badge>\\n      <Badge variant=\\\"outline\\\">Outlined</Badge>\\n      <Badge variant=\\\"solid\\\">Solid</Badge>\\n      <Badge variant=\\\"surface\\\">Surface</Badge>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/badge-style-variants.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/badge.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"badge\",\n  \"type\": \"registry:component\",\n  \"title\": \"Badge\",\n  \"description\": \"The component that looks like a button but isn't clickable!\",\n  \"dependencies\": [\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Badge.tsx\",\n      \"content\": \"import { cn } from \\\"@/lib/utils\\\";\\nimport { cva, VariantProps } from \\\"class-variance-authority\\\";\\nimport React, { HTMLAttributes } from \\\"react\\\";\\n\\nconst badgeVariants = cva(\\\"font-semibold rounded\\\", {\\n  variants: {\\n    variant: {\\n      default: \\\"bg-muted text-muted-foreground\\\",\\n      outline: \\\"outline-2 outline-foreground text-foreground\\\",\\n      solid: \\\"bg-foreground text-background\\\",\\n      surface: \\\"outline-2 bg-primary text-primary-foreground\\\",\\n    },\\n    size: {\\n      sm: \\\"px-2 py-1 text-xs\\\",\\n      md: \\\"px-2.5 py-1.5 text-sm\\\",\\n      lg: \\\"px-3 py-2 text-base\\\",\\n    },\\n  },\\n  defaultVariants: {\\n    variant: \\\"default\\\",\\n    size: \\\"md\\\",\\n  },\\n});\\n\\ninterface ButtonProps\\n  extends HTMLAttributes<HTMLSpanElement>,\\n    VariantProps<typeof badgeVariants> {}\\n\\nexport function Badge({\\n  children,\\n  size = \\\"md\\\",\\n  variant = \\\"default\\\",\\n  className = \\\"\\\",\\n  ...props\\n}: ButtonProps) {\\n  return (\\n    <span\\n      className={cn(badgeVariants({ variant, size }), className)}\\n      {...props}\\n    >\\n      {children}\\n    </span>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Badge.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/bar-chart.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"bar-chart\",\n  \"type\": \"registry:component\",\n  \"title\": \"Bar Chart\",\n  \"description\": \"Beautiful bar chart for data visualization with retro styling\",\n  \"dependencies\": [\n    \"recharts\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/charts/BarChart.tsx\",\n      \"content\": \"\\\"use client\\\"\\n\\nimport { cn } from \\\"@/lib/utils\\\"\\nimport React from \\\"react\\\"\\nimport {\\n  Bar,\\n  BarChart as RechartsBarChart,\\n  CartesianGrid,\\n  ResponsiveContainer,\\n  Tooltip,\\n  XAxis,\\n  YAxis,\\n} from \\\"recharts\\\"\\n\\ninterface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {\\n  data: Record<string, any>[]\\n  index: string\\n  categories: string[]\\n  strokeColors?: string[]\\n  fillColors?: string[]\\n  tooltipBgColor?: string\\n  tooltipBorderColor?: string\\n  gridColor?: string\\n  valueFormatter?: (value: number) => string\\n  showGrid?: boolean\\n  showTooltip?: boolean\\n  stacked?: boolean\\n  alignment?: \\\"vertical\\\" | \\\"horizontal\\\"\\n  className?: string\\n}\\n\\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\\n  (\\n    {\\n      data = [],\\n      index,\\n      categories = [],\\n      strokeColors = [\\\"var(--foreground)\\\"],\\n      fillColors = [\\\"var(--primary)\\\", \\\"var(--secondary)\\\"],\\n      tooltipBgColor = \\\"var(--background)\\\",\\n      tooltipBorderColor = \\\"var(--border)\\\",\\n      gridColor = \\\"var(--muted)\\\",\\n      valueFormatter = (value: number) => value.toString(),\\n      showGrid = true,\\n      showTooltip = true,\\n      stacked = false,\\n      alignment = \\\"vertical\\\",\\n      className,\\n      ...props\\n    },\\n    ref\\n  ) => {\\n    return (\\n      <div ref={ref} className={cn(\\\"h-80 w-full\\\", className)} {...props}>\\n        <ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\">\\n          <RechartsBarChart\\n            data={data}\\n            layout={alignment === \\\"horizontal\\\" ? \\\"vertical\\\" : undefined}\\n            margin={{ top: 10, right: 30, left: 0, bottom: 0 }}\\n          >\\n            {showGrid && (\\n              <CartesianGrid strokeDasharray=\\\"3 3\\\" stroke={gridColor} />\\n            )}\\n\\n            {alignment === \\\"horizontal\\\" ? (\\n              <>\\n                <XAxis\\n                  type=\\\"number\\\"\\n                  axisLine={false}\\n                  tickLine={false}\\n                  className=\\\"text-xs fill-muted-foreground\\\"\\n                  tickFormatter={valueFormatter}\\n                />\\n\\n                <YAxis\\n                  type=\\\"category\\\"\\n                  dataKey={index}\\n                  axisLine={false}\\n                  tickLine={false}\\n                  className=\\\"text-xs fill-muted-foreground\\\"\\n                  width={80}\\n                />\\n              </>\\n            ) : (\\n              <>\\n                <XAxis\\n                  dataKey={index}\\n                  axisLine={false}\\n                  tickLine={false}\\n                  className=\\\"text-xs fill-muted-foreground\\\"\\n                />\\n\\n                <YAxis\\n                  axisLine={false}\\n                  tickLine={false}\\n                  className=\\\"text-xs fill-muted-foreground\\\"\\n                  tickFormatter={valueFormatter}\\n                />\\n              </>\\n            )}\\n\\n            {showTooltip && (\\n              <Tooltip\\n                content={({ active, payload, label }) => {\\n                  if (!active || !payload?.length) return null\\n\\n                  return (\\n                    <div\\n                      className=\\\"border p-2 shadow\\\"\\n                      style={{\\n                        backgroundColor: tooltipBgColor,\\n                        borderColor: tooltipBorderColor\\n                      }}\\n                    >\\n                      <div className=\\\"grid grid-cols-2 gap-2\\\">\\n                        <div className=\\\"flex flex-col\\\">\\n                          <span className=\\\"text-[0.70rem] uppercase text-muted-foreground\\\">\\n                            {index}\\n                          </span>\\n                          <span className=\\\"font-bold text-muted-foreground\\\">\\n                            {label}\\n                          </span>\\n                        </div>\\n                        {payload.map((entry, index) => (\\n                          <div key={index} className=\\\"flex flex-col\\\">\\n                            <span className=\\\"text-[0.70rem] uppercase text-muted-foreground\\\">\\n                              {entry.dataKey}\\n                            </span>\\n                            <span className=\\\"font-bold\\\" style={{ color: strokeColors[0] }}>\\n                              {valueFormatter(entry.value as number)}\\n                            </span>\\n                          </div>\\n                        ))}\\n                      </div>\\n                    </div>\\n                  )\\n                }}\\n              />\\n            )}\\n\\n            {categories.map((category, index) => {\\n              const fillColor = fillColors[index] || fillColors[0]\\n              const strokeColor = strokeColors[index] || strokeColors[0]\\n\\n              return (\\n                <Bar\\n                  key={category}\\n                  dataKey={category}\\n                  fill={fillColor}\\n                  stroke={strokeColor}\\n                  strokeWidth={1}\\n                  stackId={stacked ? \\\"strokeId\\\" : undefined} />\\n              )\\n            })}\\n          </RechartsBarChart>\\n        </ResponsiveContainer>\\n      </div>\\n    )\\n  }\\n)\\n\\nBarChart.displayName = \\\"BarChart\\\"\\n\\nexport { BarChart, type BarChartProps }\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/charts/BarChart.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/breadcrumb.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"breadcrumb\",\n  \"type\": \"registry:component\",\n  \"title\": \"Breadcrumb\",\n  \"dependencies\": [\n    \"@radix-ui/react-slot\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Breadcrumb.tsx\",\n      \"content\": \"import * as React from \\\"react\\\"\\nimport { Slot } from \\\"@radix-ui/react-slot\\\"\\nimport { ChevronRight, MoreHorizontal } from \\\"lucide-react\\\"\\nimport { cn } from \\\"@/lib/utils\\\"\\n\\nconst BreadcrumbRoot = React.forwardRef<\\n  HTMLElement,\\n  React.ComponentPropsWithoutRef<\\\"nav\\\">\\n>(({ className, ...props }, ref) => (\\n  <nav\\n    ref={ref}\\n    aria-label=\\\"breadcrumb\\\"\\n    className={cn(\\\"w-full text-sm\\\", className)}\\n    {...props}\\n  />\\n))\\nBreadcrumbRoot.displayName = \\\"Breadcrumb\\\"\\n\\nconst BreadcrumbList = React.forwardRef<\\n  HTMLOListElement,\\n  React.ComponentPropsWithoutRef<\\\"ol\\\">\\n>(({ className, ...props }, ref) => (\\n  <ol\\n    ref={ref}\\n    className={cn(\\n      \\\"flex flex-wrap items-center gap-1.5 sm:gap-2.5 text-muted-foreground\\\",\\n      className\\n    )}\\n    {...props}\\n  />\\n))\\nBreadcrumbList.displayName = \\\"BreadcrumbList\\\"\\n\\nconst BreadcrumbItem = React.forwardRef<\\n  HTMLLIElement,\\n  React.ComponentPropsWithoutRef<\\\"li\\\">\\n>(({ className, ...props }, ref) => (\\n  <li ref={ref} className={cn(\\\"inline-flex items-center\\\", className)} {...props} />\\n))\\nBreadcrumbItem.displayName = \\\"BreadcrumbItem\\\"\\n\\nconst BreadcrumbLink = React.forwardRef<\\n  HTMLAnchorElement,\\n  React.ComponentPropsWithoutRef<\\\"a\\\"> & { asChild?: boolean }\\n>(({ asChild, className, ...props }, ref) => {\\n  const Comp = asChild ? Slot : \\\"a\\\"\\n  return (\\n    <Comp\\n      ref={ref}\\n      className={cn(\\n        \\\"font-medium transition-colors hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring rounded-sm\\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  )\\n})\\nBreadcrumbLink.displayName = \\\"BreadcrumbLink\\\"\\n\\nconst BreadcrumbPage = React.forwardRef<\\n  HTMLSpanElement,\\n  React.ComponentPropsWithoutRef<\\\"span\\\">\\n>(({ className, ...props }, ref) => (\\n  <span\\n    ref={ref}\\n    aria-current=\\\"page\\\"\\n    className={cn(\\\"text-foreground font-semibold\\\", className)}\\n    {...props}\\n  />\\n))\\nBreadcrumbPage.displayName = \\\"BreadcrumbPage\\\"\\n\\nconst BreadcrumbSeparator = ({\\n  children,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"li\\\">) => (\\n  <li\\n    role=\\\"presentation\\\"\\n    aria-hidden=\\\"true\\\"\\n    className={cn(\\\"text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\\\", className)}\\n    {...props}\\n  >\\n    {children ?? <ChevronRight />}\\n  </li>\\n)\\nBreadcrumbSeparator.displayName = \\\"BreadcrumbSeparator\\\"\\n\\nconst BreadcrumbEllipsis = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\">) => (\\n  <span\\n    role=\\\"presentation\\\"\\n    className={cn(\\\"flex h-9 w-9 items-center justify-center\\\", className)}\\n    {...props}\\n  >\\n    <MoreHorizontal className=\\\"h-4 w-4\\\" />\\n    <span className=\\\"sr-only\\\">More</span>\\n  </span>\\n)\\nBreadcrumbEllipsis.displayName = \\\"BreadcrumbEllipsis\\\"\\n\\nconst Breadcrumb = Object.assign(BreadcrumbRoot, {\\n  List: BreadcrumbList,\\n  Item: BreadcrumbItem,\\n  Link: BreadcrumbLink,\\n  Page: BreadcrumbPage,\\n  Separator: BreadcrumbSeparator,\\n  Ellipsis: BreadcrumbEllipsis,\\n})\\n\\nexport { Breadcrumb }\\n\\n\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Breadcrumb.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/button-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"button-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"button-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/button-style-default.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\n\\nexport default function ButtonStyleDefault() {\\n  return <Button>Click Me!</Button>;\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/button-style-default.tsx\"\n    }\n  ],\n  \"cssVars\": {\n    \"light\": {\n      \"primary\": \"60 100% 60%\",\n      \"primary-foreground\": \"0 0% 0%\"\n    },\n    \"dark\": {\n      \"primary\": \"60 100% 50%\",\n      \"primary-foreground\": \"0 0% 0%\"\n    }\n  }\n}"
  },
  {
    "path": "public/r/button-style-link.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"button-style-link\",\n  \"type\": \"registry:block\",\n  \"title\": \"button-style-link\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/button-style-link.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\n\\nexport default function ButtonStyleLink() {\\n  return <Button variant=\\\"link\\\">Click Me!</Button>;\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/button-style-link.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/button-style-outline.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"button-style-outline\",\n  \"type\": \"registry:block\",\n  \"title\": \"button-style-outline\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/button-style-outline.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\n\\nexport default function ButtonStyleOutline() {\\n  return <Button variant=\\\"outline\\\">Click Me!</Button>;\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/button-style-outline.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/button-style-secondary.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"button-style-secondary\",\n  \"type\": \"registry:block\",\n  \"title\": \"button-style-secondary\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/button-style-secondary.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\n\\nexport default function ButtonStyleSecondary() {\\n  return <Button variant=\\\"secondary\\\">Click Me!</Button>;\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/button-style-secondary.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/button-style-with-icon.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"button-style-with-icon\",\n  \"type\": \"registry:block\",\n  \"title\": \"button-style-with-icon\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/button-style-with-icon.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\nimport { Trash } from \\\"lucide-react\\\";\\n\\nexport default function ButtonStyleWithIcon() {\\n  return (\\n    <Button className=\\\"bg-destructive text-white hover:bg-destructive/90\\\">\\n      <Trash className=\\\"h-4 w-4 mr-2\\\" /> Delete\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/button-style-with-icon.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/button.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"button\",\n  \"type\": \"registry:component\",\n  \"title\": \"Retro Button\",\n  \"description\": \"This bold button makes sure your users click on it and perform the actions you want!\",\n  \"dependencies\": [\n    \"class-variance-authority\",\n    \"@radix-ui/react-slot\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Button.tsx\",\n      \"content\": \"import { cn } from \\\"@/lib/utils\\\";\\nimport { cva, VariantProps } from \\\"class-variance-authority\\\";\\nimport React, { ButtonHTMLAttributes } from \\\"react\\\";\\nimport { Slot } from \\\"@radix-ui/react-slot\\\";\\n\\nexport const buttonVariants = cva(\\n  \\\"font-head transition-all rounded outline-hidden cursor-pointer duration-200 font-medium flex items-center\\\",\\n  {\\n    variants: {\\n      variant: {\\n        default:\\n          \\\"shadow-md hover:shadow active:shadow-none bg-primary text-primary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-primary-hover\\\",\\n        secondary:\\n          \\\"shadow-md hover:shadow active:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-secondary-hover\\\",\\n        outline:\\n          \\\"shadow-md hover:shadow active:shadow-none bg-transparent border-2 transition hover:translate-y-1 active:translate-y-2 active:translate-x-1\\\",\\n        link: \\\"bg-transparent hover:underline\\\",\\n        ghost: \\\"bg-transparent hover:bg-accent\\\"\\n      },\\n      size: {\\n        sm: \\\"px-3 py-1 text-sm shadow hover:shadow-none\\\",\\n        md: \\\"px-4 py-1.5 text-base\\\",\\n        lg: \\\"px-6 lg:px-8 py-2 lg:py-3 text-md lg:text-lg\\\",\\n        icon: \\\"p-2\\\",\\n      },\\n    },\\n    defaultVariants: {\\n      size: \\\"md\\\",\\n      variant: \\\"default\\\",\\n    },\\n  },\\n);\\n\\nexport interface IButtonProps\\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\\n    VariantProps<typeof buttonVariants> {\\n  asChild?: boolean;\\n}\\n\\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\\n  (\\n    {\\n      children,\\n      size = \\\"md\\\",\\n      className = \\\"\\\",\\n      variant = \\\"default\\\",\\n      asChild = false,\\n      ...props\\n    }: IButtonProps,\\n    forwardedRef,\\n  ) => {\\n    const Comp = asChild ? Slot : \\\"button\\\";\\n    return (\\n      <Comp\\n        ref={forwardedRef}\\n        className={cn(buttonVariants({ variant, size }), className)}\\n        {...props}\\n      >\\n        {children}\\n      </Comp>\\n    );\\n  },\\n);\\n\\nButton.displayName = \\\"Button\\\";\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Button.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/calendar.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"calendar\",\n  \"type\": \"registry:component\",\n  \"title\": \"Calendar\",\n  \"description\": \"A customizable calendar component for showing dates. 📝\",\n  \"dependencies\": [\n    \"react-day-picker\",\n    \"lucide-react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Calendar.tsx\",\n      \"content\": \"\\\"use client\\\"\\n\\nimport * as React from \\\"react\\\"\\nimport {\\n  ChevronDownIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n} from \\\"lucide-react\\\"\\nimport { DayButton, DayPicker, getDefaultClassNames } from \\\"react-day-picker\\\"\\n\\nimport { cn } from \\\"@/lib/utils\\\"\\nimport { Button, buttonVariants } from \\\"@/components/retroui/Button\\\"\\n\\nfunction Calendar({\\n  className,\\n  classNames,\\n  showOutsideDays = true,\\n  captionLayout = \\\"label\\\",\\n  buttonVariant = \\\"ghost\\\",\\n  formatters,\\n  components,\\n  ...props\\n}: React.ComponentProps<typeof DayPicker> & {\\n  buttonVariant?: React.ComponentProps<typeof Button>[\\\"variant\\\"]\\n}) {\\n  const defaultClassNames = getDefaultClassNames()\\n\\n  return (\\n    <DayPicker\\n      showOutsideDays={showOutsideDays}\\n      className={cn(\\n        \\\"bg-background w-full outline-2 shadow-md group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\\\",\\n        String.raw`rtl:**:[.rdp-button\\\\_next>svg]:rotate-180`,\\n        String.raw`rtl:**:[.rdp-button\\\\_previous>svg]:rotate-180`,\\n        className\\n      )}\\n      captionLayout={captionLayout}\\n      formatters={{\\n        formatMonthDropdown: (date) =>\\n          date.toLocaleString(\\\"default\\\", { month: \\\"short\\\" }),\\n        ...formatters,\\n      }}\\n      classNames={{\\n        root: cn(\\\"w-fit\\\", defaultClassNames.root),\\n        months: cn(\\n          \\\"flex gap-4 flex-col md:flex-row relative\\\",\\n          defaultClassNames.months\\n        ),\\n        month: cn(\\\"flex flex-col w-full gap-4 font-head\\\", defaultClassNames.month),\\n        nav: cn(\\n          \\\"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\\\",\\n          defaultClassNames.nav\\n        ),\\n        button_previous: cn(\\n          buttonVariants({ variant: buttonVariant }),\\n          \\\"size-8 p-2 border-2 rounded select-none\\\",\\n          defaultClassNames.button_previous\\n        ),\\n        button_next: cn(\\n          buttonVariants({ variant: buttonVariant }),\\n          \\\"size-8 p-2 border-2 rounded select-none\\\",\\n          defaultClassNames.button_next\\n        ),\\n        month_caption: cn(\\n          \\\"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\\\",\\n          defaultClassNames.month_caption\\n        ),\\n        dropdowns: cn(\\n          \\\"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\\\",\\n          defaultClassNames.dropdowns\\n        ),\\n        dropdown_root: cn(\\n          \\\"relative has-focus:outline-ring outline outline-input has-focus:ring-ring/50 has-focus:ring-[3px] rounded\\\",\\n          defaultClassNames.dropdown_root\\n        ),\\n        dropdown: cn(\\n          \\\"absolute bg-popover inset-0 opacity-0\\\",\\n          defaultClassNames.dropdown\\n        ),\\n        caption_label: cn(\\n          \\\"select-none font-medium\\\",\\n          captionLayout === \\\"label\\\"\\n            ? \\\"text-base\\\"\\n            : \\\"rounded-none pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\\\",\\n          defaultClassNames.caption_label\\n        ),\\n        table: \\\"w-full outline-collapse\\\",\\n        weekdays: cn(\\\"flex\\\", defaultClassNames.weekdays),\\n        weekday: cn(\\n          \\\"flex-1 font-normal text-sm select-none\\\",\\n          defaultClassNames.weekday\\n        ),\\n        week: cn(\\\"flex w-full mt-2\\\", defaultClassNames.week),\\n        week_number_header: cn(\\n          \\\"select-none w-(--cell-size)\\\",\\n          defaultClassNames.week_number_header\\n        ),\\n        week_number: cn(\\n          \\\"text-[0.8rem] select-none text-muted-foreground\\\",\\n          defaultClassNames.week_number\\n        ),\\n        day: cn(\\n          \\\"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r group/day aspect-square select-none\\\",\\n          props.showWeekNumber\\n            ? \\\"[&:nth-child(2)[data-selected=true]_button]:rounded-l\\\"\\n            : \\\"[&:first-child[data-selected=true]_button]:rounded-l\\\",\\n          defaultClassNames.day\\n        ),\\n        today: cn(\\n          \\\"bg-accent text-accent-foreground rounded data-[selected=true]:rounded-none\\\",\\n          defaultClassNames.today\\n        ),\\n        outside: cn(\\n          \\\"text-muted-foreground aria-selected:text-muted-foreground opacity-80\\\",\\n          defaultClassNames.outside\\n        ),\\n        disabled: cn(\\n          \\\"text-muted-foreground opacity-50\\\",\\n          defaultClassNames.disabled\\n        ),\\n        hidden: cn(\\\"invisible\\\", defaultClassNames.hidden),\\n        ...classNames,\\n      }}\\n      components={{\\n        Root: ({ className, rootRef, ...props }) => {\\n          return (\\n            <div\\n              data-slot=\\\"calendar\\\"\\n              ref={rootRef}\\n              className={cn(className)}\\n              {...props}\\n            />\\n          )\\n        },\\n        Chevron: ({ className, orientation, ...props }) => {\\n          if (orientation === \\\"left\\\") {\\n            return (\\n              <ChevronLeftIcon className={cn(\\\"size-4\\\", className)} {...props} />\\n            )\\n          }\\n\\n          if (orientation === \\\"right\\\") {\\n            return (\\n              <ChevronRightIcon\\n                className={cn(\\\"size-4\\\", className)}\\n                {...props}\\n              />\\n            )\\n          }\\n\\n          return (\\n            <ChevronDownIcon className={cn(\\\"size-4\\\", className)} {...props} />\\n          )\\n        },\\n        DayButton: CalendarDayButton,\\n        WeekNumber: ({ children, ...props }) => {\\n          return (\\n            <td {...props}>\\n              <div className=\\\"flex size-(--cell-size) items-center justify-center text-center\\\">\\n                {children}\\n              </div>\\n            </td>\\n          )\\n        },\\n        ...components,\\n      }}\\n      {...props}\\n    />\\n  )\\n}\\n\\nfunction CalendarDayButton({\\n  className,\\n  day,\\n  modifiers,\\n  ...props\\n}: React.ComponentProps<typeof DayButton>) {\\n  const defaultClassNames = getDefaultClassNames()\\n\\n  const ref = React.useRef<HTMLButtonElement>(null)\\n  React.useEffect(() => {\\n    if (modifiers.focused) ref.current?.focus()\\n  }, [modifiers.focused])\\n\\n  return (\\n    <Button\\n      ref={ref}\\n      variant=\\\"ghost\\\"\\n      size=\\\"icon\\\"\\n      data-day={day.date.toLocaleDateString()}\\n      data-selected-single={\\n        modifiers.selected &&\\n        !modifiers.range_start &&\\n        !modifiers.range_end &&\\n        !modifiers.range_middle\\n      }\\n      data-range-start={modifiers.range_start}\\n      data-range-end={modifiers.range_end}\\n      data-range-middle={modifiers.range_middle}\\n      className={cn(\\n        \\\"font-sans flex justify-center items-center data-[selected-single=true]:shadow-md data-[selected-single=true]:outline-2 outline-border data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-secondary data-[range-middle=true]:hover:text-secondary-foreground data-[range-middle=true]:text-secondary-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring-1 group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[2px] data-[range-end=true]:rounded-none data-[range-end=true]:rounded-none data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-none [&>span]:text-xs\\\",\\n        defaultClassNames.day,\\n        className\\n      )}\\n      {...props}\\n    />\\n  )\\n}\\n\\nexport { Calendar, CalendarDayButton }\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Calendar.tsx\"\n    },\n    {\n      \"path\": \"components/retroui/Button.tsx\",\n      \"content\": \"import { cn } from \\\"@/lib/utils\\\";\\nimport { cva, VariantProps } from \\\"class-variance-authority\\\";\\nimport React, { ButtonHTMLAttributes } from \\\"react\\\";\\nimport { Slot } from \\\"@radix-ui/react-slot\\\";\\n\\nexport const buttonVariants = cva(\\n  \\\"font-head transition-all rounded outline-hidden cursor-pointer duration-200 font-medium flex items-center\\\",\\n  {\\n    variants: {\\n      variant: {\\n        default:\\n          \\\"shadow-md hover:shadow active:shadow-none bg-primary text-primary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-primary-hover\\\",\\n        secondary:\\n          \\\"shadow-md hover:shadow active:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-secondary-hover\\\",\\n        outline:\\n          \\\"shadow-md hover:shadow active:shadow-none bg-transparent border-2 transition hover:translate-y-1 active:translate-y-2 active:translate-x-1\\\",\\n        link: \\\"bg-transparent hover:underline\\\",\\n        ghost: \\\"bg-transparent hover:bg-accent\\\"\\n      },\\n      size: {\\n        sm: \\\"px-3 py-1 text-sm shadow hover:shadow-none\\\",\\n        md: \\\"px-4 py-1.5 text-base\\\",\\n        lg: \\\"px-6 lg:px-8 py-2 lg:py-3 text-md lg:text-lg\\\",\\n        icon: \\\"p-2\\\",\\n      },\\n    },\\n    defaultVariants: {\\n      size: \\\"md\\\",\\n      variant: \\\"default\\\",\\n    },\\n  },\\n);\\n\\nexport interface IButtonProps\\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\\n    VariantProps<typeof buttonVariants> {\\n  asChild?: boolean;\\n}\\n\\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\\n  (\\n    {\\n      children,\\n      size = \\\"md\\\",\\n      className = \\\"\\\",\\n      variant = \\\"default\\\",\\n      asChild = false,\\n      ...props\\n    }: IButtonProps,\\n    forwardedRef,\\n  ) => {\\n    const Comp = asChild ? Slot : \\\"button\\\";\\n    return (\\n      <Comp\\n        ref={forwardedRef}\\n        className={cn(buttonVariants({ variant, size }), className)}\\n        {...props}\\n      >\\n        {children}\\n      </Comp>\\n    );\\n  },\\n);\\n\\nButton.displayName = \\\"Button\\\";\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Button.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/card-style-commerce.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"card-style-commerce\",\n  \"type\": \"registry:block\",\n  \"title\": \"card-style-commerce\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/card.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/card-style-commerce.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\nimport { Card } from \\\"@/components/retroui/Card\\\";\\n\\nexport default function CommerceCard() {\\n  return (\\n    <Card className=\\\"w-[350px] shadow-none hover:shadow-none\\\">\\n      <Card.Content className=\\\"pb-0\\\">\\n        <img\\n          src=\\\"/images/gameboy.jpg\\\"\\n          className=\\\"w-full h-full\\\"\\n          alt=\\\"Gameboy\\\"\\n        />\\n      </Card.Content>\\n      <Card.Header className=\\\"pb-0\\\">\\n        <Card.Title>Classic 8-bit Gameboy</Card.Title>\\n      </Card.Header>\\n      <Card.Content className=\\\"flex justify-between items-center\\\">\\n        <p className=\\\"text-lg font-semibold\\\">$29.90</p>\\n        <Button>Add to cart</Button>\\n      </Card.Content>\\n    </Card>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/card-style-commerce.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/card-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"card-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"card-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/card.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/card-style-default.tsx\",\n      \"content\": \"import { Card } from \\\"@/components/retroui/Card\\\";\\n\\nexport default function BasicCard() {\\n  return (\\n    <Card>\\n      <Card.Header>\\n        <Card.Title>This is Card Title</Card.Title>\\n        <Card.Description>\\n          I can not find what to write here.. so imagine I wrote some good\\n          stuff.\\n        </Card.Description>\\n      </Card.Header>\\n    </Card>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/card-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/card-style-testimonial.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"card-style-testimonial\",\n  \"type\": \"registry:block\",\n  \"title\": \"card-style-testimonial\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/card.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/card-style-testimonial.tsx\",\n      \"content\": \"import { Text } from \\\"@/components/retroui/Text\\\";\\nimport { Card } from \\\"@/components/retroui/Card\\\";\\nimport { Avatar } from \\\"@/components/retroui/Avatar\\\";\\n\\nexport default function TestimonialCard() {\\n  return (\\n    <Card className=\\\"w-full max-w-[400px] shadow-none hover:shadow-md\\\">\\n      <Card.Content>\\n        <Text className=\\\"text-lg\\\">\\n          &quot; RetroUI is the cooling looking UI library out there! &quot;\\n        </Text>\\n\\n        <div className=\\\"flex items-center space-x-2 mt-6\\\">\\n          <Avatar className=\\\"h-10 w-10\\\">\\n            <Avatar.Image\\n              alt=\\\"avatar\\\"\\n              src=\\\"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80\\\"\\n            />\\n          </Avatar>\\n          <div>\\n            <div className=\\\"font-medium\\\">Leroy Jenkins</div>\\n            <div className=\\\"text-sm text-gray-500 dark:text-gray-400\\\">\\n              CEO of Uber\\n            </div>\\n          </div>\\n        </div>\\n      </Card.Content>\\n    </Card>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/card-style-testimonial.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/card.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"card\",\n  \"type\": \"registry:component\",\n  \"title\": \"Card\",\n  \"description\": \"A customizable card component to visualize your content. 📝\",\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Card.tsx\",\n      \"content\": \"import { cn } from \\\"@/lib/utils\\\";\\nimport { HTMLAttributes } from \\\"react\\\";\\nimport { Text } from \\\"@/components/retroui/Text\\\";\\n\\ninterface ICardProps extends HTMLAttributes<HTMLDivElement> {\\n  className?: string;\\n}\\n\\nconst Card = ({ className, ...props }: ICardProps) => {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"inline-block border-2 rounded shadow-md transition-all hover:shadow-none bg-card\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst CardHeader = ({ className, ...props }: ICardProps) => {\\n  return (\\n    <div\\n      className={cn(\\\"flex flex-col justify-start p-4\\\", className)}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst CardTitle = ({ className, ...props }: ICardProps) => {\\n  return <Text as=\\\"h3\\\" className={cn(\\\"mb-2\\\", className)} {...props} />;\\n};\\n\\nconst CardDescription = ({ className, ...props }: ICardProps) => (\\n  <p className={cn(\\\"text-muted-foreground\\\", className)} {...props} />\\n);\\n\\nconst CardContent = ({ className, ...props }: ICardProps) => {\\n  return <div className={cn(\\\"p-4\\\", className)} {...props} />;\\n};\\n\\nconst CardComponent = Object.assign(Card, {\\n  Header: CardHeader,\\n  Title: CardTitle,\\n  Description: CardDescription,\\n  Content: CardContent,\\n});\\n\\nexport { CardComponent as Card };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Card.tsx\"\n    },\n    {\n      \"path\": \"components/retroui/Text.tsx\",\n      \"content\": \"import { ElementType, HTMLAttributes } from \\\"react\\\";\\nimport { VariantProps, cva } from \\\"class-variance-authority\\\";\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst textVariants = cva(\\\"font-head\\\", {\\n  variants: {\\n    as: {\\n      p: \\\"font-sans text-base\\\",\\n      li: \\\"font-sans text-base\\\",\\n      a: \\\"font-sans text-base hover:underline underline-offset-2 decoration-primary\\\",\\n      h1: \\\"text-4xl lg:text-5xl font-bold\\\",\\n      h2: \\\"text-3xl lg:text-4xl font-semibold\\\",\\n      h3: \\\"text-2xl font-medium\\\",\\n      h4: \\\"text-xl font-normal\\\",\\n      h5: \\\"text-lg font-normal\\\",\\n      h6: \\\"text-base font-normal\\\",\\n    },\\n  },\\n  defaultVariants: {\\n    as: \\\"p\\\",\\n  },\\n});\\n\\ninterface TextProps\\n  extends Omit<HTMLAttributes<HTMLElement>, \\\"className\\\">,\\n    VariantProps<typeof textVariants> {\\n  className?: string;\\n}\\n\\nexport const Text = (props: TextProps) => {\\n  const { className, as, ...otherProps } = props;\\n  const Tag: ElementType = as || \\\"p\\\";\\n\\n  return (\\n    <Tag className={cn(textVariants({ as }), className)} {...otherProps} />\\n  );\\n};\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Text.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/carousel.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"carousel\",\n  \"type\": \"registry:component\",\n  \"title\": \"Carousel\",\n  \"description\": \"A customizable carousel component to show animated cards\",\n  \"dependencies\": [\n    \"embla-carousel-react\",\n    \"lucide-react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Carousel.tsx\",\n      \"content\": \"\\\"use client\\\"\\n\\nimport * as React from \\\"react\\\"\\nimport useEmblaCarousel, {\\n    type UseEmblaCarouselType,\\n} from \\\"embla-carousel-react\\\"\\nimport { ArrowLeft, ArrowRight } from \\\"lucide-react\\\"\\n\\nimport { cn } from \\\"@/lib/utils\\\"\\nimport { Button } from \\\"@/components/retroui/Button\\\"\\n\\ntype CarouselApi = UseEmblaCarouselType[1]\\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\\ntype CarouselOptions = UseCarouselParameters[0]\\ntype CarouselPlugin = UseCarouselParameters[1]\\n\\ntype CarouselProps = {\\n    opts?: CarouselOptions\\n    plugins?: CarouselPlugin\\n    orientation?: \\\"horizontal\\\" | \\\"vertical\\\"\\n    setApi?: (api: CarouselApi) => void\\n}\\n\\ntype CarouselContextProps = {\\n    carouselRef: ReturnType<typeof useEmblaCarousel>[0]\\n    api: ReturnType<typeof useEmblaCarousel>[1]\\n    scrollPrev: () => void\\n    scrollNext: () => void\\n    canScrollPrev: boolean\\n    canScrollNext: boolean\\n} & CarouselProps\\n\\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\\n\\nfunction useCarousel() {\\n    const context = React.useContext(CarouselContext)\\n\\n    if (!context) {\\n        throw new Error(\\\"useCarousel must be used within a <Carousel />\\\")\\n    }\\n\\n    return context\\n}\\n\\nfunction Carousel({\\n    orientation = \\\"horizontal\\\",\\n    opts,\\n    setApi,\\n    plugins,\\n    className,\\n    children,\\n    ...props\\n}: React.ComponentProps<\\\"div\\\"> & CarouselProps) {\\n    const [carouselRef, api] = useEmblaCarousel(\\n        {\\n            ...opts,\\n            axis: orientation === \\\"horizontal\\\" ? \\\"x\\\" : \\\"y\\\",\\n        },\\n        plugins\\n    )\\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\\n\\n    const onSelect = React.useCallback((api: CarouselApi) => {\\n        if (!api) return\\n        setCanScrollPrev(api.canScrollPrev())\\n        setCanScrollNext(api.canScrollNext())\\n    }, [])\\n\\n    const scrollPrev = React.useCallback(() => {\\n        api?.scrollPrev()\\n    }, [api])\\n\\n    const scrollNext = React.useCallback(() => {\\n        api?.scrollNext()\\n    }, [api])\\n\\n    const handleKeyDown = React.useCallback(\\n        (event: React.KeyboardEvent<HTMLDivElement>) => {\\n            if (event.key === \\\"ArrowLeft\\\") {\\n                event.preventDefault()\\n                scrollPrev()\\n            } else if (event.key === \\\"ArrowRight\\\") {\\n                event.preventDefault()\\n                scrollNext()\\n            }\\n        },\\n        [scrollPrev, scrollNext]\\n    )\\n\\n    React.useEffect(() => {\\n        if (!api || !setApi) return\\n        setApi(api)\\n    }, [api, setApi])\\n\\n    React.useEffect(() => {\\n        if (!api) return\\n        onSelect(api)\\n        api.on(\\\"reInit\\\", onSelect)\\n        api.on(\\\"select\\\", onSelect)\\n\\n        return () => {\\n            api?.off(\\\"select\\\", onSelect)\\n        }\\n    }, [api, onSelect])\\n\\n    return (\\n        <CarouselContext.Provider\\n            value={{\\n                carouselRef,\\n                api: api,\\n                opts,\\n                orientation:\\n                    orientation || (opts?.axis === \\\"y\\\" ? \\\"vertical\\\" : \\\"horizontal\\\"),\\n                scrollPrev,\\n                scrollNext,\\n                canScrollPrev,\\n                canScrollNext,\\n            }}\\n        >\\n            <div\\n                onKeyDownCapture={handleKeyDown}\\n                className={cn(\\\"relative\\\", className)}\\n                role=\\\"region\\\"\\n                aria-roledescription=\\\"carousel\\\"\\n                data-slot=\\\"carousel\\\"\\n                {...props}\\n            >\\n                {children}\\n            </div>\\n        </CarouselContext.Provider>\\n    )\\n}\\n\\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\\\"div\\\">) {\\n    const { carouselRef, orientation } = useCarousel()\\n\\n    return (\\n        <div\\n            ref={carouselRef}\\n            className=\\\"overflow-hidden\\\"\\n            data-slot=\\\"carousel-content\\\"\\n        >\\n            <div\\n                className={cn(\\n                    \\\"flex\\\",\\n                    orientation === \\\"horizontal\\\" ? \\\"-ml-4\\\" : \\\"-mt-4 flex-col\\\",\\n                    className\\n                )}\\n                {...props}\\n            />\\n        </div>\\n    )\\n}\\n\\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\\\"div\\\">) {\\n    const { orientation } = useCarousel()\\n\\n    return (\\n        <div\\n            role=\\\"group\\\"\\n            aria-roledescription=\\\"slide\\\"\\n            data-slot=\\\"carousel-item\\\"\\n            className={cn(\\n                \\\"min-w-0 shrink-0 grow-0 basis-full\\\",\\n                orientation === \\\"horizontal\\\" ? \\\"pl-4\\\" : \\\"pt-4\\\",\\n                className\\n            )}\\n            {...props}\\n        />\\n    )\\n}\\n\\nfunction CarouselPrevious({\\n    className,\\n    variant = \\\"outline\\\",\\n    size = \\\"icon\\\",\\n    ...props\\n}: React.ComponentProps<typeof Button>) {\\n    const { orientation, scrollPrev, canScrollPrev } = useCarousel()\\n\\n    return (\\n        <Button\\n            data-slot=\\\"carousel-previous\\\"\\n            variant={variant}\\n            size={size}\\n            className={cn(\\n                \\\"absolute size-8 rounded\\\",\\n                orientation === \\\"horizontal\\\"\\n                    ? \\\"top-1/2 -left-12 -translate-y-1/2 hover:-translate-y-[calc(50%-2px)] active:-translate-y-[calc(50%-4px)]\\\"\\n                    : \\\"-top-12 left-1/2 -translate-x-1/2 rotate-90 hover:-translate-x-[calc(50%-2px)] active:-translate-x-[calc(50%-4px)]\\\",\\n                className\\n            )}\\n            disabled={!canScrollPrev}\\n            onClick={scrollPrev}\\n            {...props}\\n        >\\n            <ArrowLeft />\\n            <span className=\\\"sr-only\\\">Previous slide</span>\\n        </Button>\\n    )\\n}\\n\\nfunction CarouselNext({\\n    className,\\n    variant = \\\"outline\\\",\\n    size = \\\"icon\\\",\\n    ...props\\n}: React.ComponentProps<typeof Button>) {\\n    const { orientation, scrollNext, canScrollNext } = useCarousel()\\n\\n    return (\\n        <Button\\n            data-slot=\\\"carousel-next\\\"\\n            variant={variant}\\n            size={size}\\n            className={cn(\\n                \\\"absolute size-8 rounded\\\",\\n                orientation === \\\"horizontal\\\"\\n                    ? \\\"top-1/2 -right-12 -translate-y-1/2 hover:-translate-y-[calc(50%-2px)] active:-translate-y-[calc(50%-4px)]\\\"\\n                    : \\\"-bottom-12 left-1/2 -translate-x-1/2 rotate-90 hover:-translate-x-[calc(50%-2px)] active:-translate-x-[calc(50%-4px)]\\\",\\n                className\\n            )}\\n            disabled={!canScrollNext}\\n            onClick={scrollNext}\\n            {...props}\\n        >\\n            <ArrowRight />\\n            <span className=\\\"sr-only\\\">Next slide</span>\\n        </Button>\\n    )\\n}\\n\\nconst CarouselObject = Object.assign(Carousel, {\\n    Content: CarouselContent,\\n    Item: CarouselItem,\\n    Previous: CarouselPrevious,\\n    Next: CarouselNext,\\n})\\n\\nexport { CarouselObject as Carousel }\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Carousel.tsx\"\n    },\n    {\n      \"path\": \"components/retroui/Button.tsx\",\n      \"content\": \"import { cn } from \\\"@/lib/utils\\\";\\nimport { cva, VariantProps } from \\\"class-variance-authority\\\";\\nimport React, { ButtonHTMLAttributes } from \\\"react\\\";\\nimport { Slot } from \\\"@radix-ui/react-slot\\\";\\n\\nexport const buttonVariants = cva(\\n  \\\"font-head transition-all rounded outline-hidden cursor-pointer duration-200 font-medium flex items-center\\\",\\n  {\\n    variants: {\\n      variant: {\\n        default:\\n          \\\"shadow-md hover:shadow active:shadow-none bg-primary text-primary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-primary-hover\\\",\\n        secondary:\\n          \\\"shadow-md hover:shadow active:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-secondary-hover\\\",\\n        outline:\\n          \\\"shadow-md hover:shadow active:shadow-none bg-transparent border-2 transition hover:translate-y-1 active:translate-y-2 active:translate-x-1\\\",\\n        link: \\\"bg-transparent hover:underline\\\",\\n        ghost: \\\"bg-transparent hover:bg-accent\\\"\\n      },\\n      size: {\\n        sm: \\\"px-3 py-1 text-sm shadow hover:shadow-none\\\",\\n        md: \\\"px-4 py-1.5 text-base\\\",\\n        lg: \\\"px-6 lg:px-8 py-2 lg:py-3 text-md lg:text-lg\\\",\\n        icon: \\\"p-2\\\",\\n      },\\n    },\\n    defaultVariants: {\\n      size: \\\"md\\\",\\n      variant: \\\"default\\\",\\n    },\\n  },\\n);\\n\\nexport interface IButtonProps\\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\\n    VariantProps<typeof buttonVariants> {\\n  asChild?: boolean;\\n}\\n\\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\\n  (\\n    {\\n      children,\\n      size = \\\"md\\\",\\n      className = \\\"\\\",\\n      variant = \\\"default\\\",\\n      asChild = false,\\n      ...props\\n    }: IButtonProps,\\n    forwardedRef,\\n  ) => {\\n    const Comp = asChild ? Slot : \\\"button\\\";\\n    return (\\n      <Comp\\n        ref={forwardedRef}\\n        className={cn(buttonVariants({ variant, size }), className)}\\n        {...props}\\n      >\\n        {children}\\n      </Comp>\\n    );\\n  },\\n);\\n\\nButton.displayName = \\\"Button\\\";\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Button.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/checkbox-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"checkbox-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"checkbox-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/checkbox.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/checkbox-style-sizes.tsx\",\n      \"content\": \"import { Checkbox } from \\\"@/components/retroui/Checkbox\\\";\\n\\nexport default function CheckboxStyleSizes() {\\n  return (\\n    <div className=\\\"flex gap-4\\\">\\n      <Checkbox size=\\\"sm\\\" />\\n      <Checkbox />\\n      <Checkbox size=\\\"lg\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/checkbox-style-sizes.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/checkbox-style-toggle.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"checkbox-style-toggle\",\n  \"type\": \"registry:block\",\n  \"title\": \"checkbox-style-toggle\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/checkbox.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/checkbox-style-variants.tsx\",\n      \"content\": \"import { Checkbox } from \\\"@/components/retroui/Checkbox\\\";\\n\\nexport default function CheckboxStyleVariants() {\\n  return (\\n    <div className=\\\"flex gap-4\\\">\\n      <Checkbox />\\n      <Checkbox variant=\\\"outline\\\" />\\n      <Checkbox variant=\\\"solid\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/checkbox-style-variants.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/checkbox.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"checkbox\",\n  \"type\": \"registry:component\",\n  \"title\": \"Checkbox\",\n  \"description\": \"Let users confirm or reject an option.\",\n  \"dependencies\": [\n    \"@radix-ui/react-checkbox\",\n    \"class-variance-authority\",\n    \"lucide-react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Checkbox.tsx\",\n      \"content\": \"import { cn } from \\\"@/lib/utils\\\";\\nimport * as CheckboxPrimitive from \\\"@radix-ui/react-checkbox\\\";\\nimport { cva, VariantProps } from \\\"class-variance-authority\\\";\\nimport { Check } from \\\"lucide-react\\\";\\n\\nconst checkboxVariants = cva(\\\"border-2 rounded\\\", {\\n  variants: {\\n    variant: {\\n      default: \\\"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground \\\",\\n      outline: \\\"\\\",\\n      solid:\\n        \\\"data-[state=checked]:bg-foreground data-[state=checked]:text-background\\\",\\n    },\\n    size: {\\n      sm: \\\"h-4 w-4\\\",\\n      md: \\\"h-5 w-5\\\",\\n      lg: \\\"h-6 w-6\\\",\\n    },\\n  },\\n  defaultVariants: {\\n    variant: \\\"default\\\",\\n    size: \\\"md\\\",\\n  },\\n});\\n\\ninterface CheckboxProps\\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\\n    VariantProps<typeof checkboxVariants> {}\\n\\nexport const Checkbox = ({\\n  className,\\n  size,\\n  variant,\\n  ...props\\n}: CheckboxProps) => (\\n  <CheckboxPrimitive.Root\\n    className={cn(\\n      checkboxVariants({\\n        size,\\n        variant,\\n      }),\\n      className,\\n    )}\\n    {...props}\\n  >\\n    <CheckboxPrimitive.Indicator className=\\\"h-full w-full\\\">\\n      <Check className=\\\"h-full w-full\\\" />\\n    </CheckboxPrimitive.Indicator>\\n  </CheckboxPrimitive.Root>\\n);\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Checkbox.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/command.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"command\",\n  \"type\": \"registry:component\",\n  \"title\": \"Command\",\n  \"description\": \"Fast, keyboard-first command palette powered by cmdk.\",\n  \"dependencies\": [\n    \"cmdk\",\n    \"@radix-ui/react-dialog\",\n    \"lucide-react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Command.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport React from \\\"react\\\";\\nimport { cn } from \\\"@/lib/utils\\\";\\nimport { Dialog } from \\\"@/components/retroui/Dialog\\\";\\nimport { type DialogProps } from \\\"@radix-ui/react-dialog\\\";\\nimport { Command as CommandPrimitive } from \\\"cmdk\\\";\\nimport { Check, LucideIcon, Search } from \\\"lucide-react\\\";\\n\\nfunction Command({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive>) {\\n  return (\\n    <CommandPrimitive\\n      className={cn(\\n        \\\"flex h-full w-full flex-col overflow-hidden rounded bg-background text-foreground border-border shadow-md\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\ntype CommandDialogProps = DialogProps & { className?: string };\\n\\nconst CommandDialog = ({\\n  children,\\n  className,\\n  ...props\\n}: CommandDialogProps) => {\\n  return (\\n    <Dialog {...props}>\\n      <Dialog.Content\\n        className={cn(\\n          \\\"overflow-hidden p-0 shadow-lg rounded w-full max-w-md\\\",\\n          className,\\n        )}\\n      >\\n        <Command className=\\\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\\\">\\n          {children}\\n        </Command>\\n      </Dialog.Content>\\n    </Dialog>\\n  );\\n};\\n\\nfunction CommandInput({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\\n  return (\\n    <div\\n      className=\\\"flex items-center border-border border-b px-3\\\"\\n      cmdk-input-wrapper=\\\"\\\"\\n      data-slot=\\\"command-input\\\"\\n    >\\n      <Search className=\\\"me-2 h-4 w-4 shrink-0 opacity-50 text-foreground\\\" />\\n      <CommandPrimitive.Input\\n        className={cn(\\n          \\\"flex h-11 w-full rounded bg-transparent py-3 text-sm outline-hidden text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-body\\\",\\n          className,\\n        )}\\n        {...props}\\n      />\\n    </div>\\n  );\\n}\\n\\nfunction CommandList({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\\n  return (\\n    <CommandPrimitive.List\\n      data-slot=\\\"command-list\\\"\\n      className={cn(\\n        \\\"max-h-[400px] overflow-auto overscroll-contain transition-[height]  h-[calc(min(300px,var(--cmdk-list-height)))] bg-background\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CommandEmpty({\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\\n  return (\\n    <CommandPrimitive.Empty\\n      data-slot=\\\"command-empty\\\"\\n      className=\\\"py-6 text-center text-sm text-muted-foreground font-body\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CommandGroup({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\\n  return (\\n    <CommandPrimitive.Group\\n      data-slot=\\\"command-group\\\"\\n      className={cn(\\n        \\\"overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground font-body\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CommandSeparator({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\\n  return (\\n    <CommandPrimitive.Separator\\n      data-slot=\\\"command-separator\\\"\\n      className={cn(\\\"h-px bg-border\\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CommandItem({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\\n  return (\\n    <CommandPrimitive.Item\\n      data-slot=\\\"command-item\\\"\\n      className={cn(\\n        \\\"relative flex text-foreground cursor-pointer gap-2 select-none items-center rounded px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground transition-all font-body\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nconst CommandShortcut = ({\\n  className,\\n  ...props\\n}: React.HTMLAttributes<HTMLSpanElement>) => {\\n  return (\\n    <span\\n      data-slot=\\\"command-shortcut\\\"\\n      className={cn(\\n        \\\"ms-auto text-xs tracking-widest text-muted-foreground font-body\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n};\\n\\ninterface CommandCheckProps {\\n  icon?: LucideIcon;\\n  className?: string;\\n}\\n\\nfunction CommandCheck({\\n  icon: Icon = Check,\\n  className,\\n  ...props\\n}: CommandCheckProps) {\\n  return (\\n    <Icon\\n      data-slot=\\\"command-check\\\"\\n      data-check=\\\"true\\\"\\n      className={cn(\\\"size-4 ms-auto text-primary\\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nconst CommandComponent = Object.assign(Command, {\\n  Check: CommandCheck,\\n  Dialog: CommandDialog,\\n  Empty: CommandEmpty,\\n  Group: CommandGroup,\\n  Input: CommandInput,\\n  Item: CommandItem,\\n  List: CommandList,\\n  Separator: CommandSeparator,\\n  Shortcut: CommandShortcut,\\n});\\n\\nexport { CommandComponent as Command };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Command.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/context-menu.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"context-menu\",\n  \"type\": \"registry:component\",\n  \"title\": \"Context Menu\",\n  \"description\": \"Show contextual actions on right-click.\",\n  \"dependencies\": [\n    \"@radix-ui/react-context-menu\",\n    \"lucide-react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/ContextMenu.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport * as ContextMenuPrimitive from \\\"@radix-ui/react-context-menu\\\";\\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \\\"lucide-react\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nfunction ContextMenu({\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\\n  return <ContextMenuPrimitive.Root data-slot=\\\"context-menu\\\" {...props} />;\\n}\\n\\nfunction ContextMenuTrigger({\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\\n  return (\\n    <ContextMenuPrimitive.Trigger data-slot=\\\"context-menu-trigger\\\" {...props} />\\n  );\\n}\\n\\nfunction ContextMenuGroup({\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\\n  return (\\n    <ContextMenuPrimitive.Group data-slot=\\\"context-menu-group\\\" {...props} />\\n  );\\n}\\n\\nfunction ContextMenuPortal({\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\\n  return (\\n    <ContextMenuPrimitive.Portal data-slot=\\\"context-menu-portal\\\" {...props} />\\n  );\\n}\\n\\nfunction ContextMenuSub({\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\\n  return <ContextMenuPrimitive.Sub data-slot=\\\"context-menu-sub\\\" {...props} />;\\n}\\n\\nfunction ContextMenuRadioGroup({\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\\n  return (\\n    <ContextMenuPrimitive.RadioGroup\\n      data-slot=\\\"context-menu-radio-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction ContextMenuSubTrigger({\\n  className,\\n  inset,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\\n  inset?: boolean;\\n}) {\\n  return (\\n    <ContextMenuPrimitive.SubTrigger\\n      data-slot=\\\"context-menu-sub-trigger\\\"\\n      data-inset={inset}\\n      className={cn(\\n        \\\"focus:bg-primary focus:text-primary-foreground data-[state=open]:bg-primary data-[state=open]:text-primary-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors\\\",\\n        className,\\n      )}\\n      {...props}\\n    >\\n      {children}\\n      <ChevronRightIcon className=\\\"ml-auto\\\" />\\n    </ContextMenuPrimitive.SubTrigger>\\n  );\\n}\\n\\nfunction ContextMenuSubContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\\n  return (\\n    <ContextMenuPrimitive.SubContent\\n      data-slot=\\\"context-menu-sub-content\\\"\\n      className={cn(\\n        \\\"bg-background text-foreground border-2 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-[--radix-context-menu-content-transform-origin] overflow-hidden rounded-sm p-1\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction ContextMenuContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\\n  return (\\n    <ContextMenuPrimitive.Portal>\\n      <ContextMenuPrimitive.Content\\n        data-slot=\\\"context-menu-content\\\"\\n        className={cn(\\n          \\\"bg-background text-foreground border-2 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] origin-[--radix-context-menu-content-transform-origin] overflow-x-hidden overflow-y-auto rounded-sm p-1\\\",\\n          className,\\n        )}\\n        {...props}\\n      />\\n    </ContextMenuPrimitive.Portal>\\n  );\\n}\\n\\nfunction ContextMenuItem({\\n  className,\\n  inset,\\n  variant = \\\"default\\\",\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\\n  inset?: boolean;\\n  variant?: \\\"default\\\" | \\\"destructive\\\";\\n}) {\\n  return (\\n    <ContextMenuPrimitive.Item\\n      data-slot=\\\"context-menu-item\\\"\\n      data-inset={inset}\\n      data-variant={variant}\\n      className={cn(\\n        \\\"focus:bg-primary focus:text-primary-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction ContextMenuCheckboxItem({\\n  className,\\n  children,\\n  checked,\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\\n  return (\\n    <ContextMenuPrimitive.CheckboxItem\\n      data-slot=\\\"context-menu-checkbox-item\\\"\\n      className={cn(\\n        \\\"focus:bg-primary focus:text-primary-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors\\\",\\n        className,\\n      )}\\n      checked={checked}\\n      {...props}\\n    >\\n      <span className=\\\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\\\">\\n        <ContextMenuPrimitive.ItemIndicator>\\n          <CheckIcon className=\\\"size-4\\\" />\\n        </ContextMenuPrimitive.ItemIndicator>\\n      </span>\\n      {children}\\n    </ContextMenuPrimitive.CheckboxItem>\\n  );\\n}\\n\\nfunction ContextMenuRadioItem({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\\n  return (\\n    <ContextMenuPrimitive.RadioItem\\n      data-slot=\\\"context-menu-radio-item\\\"\\n      className={cn(\\n        \\\"focus:bg-primary focus:text-primary-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors\\\",\\n        className,\\n      )}\\n      {...props}\\n    >\\n      <span className=\\\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\\\">\\n        <ContextMenuPrimitive.ItemIndicator>\\n          <CircleIcon className=\\\"size-2 fill-current\\\" />\\n        </ContextMenuPrimitive.ItemIndicator>\\n      </span>\\n      {children}\\n    </ContextMenuPrimitive.RadioItem>\\n  );\\n}\\n\\nfunction ContextMenuLabel({\\n  className,\\n  inset,\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\\n  inset?: boolean;\\n}) {\\n  return (\\n    <ContextMenuPrimitive.Label\\n      data-slot=\\\"context-menu-label\\\"\\n      data-inset={inset}\\n      className={cn(\\n        \\\"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction ContextMenuSeparator({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\\n  return (\\n    <ContextMenuPrimitive.Separator\\n      data-slot=\\\"context-menu-separator\\\"\\n      className={cn(\\\"bg-border -mx-1 my-1 h-px\\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction ContextMenuShortcut({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\">) {\\n  return (\\n    <span\\n      data-slot=\\\"context-menu-shortcut\\\"\\n      className={cn(\\n        \\\"text-muted-foreground ml-auto text-xs tracking-widest\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nconst ContextMenuComponent = Object.assign(ContextMenu, {\\n  Trigger: ContextMenuTrigger,\\n  Content: ContextMenuContent,\\n  Item: ContextMenuItem,\\n  CheckboxItem: ContextMenuCheckboxItem,\\n  RadioItem: ContextMenuRadioItem,\\n  Label: ContextMenuLabel,\\n  Separator: ContextMenuSeparator,\\n  Shortcut: ContextMenuShortcut,\\n  Group: ContextMenuGroup,\\n  Portal: ContextMenuPortal,\\n  Sub: ContextMenuSub,\\n  SubContent: ContextMenuSubContent,\\n  SubTrigger: ContextMenuSubTrigger,\\n  RadioGroup: ContextMenuRadioGroup,\\n});\\n\\nexport { ContextMenuComponent as ContextMenu };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/ContextMenu.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/dialog-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"dialog-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"dialog-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/dialog-style-default.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\nimport { Dialog } from \\\"@/components/retroui/Dialog\\\";\\nimport { Text } from \\\"@/components/retroui/Text\\\";\\n\\nexport default function DialogStyleDefault() {\\n  return (\\n    <Dialog>\\n      <Dialog.Trigger asChild>\\n        <Button>Open Dialog</Button>\\n      </Dialog.Trigger>\\n      <Dialog.Content>\\n        <Dialog.Header>\\n          <Text as=\\\"h5\\\">Confirm your action?</Text>\\n        </Dialog.Header>\\n        <section className=\\\"flex flex-col gap-4 p-4\\\">\\n          <section className=\\\"text-xl\\\">\\n            <p>Are you sure you want to delete this item?</p>\\n            <p>This action cannout be undone.</p>\\n          </section>\\n          <section className=\\\"flex w-full justify-end\\\">\\n            <Dialog.Trigger asChild>\\n              <Button>Confirm</Button>\\n            </Dialog.Trigger>\\n          </section>\\n        </section>\\n      </Dialog.Content>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/dialog-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/dialog-style-width-variant.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"dialog-style-width-variant\",\n  \"type\": \"registry:block\",\n  \"title\": \"dialog-style-width-variant\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/dialog-style-width-variant.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\nimport { Dialog } from \\\"@/components/retroui/Dialog\\\";\\nimport { Text } from \\\"@/components/retroui/Text\\\";\\nimport { useState } from \\\"react\\\";\\n\\ntype Variants =\\n  | \\\"auto\\\"\\n  | \\\"sm\\\"\\n  | \\\"md\\\"\\n  | \\\"lg\\\"\\n  | \\\"xl\\\"\\n  | \\\"2xl\\\"\\n  | \\\"3xl\\\"\\n  | \\\"4xl\\\"\\n  | \\\"screen\\\";\\n\\nexport default function DialogStyleWidthVariant() {\\n  const [variant, setVariant] = useState<Variants>(\\\"auto\\\");\\n\\n  const sizes: Variants[] = [\\n    \\\"auto\\\",\\n    \\\"sm\\\",\\n    \\\"md\\\",\\n    \\\"lg\\\",\\n    \\\"xl\\\",\\n    \\\"2xl\\\",\\n    \\\"3xl\\\",\\n    \\\"4xl\\\",\\n    \\\"screen\\\",\\n  ];\\n\\n  return (\\n    <Dialog>\\n      <Dialog.Trigger asChild>\\n        <Button>Open Dialog</Button>\\n      </Dialog.Trigger>\\n      <Dialog.Content size={variant}>\\n        <Dialog.Header>\\n          <Text as=\\\"h5\\\">Dialog with variants</Text>\\n        </Dialog.Header>\\n        <section className=\\\"flex flex-col gap-4 p-4\\\">\\n          <section className=\\\"text-xl\\\">\\n            <p>Choose your width size</p>\\n            <section className=\\\"flex flex-wrap gap-4\\\">\\n              {sizes.map((singleVariant) => (\\n                <Button\\n                  key={\\\"variant-list-\\\" + singleVariant}\\n                  type=\\\"button\\\"\\n                  variant={singleVariant == variant ? \\\"default\\\" : \\\"outline\\\"}\\n                  onClick={() => setVariant(singleVariant)}\\n                >\\n                  {singleVariant}\\n                </Button>\\n              ))}\\n            </section>\\n          </section>\\n        </section>\\n      </Dialog.Content>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/dialog-style-width-variant.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/dialog-style-with-footer.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"dialog-style-with-footer\",\n  \"type\": \"registry:block\",\n  \"title\": \"dialog-style-with-footer\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/dialog-style-with-footer.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\nimport { Text } from \\\"@/components/retroui/Text\\\";\\nimport { Dialog } from \\\"@/components/retroui/Dialog\\\";\\n\\nexport default function DialogStyleWithFooter() {\\n  return (\\n    <Dialog>\\n      <Dialog.Trigger asChild>\\n        <Button>Open Dialog</Button>\\n      </Dialog.Trigger>\\n      <Dialog.Content>\\n        <Dialog.Header position={\\\"fixed\\\"} asChild>\\n          <Text as=\\\"h5\\\">Confirm your action?</Text>\\n        </Dialog.Header>\\n        <section className=\\\"flex flex-col gap-4 p-4\\\">\\n          <section className=\\\"text-xl\\\">\\n            <p>Are you sure you want to delete this item?</p>\\n            <p>This action cannout be undone.</p>\\n          </section>\\n        </section>\\n        <Dialog.Footer>\\n          <Dialog.Trigger asChild>\\n            <Button>Confirm</Button>\\n          </Dialog.Trigger>\\n          <Dialog.Trigger asChild>\\n            <Button variant={\\\"outline\\\"}>Close</Button>\\n          </Dialog.Trigger>\\n        </Dialog.Footer>\\n      </Dialog.Content>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/dialog-style-with-footer.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/dialog-style-with-form.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"dialog-style-with-form\",\n  \"type\": \"registry:block\",\n  \"title\": \"dialog-style-with-form\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/dialog-style-with-form.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\nimport { Dialog } from \\\"@/components/retroui/Dialog\\\";\\nimport { Input } from \\\"@/components/retroui/Input\\\";\\nimport { Text } from \\\"@/components/retroui/Text\\\";\\n\\nexport default function DialogStyleWithForm() {\\n  return (\\n    <Dialog>\\n      <Dialog.Trigger asChild>\\n        <Button>Open Form</Button>\\n      </Dialog.Trigger>\\n      <Dialog.Content size={\\\"md\\\"}>\\n        <Dialog.Header position={\\\"fixed\\\"}>\\n          <Text as=\\\"h5\\\">Contact Us</Text>\\n        </Dialog.Header>\\n        <form className=\\\"flex flex-col gap-4\\\">\\n          <div className=\\\"flex flex-col p-4 gap-4\\\">\\n            <div className=\\\"flex-col gap-2\\\">\\n              <label htmlFor=\\\"name\\\">\\n                Your name <span className=\\\"text-red-500\\\">*</span>\\n              </label>\\n              <Input placeholder=\\\"Type your name\\\" required />\\n            </div>\\n            <div className=\\\"flex-col gap-2\\\">\\n              <label htmlFor=\\\"name\\\">\\n                Your e-email <span className=\\\"text-red-500\\\">*</span>\\n              </label>\\n              <Input placeholder=\\\"Type your name\\\" required />\\n            </div>\\n          </div>\\n          <Dialog.Footer>\\n            <Dialog.Trigger asChild>\\n              <Button type=\\\"submit\\\">Submit</Button>\\n            </Dialog.Trigger>\\n          </Dialog.Footer>\\n        </form>\\n      </Dialog.Content>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/dialog-style-with-form.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/dialog.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"dialog\",\n  \"type\": \"registry:component\",\n  \"title\": \"Dialog\",\n  \"description\": \"An impactful dialog that ensures your important messages and actions get the attention they deserve! 💬✨\",\n  \"dependencies\": [\n    \"@radix-ui/react-dialog\",\n    \"@radix-ui/react-visually-hidden\",\n    \"class-variance-authority\",\n    \"lucide-react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Dialog.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as ReactDialog from \\\"@radix-ui/react-dialog\\\";\\nimport { cn } from \\\"@/lib/utils\\\";\\nimport { cva, VariantProps } from \\\"class-variance-authority\\\";\\nimport React, { HTMLAttributes, ReactNode } from \\\"react\\\";\\nimport { VisuallyHidden } from \\\"@radix-ui/react-visually-hidden\\\";\\nimport { X } from \\\"lucide-react\\\";\\n\\nconst Dialog = ReactDialog.Root;\\nconst DialogTrigger = ReactDialog.Trigger;\\n\\nconst overlayVariants = cva(\\n  ` fixed bg-black/80 font-head\\n    data-[state=open]:fade-in-0\\n    data-[state=open]:animate-in \\n    data-[state=closed]:animate-out \\n    data-[state=closed]:fade-out-0 \\n  `,\\n  {\\n    variants: {\\n      variant: {\\n        default: \\\"inset-0 z-50 bg-black/85\\\",\\n        none: \\\"fixed bg-transparent\\\",\\n      },\\n    },\\n    defaultVariants: {\\n      variant: \\\"default\\\",\\n    },\\n  },\\n);\\n\\ninterface IDialogBackgroupProps\\n  extends HTMLAttributes<HTMLDivElement>,\\n    VariantProps<typeof overlayVariants> {}\\n\\nconst DialogBackdrop = React.forwardRef<HTMLDivElement, IDialogBackgroupProps>(\\n  function DialogBackdrop(inputProps: IDialogBackgroupProps, forwardedRef) {\\n    const { variant = \\\"default\\\", className, ...props } = inputProps;\\n\\n    return (\\n      <ReactDialog.Overlay\\n        className={cn(overlayVariants({ variant }), className)}\\n        ref={forwardedRef}\\n        {...props}\\n      />\\n    );\\n  },\\n);\\nDialogBackdrop.displayName = \\\"DialogBackdrop\\\";\\n\\nconst dialogVariants = cva(\\n  `fixed left-[50%] top-[50%] z-50 grid rounded overflow-hidden w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-2 bg-background shadow-lg duration-200 \\n  data-[state=open]:animate-in \\n  data-[state=open]:fade-in-0 \\n  data-[state=open]:zoom-in-95 \\n  data-[state=closed]:animate-out \\n  data-[state=closed]:fade-out-0 \\n  data-[state=closed]:zoom-out-95`,\\n  {\\n    variants: {\\n      size: {\\n        auto: \\\"max-w-fit\\\",\\n        sm: \\\"lg:max-w-[30%]\\\",\\n        md: \\\"lg:max-w-[40%]\\\",\\n        lg: \\\"lg:max-w-[50%]\\\",\\n        xl: \\\"lg:max-w-[60%]\\\",\\n        \\\"2xl\\\": \\\"lg:max-w-[70%]\\\",\\n        \\\"3xl\\\": \\\"lg:max-w-[80%]\\\",\\n        \\\"4xl\\\": \\\"lg:max-w-[90%]\\\",\\n        screen: \\\"max-w-[100%]\\\",\\n      },\\n    },\\n    defaultVariants: {\\n      size: \\\"auto\\\",\\n    },\\n  },\\n);\\n\\ninterface IDialogContentProps\\n  extends HTMLAttributes<HTMLDivElement>,\\n    VariantProps<typeof dialogVariants> {\\n  overlay?: IDialogBackgroupProps;\\n}\\n\\nconst DialogContent = React.forwardRef<HTMLDivElement, IDialogContentProps>(\\n  function DialogContent(inputProps: IDialogContentProps, forwardedRef) {\\n    const {\\n      children,\\n      size = \\\"auto\\\",\\n      className,\\n      overlay,\\n      ...props\\n    } = inputProps;\\n\\n    return (\\n      <ReactDialog.Portal>\\n        <DialogBackdrop {...overlay} />\\n        <ReactDialog.Content\\n          className={cn(dialogVariants({ size }), className)}\\n          ref={forwardedRef}\\n          {...props}\\n        >\\n          <VisuallyHidden>\\n            <ReactDialog.Title />\\n          </VisuallyHidden>\\n          <div className=\\\"flex flex-col relative\\\">{children}</div>\\n        </ReactDialog.Content>\\n      </ReactDialog.Portal>\\n    );\\n  },\\n);\\nDialogContent.displayName = \\\"DialogContent\\\";\\n\\ninterface IDialogDescriptionProps extends HTMLAttributes<HTMLDivElement> {}\\nconst DialogDescription = ({\\n  children,\\n  className,\\n  ...props\\n}: IDialogDescriptionProps) => {\\n  return (\\n    <ReactDialog.Description className={cn(className)} {...props}>\\n      {children}\\n    </ReactDialog.Description>\\n  );\\n};\\n\\nconst dialogFooterVariants = cva(\\n  \\\"flex items-center justify-end border-t-2 min-h-12 gap-4 px-4 py-2\\\",\\n  {\\n    variants: {\\n      variant: {\\n        default: \\\"bg-background text-foreground\\\",\\n      },\\n      position: {\\n        fixed: \\\"sticky bottom-0\\\",\\n        static: \\\"static\\\",\\n      },\\n    },\\n    defaultVariants: {\\n      position: \\\"fixed\\\",\\n    },\\n  },\\n);\\n\\nexport interface IDialogFooterProps\\n  extends HTMLAttributes<HTMLDivElement>,\\n    VariantProps<typeof dialogFooterVariants> {}\\n\\nconst DialogFooter = ({\\n  children,\\n  className,\\n  position,\\n  variant,\\n  ...props\\n}: IDialogFooterProps) => {\\n  return (\\n    <div\\n      className={cn(dialogFooterVariants({ position, variant }), className)}\\n      {...props}\\n    >\\n      {children}\\n    </div>\\n  );\\n};\\n\\nconst dialogHeaderVariants = cva(\\n  \\\"flex items-center justify-between border-b-2 px-4 min-h-12\\\",\\n  {\\n    variants: {\\n      variant: {\\n        default: \\\"bg-primary text-primary-foreground\\\",\\n      },\\n      position: {\\n        fixed: \\\"sticky top-0\\\",\\n        static: \\\"static\\\",\\n      },\\n    },\\n    defaultVariants: {\\n      variant: \\\"default\\\",\\n      position: \\\"static\\\",\\n    },\\n  },\\n);\\n\\nconst DialogHeaderDefaultLayout = ({ children }: { children: ReactNode }) => {\\n  return (\\n    <>\\n      {children}\\n      <DialogTrigger title=\\\"Close pop-up\\\" className=\\\"cursor-pointer\\\" asChild>\\n        <X />\\n      </DialogTrigger>\\n    </>\\n  );\\n};\\n\\ninterface IDialogHeaderProps\\n  extends HTMLAttributes<HTMLDivElement>,\\n    VariantProps<typeof dialogHeaderVariants>,\\n    ReactDialog.DialogTitleProps {}\\n\\nconst DialogHeader = ({\\n  children,\\n  className,\\n  position,\\n  variant,\\n  asChild,\\n  ...props\\n}: IDialogHeaderProps) => {\\n  return (\\n    <div\\n      className={cn(dialogHeaderVariants({ position, variant }), className)}\\n      {...props}\\n    >\\n      {asChild ? (\\n        children\\n      ) : (\\n        <DialogHeaderDefaultLayout>{children}</DialogHeaderDefaultLayout>\\n      )}\\n    </div>\\n  );\\n};\\n\\nconst DialogComponent = Object.assign(Dialog, {\\n  Trigger: DialogTrigger,\\n  Header: DialogHeader,\\n  Content: DialogContent,\\n  Description: DialogDescription,\\n  Footer: DialogFooter,\\n});\\n\\nexport { DialogComponent as Dialog };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Dialog.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/drawer.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"drawer\",\n  \"type\": \"registry:component\",\n  \"title\": \"Drawer\",\n  \"description\": \"A component that can slide in from any side of the screen.\",\n  \"dependencies\": [\n    \"vaul\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Drawer.tsx\",\n      \"content\": \"\\\"use client\\\"\\n\\nimport * as React from \\\"react\\\"\\nimport { Drawer as DrawerPrimitive } from \\\"vaul\\\"\\n\\nimport { cn } from \\\"@/lib/utils\\\"\\n\\nfunction Drawer({\\n  ...props\\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\\n  return <DrawerPrimitive.Root data-slot=\\\"drawer\\\" {...props} />\\n}\\n\\nfunction DrawerTrigger({\\n  ...props\\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\\n  return <DrawerPrimitive.Trigger data-slot=\\\"drawer-trigger\\\" {...props} />\\n}\\n\\nfunction DrawerPortal({\\n  ...props\\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\\n  return <DrawerPrimitive.Portal data-slot=\\\"drawer-portal\\\" {...props} />\\n}\\n\\nfunction DrawerClose({\\n  ...props\\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\\n  return <DrawerPrimitive.Close data-slot=\\\"drawer-close\\\" {...props} />\\n}\\n\\nfunction DrawerOverlay({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\\n  return (\\n    <DrawerPrimitive.Overlay\\n      data-slot=\\\"drawer-overlay\\\"\\n      className={cn(\\n        \\\"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  )\\n}\\n\\nfunction DrawerContent({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\\n  return (\\n    <DrawerPortal data-slot=\\\"drawer-portal\\\">\\n      <DrawerOverlay />\\n      <DrawerPrimitive.Content\\n        data-slot=\\\"drawer-content\\\"\\n        className={cn(\\n          \\\"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\\\",\\n          \\\"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b data-[vaul-drawer-direction=top]:border-b-2\\\",\\n          \\\"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t data-[vaul-drawer-direction=bottom]:border-t-2\\\",\\n          \\\"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l-2 data-[vaul-drawer-direction=right]:sm:max-w-sm\\\",\\n          \\\"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r-2 data-[vaul-drawer-direction=left]:sm:max-w-sm\\\",\\n          className\\n        )}\\n        {...props}\\n      >\\n        <div className=\\\"bg-foreground mx-auto mt-4 hidden h-1 w-[60px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\\\" />\\n        {children}\\n      </DrawerPrimitive.Content>\\n    </DrawerPortal>\\n  )\\n}\\n\\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\\\"div\\\">) {\\n  return (\\n    <div\\n      data-slot=\\\"drawer-header\\\"\\n      className={cn(\\n        \\\"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  )\\n}\\n\\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\\\"div\\\">) {\\n  return (\\n    <div\\n      data-slot=\\\"drawer-footer\\\"\\n      className={cn(\\\"mt-auto flex flex-col gap-2 p-4\\\", className)}\\n      {...props}\\n    />\\n  )\\n}\\n\\nfunction DrawerTitle({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\\n  return (\\n    <DrawerPrimitive.Title\\n      data-slot=\\\"drawer-title\\\"\\n      className={cn(\\\"text-foreground text-xl font-head font-medium\\\", className)}\\n      {...props}\\n    />\\n  )\\n}\\n\\nfunction DrawerDescription({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\\n  return (\\n    <DrawerPrimitive.Description\\n      data-slot=\\\"drawer-description\\\"\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      {...props}\\n    />\\n  )\\n}\\n\\nconst DrawerComponent = Object.assign(Drawer, {\\n    Trigger: DrawerTrigger,\\n    Portal: DrawerPortal,\\n    Overlay: DrawerOverlay,\\n    Close: DrawerClose,\\n    Content: DrawerContent,\\n    Header: DrawerHeader,\\n    Footer: DrawerFooter,\\n    Title: DrawerTitle,\\n    Description: DrawerDescription,\\n});\\n\\nexport { DrawerComponent as Drawer };\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Drawer.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/input-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"input-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"input-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/input-style-default.tsx\",\n      \"content\": \"import { Input } from \\\"@/components/retroui/Input\\\";\\n\\nexport default function InputStyleDefault() {\\n  return <Input type=\\\"text\\\" placeholder=\\\"type something...\\\" />;\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/input-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/input-style-error.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"input-style-error\",\n  \"type\": \"registry:block\",\n  \"title\": \"input-style-error\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/input-style-error.tsx\",\n      \"content\": \"import { Input } from \\\"@/components/retroui/Input\\\";\\nimport { Label } from \\\"@/components/retroui/Label\\\";\\n\\nexport default function InputStyleError() {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm items-center gap-1.5\\\">\\n      <Label htmlFor=\\\"pokemon\\\">Favorite Pokemon</Label>\\n      <Input\\n        type=\\\"pokemon\\\"\\n        id=\\\"pokemon\\\"\\n        placeholder=\\\"Charmander\\\"\\n        defaultValue=\\\"Son Goku\\\"\\n        aria-invalid\\n      />\\n      <p className=\\\"text-sm text-red-500\\\">Please provide a valid pokemon!</p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/input-style-error.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/input-style-with-label.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"input-style-with-label\",\n  \"type\": \"registry:block\",\n  \"title\": \"input-style-with-label\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/input-style-with-label.tsx\",\n      \"content\": \"import { Input } from \\\"@/components/retroui/Input\\\";\\nimport { Label } from \\\"@/components/retroui/Label\\\";\\n\\nexport default function InputStyleWithLabel() {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm items-center gap-1.5\\\">\\n      <Label htmlFor=\\\"pokemon\\\">Favorite Pokemon</Label>\\n      <Input type=\\\"pokemon\\\" id=\\\"pokemon\\\" placeholder=\\\"Charmander\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/input-style-with-label.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/input.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"input\",\n  \"type\": \"registry:component\",\n  \"title\": \"Input\",\n  \"description\": \"This pretty input makes your users want to type stuff! ⌨️\",\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Input.tsx\",\n      \"content\": \"import React, { InputHTMLAttributes } from \\\"react\\\";\\n\\ninterface InputProps extends InputHTMLAttributes<HTMLInputElement> {\\n  className?: string;\\n}\\n\\nexport const Input: React.FC<InputProps> = ({\\n  type = \\\"text\\\",\\n  placeholder = \\\"Enter text\\\",\\n  className = \\\"\\\",\\n  ...props\\n}) => {\\n  return (\\n    <input\\n      type={type}\\n      placeholder={placeholder}\\n      className={`px-4 py-2 w-full rounded border-2 shadow-md transition focus:outline-hidden focus:shadow-xs ${\\n        props[\\\"aria-invalid\\\"]\\n          ? \\\"border-destructive text-destructive shadow-xs shadow-destructive\\\"\\n          : \\\"\\\"\\n      } ${className}`}\\n      {...props}\\n    />\\n  );\\n};\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Input.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/label.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"label\",\n  \"type\": \"registry:component\",\n  \"title\": \"Label\",\n  \"description\": \"Label for form fields\",\n  \"dependencies\": [\n    \"@radix-ui/react-label\",\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Label.tsx\",\n      \"content\": \"import * as React from \\\"react\\\";\\nimport * as LabelPrimitive from \\\"@radix-ui/react-label\\\";\\nimport { cva } from \\\"class-variance-authority\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst labelVariants = cva(\\n  \\\"leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\\\",\\n);\\n\\nexport const Label = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof LabelPrimitive.Root>) => (\\n  <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />\\n);\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Label.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/line-chart.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"line-chart\",\n  \"type\": \"registry:component\",\n  \"title\": \"Line Chart\",\n  \"description\": \"Beautiful line chart for data visualization with retro styling\",\n  \"dependencies\": [\n    \"recharts\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/charts/LineChart.tsx\",\n      \"content\": \"\\\"use client\\\"\\n\\nimport { cn } from \\\"@/lib/utils\\\"\\nimport React from \\\"react\\\"\\nimport {\\n  CartesianGrid,\\n  Line,\\n  LineChart as RechartsLineChart,\\n  ResponsiveContainer,\\n  Tooltip,\\n  XAxis,\\n  YAxis,\\n} from \\\"recharts\\\"\\n\\ninterface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {\\n  data: Record<string, any>[]\\n  index: string\\n  categories: string[]\\n  strokeColors?: string[]\\n  tooltipBgColor?: string\\n  tooltipBorderColor?: string\\n  gridColor?: string\\n  valueFormatter?: (value: number) => string\\n  showGrid?: boolean\\n  showTooltip?: boolean\\n  strokeWidth?: number\\n  dotSize?: number\\n  className?: string\\n}\\n\\nconst LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(\\n  (\\n    {\\n      data = [],\\n      index,\\n      categories = [],\\n      strokeColors = [\\\"var(--foreground)\\\"],\\n      tooltipBgColor = \\\"var(--background)\\\",\\n      tooltipBorderColor = \\\"var(--border)\\\",\\n      gridColor = \\\"var(--muted)\\\",\\n      valueFormatter = (value: number) => value.toString(),\\n      showGrid = true,\\n      showTooltip = true,\\n      strokeWidth = 2,\\n      dotSize = 4,\\n      className,\\n      ...props\\n    },\\n    ref\\n  ) => {\\n    return (\\n      <div ref={ref} className={cn(\\\"h-80 w-full\\\", className)} {...props}>\\n        <ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\">\\n          <RechartsLineChart data={data} margin={{ top: 0, right: 30, left: 0, bottom: 0 }}>\\n            {showGrid && (\\n              <CartesianGrid strokeDasharray=\\\"3 3\\\" stroke={gridColor} />\\n            )}\\n            \\n            <XAxis \\n              dataKey={index}\\n              axisLine={false}\\n              tickLine={false}\\n              className=\\\"text-xs fill-muted-foreground\\\"\\n            />\\n            \\n            <YAxis\\n              axisLine={false}\\n              tickLine={false}\\n              className=\\\"text-xs fill-muted-foreground\\\"\\n              tickFormatter={valueFormatter}\\n            />\\n            \\n            {showTooltip && (\\n              <Tooltip\\n                content={({ active, payload, label }) => {\\n                  if (!active || !payload?.length) return null\\n                  \\n                  return (\\n                    <div \\n                      className=\\\"border p-2 shadow\\\"\\n                      style={{ \\n                        backgroundColor: tooltipBgColor,\\n                        borderColor: tooltipBorderColor \\n                      }}\\n                    >\\n                      <div className=\\\"grid grid-cols-2 gap-2\\\">\\n                        <div className=\\\"flex flex-col\\\">\\n                          <span className=\\\"text-[0.70rem] uppercase text-muted-foreground\\\">\\n                            {index}\\n                          </span>\\n                          <span className=\\\"font-bold text-muted-foreground\\\">\\n                            {label}\\n                          </span>\\n                        </div>\\n                        {payload.map((entry, index) => (\\n                          <div key={index} className=\\\"flex flex-col\\\">\\n                            <span className=\\\"text-[0.70rem] uppercase text-muted-foreground\\\">\\n                              {entry.dataKey}\\n                            </span>\\n                            <span className=\\\"font-bold\\\" style={{ color: entry.color }}>\\n                              {valueFormatter(entry.value as number)}\\n                            </span>\\n                          </div>\\n                        ))}\\n                      </div>\\n                    </div>\\n                  )\\n                }}\\n              />\\n            )}\\n            \\n            {categories.map((category, index) => {\\n              const strokeColor = strokeColors[index] || strokeColors[0]\\n              \\n              return (\\n                <Line\\n                  key={category}\\n                  dataKey={category}\\n                  stroke={strokeColor}\\n                  strokeWidth={strokeWidth}\\n                  dot={{ r: dotSize, fill: strokeColor }}\\n                  activeDot={{ r: dotSize + 2, fill: strokeColor }}\\n                />\\n              )\\n            })}\\n          </RechartsLineChart>\\n        </ResponsiveContainer>\\n      </div>\\n    )\\n  }\\n)\\n\\nLineChart.displayName = \\\"LineChart\\\"\\n\\nexport { LineChart, type LineChartProps }\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/charts/LineChart.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/loader.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"loader\",\n  \"type\": \"registry:component\",\n  \"title\": \"Loader\",\n  \"description\": \"A loading indicator\",\n  \"dependencies\": [\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Loader.tsx\",\n      \"content\": \"import * as React from \\\"react\\\";\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst loaderVariants = cva(\\\"flex gap-1\\\", {\\n  variants: {\\n    variant: {\\n      default: \\\"[&>div]:bg-primary [&>div]:border-black\\\",\\n      secondary:\\n        \\\"[&>div]:bg-secondary [&>div]:border-black\\\",\\n      outline: \\\"[&>div]:bg-transparent [&>div]:border-black\\\",\\n    },\\n    size: {\\n      sm: \\\"[&>div]:w-2 [&>div]:h-2\\\",\\n      md: \\\"[&>div]:w-3 [&>div]:h-3\\\",\\n      lg: \\\"[&>div]:w-4 [&>div]:h-4\\\",\\n    },\\n  },\\n  defaultVariants: {\\n    variant: \\\"default\\\",\\n    size: \\\"md\\\",\\n  },\\n});\\n\\ninterface LoaderProps\\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \\\"color\\\">,\\n    VariantProps<typeof loaderVariants> {\\n  asChild?: boolean;\\n  count?: number; // number of bouncing dots\\n  duration?: number; // animation duration in seconds\\n  delayStep?: number; // delay in ms\\n}\\n\\nconst Loader = React.forwardRef<HTMLDivElement, LoaderProps>(\\n  (\\n    {\\n      className,\\n      variant,\\n      size,\\n      count = 3,\\n      duration = 0.5,\\n      delayStep = 100,\\n      ...props\\n    },\\n    ref,\\n  ) => {\\n    return (\\n      <div\\n        className={cn(loaderVariants({ variant, size }), className)}\\n        ref={ref}\\n        role=\\\"status\\\"\\n        aria-label=\\\"Loading...\\\"\\n        {...props}\\n      >\\n        {Array.from({ length: count }).map((_, i) => (\\n          <div\\n            key={i}\\n            className=\\\"border-2 animate-bounce\\\"\\n            style={{\\n              animationDuration: `${duration}s`,\\n              animationIterationCount: \\\"infinite\\\",\\n              animationDelay: `${i * delayStep}ms`,\\n            }}\\n          />\\n        ))}\\n      </div>\\n    );\\n  },\\n);\\n\\nLoader.displayName = \\\"Loader\\\";\\nexport { Loader };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Loader.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/menu-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"menu-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"menu-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/menu-style-default.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui/Button\\\";\\nimport { Menu } from \\\"@/components/retroui/Menu\\\";\\n\\nexport default function MenuDefault() {\\n  return (\\n    <Menu>\\n      <Menu.Trigger asChild>\\n        <Button>Menu</Button>\\n      </Menu.Trigger>\\n      <Menu.Content className=\\\"min-w-36\\\">\\n        <Menu.Item>Menu Item 1</Menu.Item>\\n        <Menu.Item>Menu Item 2</Menu.Item>\\n        <Menu.Item>Menu Item 3</Menu.Item>\\n      </Menu.Content>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/menu-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/menu.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"menu\",\n  \"type\": \"registry:component\",\n  \"title\": \"Menu\",\n  \"description\": \"Show your users a list of actions they can take. 📋\",\n  \"dependencies\": [\n    \"@radix-ui/react-dropdown-menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Menu.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\nimport * as DropdownMenu from \\\"@radix-ui/react-dropdown-menu\\\";\\nimport React, { ComponentPropsWithoutRef } from \\\"react\\\";\\n\\nconst Menu = DropdownMenu.Root;\\nconst Trigger = DropdownMenu.Trigger;\\n\\ninterface IMenuContent\\n  extends ComponentPropsWithoutRef<typeof DropdownMenu.Content> {}\\n\\nconst Content = ({ className, ...props }: IMenuContent) => (\\n  <DropdownMenu.Portal>\\n    <DropdownMenu.Content\\n      side=\\\"bottom\\\"\\n      align=\\\"start\\\"\\n      className={cn(\\n        \\\"bg-white border-2 shadow-md absolute top-2 min-w-20\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  </DropdownMenu.Portal>\\n);\\n\\nconst MenuItem = React.forwardRef<\\n  HTMLDivElement,\\n  ComponentPropsWithoutRef<typeof DropdownMenu.Item>\\n>(({ className, ...props }, ref) => (\\n  <DropdownMenu.Item\\n    ref={ref}\\n    className={cn(\\n      \\\"relative text-black flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-primary focus:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50\\\",\\n      className,\\n    )}\\n    {...props}\\n  />\\n));\\nMenuItem.displayName = \\\"MenuItem\\\";\\n\\nconst MenuComponent = Object.assign(Menu, {\\n  Trigger,\\n  Content,\\n  Item: MenuItem,\\n});\\n\\nexport { MenuComponent as Menu };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Menu.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/pie-chart.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"pie-chart\",\n  \"type\": \"registry:component\",\n  \"title\": \"Pie Chart\",\n  \"description\": \"Beautiful pie chart for data visualization with retro styling\",\n  \"dependencies\": [\n    \"recharts\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/charts/PieChart.tsx\",\n      \"content\": \"\\\"use client\\\"\\n\\nimport { cn } from \\\"@/lib/utils\\\"\\nimport React from \\\"react\\\"\\nimport {\\n  Cell,\\n  Pie,\\n  PieChart as RechartsPieChart,\\n  ResponsiveContainer,\\n  Tooltip,\\n} from \\\"recharts\\\"\\n\\ninterface PieChartProps extends React.HTMLAttributes<HTMLDivElement> {\\n  data: Record<string, any>[]\\n  dataKey: string\\n  nameKey: string\\n  colors?: string[]\\n  tooltipBgColor?: string\\n  tooltipBorderColor?: string\\n  valueFormatter?: (value: number) => string\\n  showTooltip?: boolean\\n  innerRadius?: number\\n  outerRadius?: number\\n  className?: string\\n}\\n\\nconst PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(\\n  (\\n    {\\n      data = [],\\n      dataKey,\\n      nameKey,\\n      colors = [\\\"var(--chart-1)\\\", \\\"var(--chart-2)\\\", \\\"var(--chart-3)\\\", \\\"var(--chart-4)\\\", \\\"var(--chart-5)\\\"],\\n      tooltipBgColor = \\\"var(--background)\\\",\\n      tooltipBorderColor = \\\"var(--border)\\\",\\n      valueFormatter = (value: number) => value.toString(),\\n      showTooltip = true,\\n      innerRadius = 0,\\n      outerRadius = 100,\\n      className,\\n      ...props\\n    },\\n    ref\\n  ) => {\\n    return (\\n      <div ref={ref} className={cn(\\\"h-80 w-full\\\", className)} {...props}>\\n        <ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\">\\n          <RechartsPieChart>\\n            <Pie\\n              data={data}\\n              dataKey={dataKey}\\n              nameKey={nameKey}\\n              cx=\\\"50%\\\"\\n              cy=\\\"50%\\\"\\n              innerRadius={innerRadius}\\n              outerRadius={outerRadius}\\n              isAnimationActive={false}\\n              className=\\\"w-full h-full\\\"\\n            >\\n              {data.map((entry, index) => (\\n                <Cell \\n                  key={`cell-${index}`} \\n                  fill={colors[index % colors.length]} \\n                />\\n              ))}\\n            </Pie>\\n            \\n            {showTooltip && (\\n              <Tooltip\\n                content={({ active, payload }) => {\\n                  if (!active || !payload?.length) return null\\n                  \\n                  const data = payload[0]\\n                  \\n                  return (\\n                    <div \\n                      className=\\\"border p-2 shadow\\\"\\n                      style={{ \\n                        backgroundColor: tooltipBgColor,\\n                        borderColor: tooltipBorderColor \\n                      }}\\n                    >\\n                      <div className=\\\"flex flex-col gap-1\\\">\\n                        <span className=\\\"text-[0.70rem] uppercase text-muted-foreground\\\">\\n                          {data.name}\\n                        </span>\\n                        <span className=\\\"font-bold text-foreground\\\">\\n                          {valueFormatter(data.value as number)}\\n                        </span>\\n                      </div>\\n                    </div>\\n                  )\\n                }}\\n              />\\n            )}\\n          </RechartsPieChart>\\n        </ResponsiveContainer>\\n      </div>\\n    )\\n  }\\n)\\n\\nPieChart.displayName = \\\"PieChart\\\"\\n\\nexport { PieChart, type PieChartProps }\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/charts/PieChart.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/popover-style-default-shadow.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"popover-style-default-shadow\",\n  \"type\": \"registry:block\",\n  \"title\": \"popover-style-default-shadow\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/popover.json\",\n    \"https://retroui.dev/r/label.json\",\n    \"https://retroui.dev/r/input.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/popover-style-default-shadow.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Popover, Label, Button, Input } from \\\"@/components/retroui\\\";\\n\\nexport default function PopoverStyleDefaultShadow() {\\n  return (\\n    <Popover>\\n      <Popover.Trigger asChild>\\n        <Button>Open Popover</Button>\\n      </Popover.Trigger>\\n      <Popover.Content className=\\\"w-80 shadow-md\\\">\\n        <div className=\\\"grid gap-4\\\">\\n          <div className=\\\"space-y-2\\\">\\n            <h4 className=\\\"font-medium leading-none\\\">Dimensions</h4>\\n            <p className=\\\"text-sm text-muted-foreground\\\">\\n              Set the dimensions for the layer.\\n            </p>\\n          </div>\\n\\n          <div className=\\\"grid gap-2\\\">\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"width\\\">Width</Label>\\n\\n              <Input\\n                id=\\\"width\\\"\\n                defaultValue=\\\"100%\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"height\\\">Height</Label>\\n\\n              <Input\\n                id=\\\"height\\\"\\n                defaultValue=\\\"25px\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n          </div>\\n        </div>\\n      </Popover.Content>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/popover-style-default-shadow.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/popover-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"popover-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"popover-style-default\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/popover.json\",\n    \"https://retroui.dev/r/label.json\",\n    \"https://retroui.dev/r/input.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/popover-style-default.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Popover, Label, Button, Input } from \\\"@/components/retroui\\\";\\n\\nexport default function PopoverStyleDefault() {\\n  return (\\n    <Popover>\\n      <Popover.Trigger asChild>\\n        <Button>Open Popover</Button>\\n      </Popover.Trigger>\\n      <Popover.Content className=\\\"w-80 font-sans\\\">\\n        <div className=\\\"grid gap-4\\\">\\n          <div className=\\\"space-y-2\\\">\\n            <h4 className=\\\"font-medium leading-none\\\">Dimensions</h4>\\n            <p className=\\\"text-sm text-muted-foreground\\\">\\n              Set the dimensions for the layer.\\n            </p>\\n          </div>\\n\\n          <div className=\\\"grid gap-2\\\">\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"width\\\">Width</Label>\\n\\n              <Input\\n                id=\\\"width\\\"\\n                defaultValue=\\\"100%\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"height\\\">Height</Label>\\n\\n              <Input\\n                id=\\\"height\\\"\\n                defaultValue=\\\"25px\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n          </div>\\n        </div>\\n      </Popover.Content>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/popover-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/popover-style-primary-shadow.json",
    "content": "{\n  \"name\": \"popover-style-primary-shadow\",\n  \"title\": \"popover-style-primary-shadow\",\n  \"type\": \"registry:block\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/popover.json\",\n    \"https://retroui.dev/r/label.json\",\n    \"https://retroui.dev/r/input.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"dependencies\": [\"lucide-react\"],\n  \"files\": [\n    {\n      \"path\": \"preview/components/popover-style-primary-shadow.tsx\",\n      \"target\": \"components/retroui/preview/popover-style-primary-shadow.tsx\",\n      \"type\": \"registry:block\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Popover,\\n  PopoverTrigger,\\n  PopoverContent,\\n  Label,\\n  Button,\\n  Input,\\n} from \\\"@/components/retroui\\\";\\n\\nexport default function PopoverStylePrimaryShadow() {\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button>Open Popover</Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80 font-sans\\\" variant=\\\"primary\\\" shadow=\\\"md\\\">\\n        <div className=\\\"grid gap-4\\\">\\n          <div className=\\\"space-y-2\\\">\\n            <h4 className=\\\"font-medium leading-none\\\">Dimensions</h4>\\n            <p className=\\\"text-sm text-muted-foreground\\\">\\n              Set the dimensions for the layer.\\n            </p>\\n          </div>\\n\\n          <div className=\\\"grid gap-2\\\">\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"width\\\">Width</Label>\\n\\n              <Input\\n                id=\\\"width\\\"\\n                defaultValue=\\\"100%\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"height\\\">Height</Label>\\n\\n              <Input\\n                id=\\\"height\\\"\\n                defaultValue=\\\"25px\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n          </div>\\n        </div>\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\"\n    }\n  ]\n}\n"
  },
  {
    "path": "public/r/popover-style-primary.json",
    "content": "{\n  \"name\": \"popover-style-primary\",\n  \"title\": \"popover-style-default\",\n  \"type\": \"registry:block\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/popover.json\",\n    \"https://retroui.dev/r/label.json\",\n    \"https://retroui.dev/r/input.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"dependencies\": [\"lucide-react\"],\n  \"files\": [\n    {\n      \"path\": \"preview/components/popover-style-primary.tsx\",\n      \"target\": \"components/retroui/preview/popover-style-primary.tsx\",\n      \"type\": \"registry:block\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Popover,\\n  PopoverTrigger,\\n  PopoverContent,\\n  Label,\\n  Button,\\n  Input,\\n} from \\\"@/components/retroui\\\";\\n\\nexport default function PopoverStylePrimary() {\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button>Open Popover</Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80 font-sans\\\" variant=\\\"primary\\\">\\n        <div className=\\\"grid gap-4\\\">\\n          <div className=\\\"space-y-2\\\">\\n            <h4 className=\\\"font-medium leading-none\\\">Dimensions</h4>\\n            <p className=\\\"text-sm text-muted-foreground\\\">\\n              Set the dimensions for the layer.\\n            </p>\\n          </div>\\n\\n          <div className=\\\"grid gap-2\\\">\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"width\\\">Width</Label>\\n\\n              <Input\\n                id=\\\"width\\\"\\n                defaultValue=\\\"100%\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"height\\\">Height</Label>\\n\\n              <Input\\n                id=\\\"height\\\"\\n                defaultValue=\\\"25px\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n          </div>\\n        </div>\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\"\n    }\n  ]\n}\n"
  },
  {
    "path": "public/r/popover.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"popover\",\n  \"type\": \"registry:component\",\n  \"title\": \"Popover\",\n  \"author\": \"Ankan Bhattacharya <https://github.com/ankan002>\",\n  \"description\": \"A handy small component for your little input needs...😉\",\n  \"dependencies\": [\n    \"@radix-ui/react-popover\",\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Popover.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport * as PopoverPrimitive from \\\"@radix-ui/react-popover\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\nimport { cva, VariantProps } from \\\"class-variance-authority\\\";\\n\\nconst popoverContentVariants = cva(\\n  \\\"z-50 w-72 border-2 bg-background p-4 text-popover-foreground  outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]\\\",\\n);\\n\\nconst Popover = PopoverPrimitive.Root;\\n\\nconst PopoverTrigger = PopoverPrimitive.Trigger;\\n\\nconst PopoverAnchor = PopoverPrimitive.Anchor;\\n\\nconst PopoverContent = React.forwardRef<\\n  React.ElementRef<typeof PopoverPrimitive.Content>,\\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &\\n    VariantProps<typeof popoverContentVariants>\\n>(({ className, align = \\\"center\\\", sideOffset = 4, ...props }, ref) => (\\n  <PopoverPrimitive.Portal>\\n    <PopoverPrimitive.Content\\n      ref={ref}\\n      align={align}\\n      sideOffset={sideOffset}\\n      className={cn(\\n        popoverContentVariants({\\n          className,\\n        }),\\n      )}\\n      {...props}\\n    />\\n  </PopoverPrimitive.Portal>\\n));\\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\\n\\nconst PopoverObject = Object.assign(Popover, {\\n  Trigger: PopoverTrigger,\\n  Content: PopoverContent,\\n  Anchor: PopoverAnchor,\\n});\\n\\nexport { PopoverObject as Popover };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Popover.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/progress-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"progress-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"progress-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/progress.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/progress-style-default.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\n\\nimport { Progress } from \\\"@/components/retroui/Progress\\\";\\n\\nexport default function ProgressDemo() {\\n  const [progress, setProgress] = React.useState(13);\\n\\n  React.useEffect(() => {\\n    const timer = setTimeout(() => setProgress(66), 500);\\n    return () => clearTimeout(timer);\\n  }, []);\\n\\n  return <Progress value={progress} className=\\\"w-[60%]\\\" />;\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/progress-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/progress.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"progress\",\n  \"type\": \"registry:component\",\n  \"title\": \"Progress\",\n  \"description\": \"Show progress...\",\n  \"dependencies\": [\n    \"@radix-ui/react-progress\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Progress.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport * as ProgressPrimitive from \\\"@radix-ui/react-progress\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst Progress = React.forwardRef<\\n  React.ElementRef<typeof ProgressPrimitive.Root>,\\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\\n>(({ className, value, ...props }, ref) => (\\n  <ProgressPrimitive.Root\\n    ref={ref}\\n    className={cn(\\n      \\\"relative h-4 w-full overflow-hidden bg-background border-2\\\",\\n      className,\\n    )}\\n    {...props}\\n  >\\n    <ProgressPrimitive.Indicator\\n      className=\\\"h-full w-full flex-1 bg-primary transition-all\\\"\\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\\n    />\\n  </ProgressPrimitive.Root>\\n));\\nProgress.displayName = ProgressPrimitive.Root.displayName;\\n\\nexport { Progress };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Progress.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/radio-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"radio-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"radio-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/radio.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/radio-style-default.tsx\",\n      \"content\": \"import { RadioGroup } from \\\"@/components/retroui/Radio\\\";\\n\\nexport default function RadioStyleSizes() {\\n  return (\\n    <RadioGroup>\\n      <div className=\\\"flex items-center space-x-2\\\">\\n        <RadioGroup.Item value=\\\"1\\\" />\\n        <label htmlFor=\\\"1\\\"> Option 1</label>\\n      </div>\\n      <div className=\\\"flex items-center space-x-2\\\">\\n        <RadioGroup.Item value=\\\"2\\\" />\\n        <label htmlFor=\\\"2\\\"> Option 2</label>\\n      </div>\\n      <div className=\\\"flex items-center space-x-2\\\">\\n        <RadioGroup.Item value=\\\"3\\\" />\\n        <label htmlFor=\\\"3\\\"> Option 3</label>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/radio-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/radio-style-sizes.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"radio-style-sizes\",\n  \"type\": \"registry:block\",\n  \"title\": \"radio-style-sizes\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/radio.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/radio-style-sizes.tsx\",\n      \"content\": \"import { RadioGroup } from \\\"@/components/retroui/Radio\\\";\\n\\nexport default function RadioStyleSizes() {\\n  return (\\n    <div className=\\\"flex gap-4\\\">\\n      <RadioGroup>\\n        <div className=\\\"flex items-center space-x-2\\\">\\n          <RadioGroup.Item value=\\\"sm\\\" size=\\\"sm\\\" />\\n          <label htmlFor=\\\"sm\\\" className=\\\"text-sm\\\">\\n            Small\\n          </label>\\n        </div>\\n        <div className=\\\"flex items-center space-x-2\\\">\\n          <RadioGroup.Item value=\\\"md\\\" size=\\\"md\\\" />\\n          <label htmlFor=\\\"md\\\">Medium</label>\\n        </div>\\n        <div className=\\\"flex items-center space-x-2\\\">\\n          <RadioGroup.Item value=\\\"lg\\\" size=\\\"lg\\\" />\\n          <label htmlFor=\\\"lg\\\" className=\\\"text-lg\\\">\\n            Large Size\\n          </label>\\n        </div>\\n      </RadioGroup>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/radio-style-sizes.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/radio-style-variants.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"radio-style-variants\",\n  \"type\": \"registry:block\",\n  \"title\": \"radio-style-variants\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/radio.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/radio-style-variants.tsx\",\n      \"content\": \"import { RadioGroup } from \\\"@/components/retroui/Radio\\\";\\n\\nexport default function RadioStyleVariants() {\\n  return (\\n    <div className=\\\"flex gap-4\\\">\\n      <RadioGroup>\\n        <div className=\\\"flex items-center space-x-2\\\">\\n          <RadioGroup.Item value=\\\"default\\\" variant=\\\"default\\\" />\\n          <label htmlFor=\\\"default\\\">Default Style</label>\\n        </div>\\n        <div className=\\\"flex items-center space-x-2\\\">\\n          <RadioGroup.Item value=\\\"outline\\\" variant=\\\"outline\\\" />\\n          <label htmlFor=\\\"outline\\\">Outline Style</label>\\n        </div>\\n        <div className=\\\"flex items-center space-x-2\\\">\\n          <RadioGroup.Item value=\\\"solid\\\" variant=\\\"solid\\\" />\\n          <label htmlFor=\\\"solid\\\">Solid Style</label>\\n        </div>\\n      </RadioGroup>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/radio-style-variants.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/radio.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"radio\",\n  \"type\": \"registry:component\",\n  \"title\": \"Radio\",\n  \"description\": \"Sometimes you need to pick multiple options! That's where the Radio component comes into play.\",\n  \"dependencies\": [\n    \"@radix-ui/react-radio-group\",\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Radio.tsx\",\n      \"content\": \"import { cn } from \\\"@/lib/utils\\\";\\nimport * as RadioPrimitive from \\\"@radix-ui/react-radio-group\\\";\\nimport { cva, VariantProps } from \\\"class-variance-authority\\\";\\n\\nconst radioVariants = cva(\\\"border-border border-2\\\", {\\n  variants: {\\n    variant: {\\n      default: \\\"\\\",\\n      outline: \\\"\\\",\\n      solid: \\\"\\\",\\n    },\\n    size: {\\n      sm: \\\"h-4 w-4\\\",\\n      md: \\\"h-5 w-5\\\",\\n      lg: \\\"h-6 w-6\\\",\\n    },\\n  },\\n  defaultVariants: {\\n    variant: \\\"default\\\",\\n    size: \\\"md\\\",\\n  },\\n});\\n\\nconst radioIndicatorVariants = cva(\\\"flex \\\", {\\n  variants: {\\n    variant: {\\n      default: \\\"bg-primary border-2 border-border\\\",\\n      outline: \\\"border-2 border-border\\\",\\n      solid: \\\"bg-border\\\",\\n    },\\n    size: {\\n      sm: \\\"h-2 w-2\\\",\\n      md: \\\"h-2.5 w-2.5\\\",\\n      lg: \\\"h-3.5 w-3.5\\\",\\n    },\\n  },\\n  defaultVariants: {\\n    variant: \\\"default\\\",\\n    size: \\\"md\\\",\\n  },\\n});\\n\\ninterface RadioGroupProps\\n  extends React.ComponentProps<typeof RadioPrimitive.Root> {}\\n\\nexport const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (\\n  <RadioPrimitive.Root className={cn(\\\"grid gap-2\\\", className)} {...props} />\\n);\\n\\ninterface RadioProps\\n  extends React.ComponentProps<typeof RadioPrimitive.Item>,\\n    VariantProps<typeof radioVariants> {}\\n\\nexport const RadioItem = ({\\n  children,\\n  className,\\n  size,\\n  variant,\\n  ...props\\n}: RadioProps) => (\\n  <RadioPrimitive.Item\\n    {...props}\\n    className={cn(\\n      radioVariants({\\n        size,\\n        variant,\\n      }),\\n      className,\\n    )}\\n  >\\n    <RadioPrimitive.Indicator className=\\\"flex justify-center items-center\\\">\\n      <span className={radioIndicatorVariants({ size, variant })}></span>\\n    </RadioPrimitive.Indicator>\\n    {children}\\n  </RadioPrimitive.Item>\\n);\\n\\nconst RadioComponent = Object.assign(RadioGroupRoot, {\\n  Item: RadioItem,\\n});\\n\\nexport { RadioComponent as RadioGroup };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Radio.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/registry.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry.json\",\n  \"name\": \"RetroUI\",\n  \"homepage\": \"https://retroui.dev\",\n  \"dependencies\": [\n    \"tailwind-merge\",\n    \"clsx\"\n  ],\n  \"items\": [\n    {\n      \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n      \"name\": \"retroui-theme\",\n      \"title\": \"retroui-theme\",\n      \"type\": \"registry:style\",\n      \"cssVars\": {\n        \"theme\": {\n          \"shadow-xs\": \"1px 1px 0 0 var(--border)\",\n          \"shadow-sm\": \"2px 2px 0 0 var(--border)\",\n          \"shadow\": \"3px 3px 0 0 var(--border)\",\n          \"shadow-md\": \"4px 4px 0 0 var(--border)\",\n          \"shadow-lg\": \"6px 6px 0 0 var(--border)\",\n          \"shadow-xl\": \"10px 10px 0 1px var(--border)\",\n          \"shadow-2xl\": \"16px 16px 0 1px var(--border)\"\n        },\n        \"light\": {\n          \"background\": \"0 0% 100%\",\n          \"foreground\": \"0 0% 0%\",\n          \"card\": \"0 0% 100%\",\n          \"card-foreground\": \"0 0% 0%\",\n          \"primary\": \"50 100% 60%\",\n          \"primary-foreground\": \"0 0% 0%\",\n          \"muted\": \"0 0% 68%\",\n          \"muted-foreground\": \"0 0% 35%\",\n          \"accent\": \"50 89% 74%\",\n          \"accent-foreground\": \"0 0% 0%\",\n          \"destructive\": \"355 78% 56%\",\n          \"destructive-foreground\": \"0 0% 100%\",\n          \"border\": \"0 0% 0%\"\n        },\n        \"dark\": {\n          \"background\": \"0 0% 100%\",\n          \"foreground\": \"0 0% 0%\",\n          \"card\": \"0 0% 100%\",\n          \"card-foreground\": \"0 0% 0%\",\n          \"primary\": \"50 100% 60%\",\n          \"primary-foreground\": \"0 0% 0%\",\n          \"muted\": \"0 0% 68%\",\n          \"muted-foreground\": \"0 0% 35%\",\n          \"accent\": \"50 89% 74%\",\n          \"accent-foreground\": \"0 0% 0%\",\n          \"destructive\": \"355 78% 56%\",\n          \"destructive-foreground\": \"0 0% 100%\",\n          \"border\": \"0 0% 0%\"\n        }\n      }\n    },\n    {\n      \"name\": \"utils\",\n      \"type\": \"registry:lib\",\n      \"title\": \"Utils\",\n      \"dependencies\": [\n        \"clsx\",\n        \"tailwind-merge\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"lib/utils.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ]\n    },\n    {\n      \"name\": \"accordion\",\n      \"type\": \"registry:component\",\n      \"title\": \"Accordion\",\n      \"description\": \"This collapsible component let's your users read only the content they care about. 😌\",\n      \"dependencies\": [\n        \"@radix-ui/react-accordion\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Accordion.tsx\",\n          \"target\": \"components/retroui/Accordion.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"alert\",\n      \"type\": \"registry:component\",\n      \"title\": \"Alert\",\n      \"description\": \"Notify your users about important events and updates. 📣\",\n      \"dependencies\": [\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Alert.tsx\",\n          \"target\": \"components/retroui/Alert.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"avatar\",\n      \"type\": \"registry:component\",\n      \"title\": \"Avatar\",\n      \"description\": \"Default rounded avatar that can show your users profile picture. ✨\",\n      \"dependencies\": [\n        \"@radix-ui/react-avatar\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Avatar.tsx\",\n          \"target\": \"components/retroui/Avatar.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"badge\",\n      \"type\": \"registry:component\",\n      \"title\": \"Badge\",\n      \"description\": \"The component that looks like a button but isn't clickable!\",\n      \"dependencies\": [\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Badge.tsx\",\n          \"target\": \"components/retroui/Badge.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"button\",\n      \"type\": \"registry:component\",\n      \"title\": \"Retro Button\",\n      \"description\": \"This bold button makes sure your users click on it and perform the actions you want!\",\n      \"dependencies\": [\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Button.tsx\",\n          \"target\": \"components/retroui/Button.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"breadcrumb\",\n      \"type\": \"registry:component\",\n      \"title\": \"Breadcrumb\",\n      \"dependencies\": [\n        \"@radix-ui/react-slot\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Breadcrumb.tsx\",\n          \"target\": \"components/retroui/Breadcrumb.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"card\",\n      \"type\": \"registry:component\",\n      \"title\": \"Card\",\n      \"description\": \"A customizable card component to visualize your content. 📝\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Card.tsx\",\n          \"target\": \"components/retroui/Card.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"components/retroui/Text.tsx\",\n          \"target\": \"components/retroui/Text.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"checkbox\",\n      \"type\": \"registry:component\",\n      \"title\": \"Checkbox\",\n      \"description\": \"Let users confirm or reject an option.\",\n      \"dependencies\": [\n        \"@radix-ui/react-checkbox\",\n        \"class-variance-authority\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Checkbox.tsx\",\n          \"target\": \"components/retroui/Checkbox.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"dialog\",\n      \"type\": \"registry:component\",\n      \"title\": \"Dialog\",\n      \"description\": \"An impactful dialog that ensures your important messages and actions get the attention they deserve! 💬✨\",\n      \"dependencies\": [\n        \"@radix-ui/react-dialog\",\n        \"@radix-ui/react-visually-hidden\",\n        \"class-variance-authority\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Dialog.tsx\",\n          \"target\": \"components/retroui/Dialog.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"command\",\n      \"type\": \"registry:component\",\n      \"title\": \"Command\",\n      \"description\": \"Fast, keyboard-first command palette powered by cmdk.\",\n      \"dependencies\": [\n        \"cmdk\",\n        \"@radix-ui/react-dialog\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Command.tsx\",\n          \"target\": \"components/retroui/Command.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"drawer\",\n      \"type\": \"registry:component\",\n      \"title\": \"Drawer\",\n      \"description\": \"A component that can slide in from any side of the screen.\",\n      \"dependencies\": [\n        \"vaul\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Drawer.tsx\",\n          \"target\": \"components/retroui/Drawer.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"input\",\n      \"type\": \"registry:component\",\n      \"title\": \"Input\",\n      \"description\": \"This pretty input makes your users want to type stuff! ⌨️\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Input.tsx\",\n          \"target\": \"components/retroui/Input.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"label\",\n      \"type\": \"registry:component\",\n      \"title\": \"Label\",\n      \"description\": \"Label for form fields\",\n      \"dependencies\": [\n        \"@radix-ui/react-label\",\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Label.tsx\",\n          \"target\": \"components/retroui/Label.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"loader\",\n      \"type\": \"registry:component\",\n      \"title\": \"Loader\",\n      \"description\": \"A loading indicator\",\n      \"dependencies\": [\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Loader.tsx\",\n          \"target\": \"components/retroui/Loader.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"menu\",\n      \"type\": \"registry:component\",\n      \"title\": \"Menu\",\n      \"description\": \"Show your users a list of actions they can take. 📋\",\n      \"dependencies\": [\n        \"@radix-ui/react-dropdown-menu\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Menu.tsx\",\n          \"target\": \"components/retroui/Menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"context-menu\",\n      \"type\": \"registry:component\",\n      \"title\": \"Context Menu\",\n      \"description\": \"Show contextual actions on right-click.\",\n      \"dependencies\": [\n        \"@radix-ui/react-context-menu\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/ContextMenu.tsx\",\n          \"target\": \"components/retroui/ContextMenu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"popover\",\n      \"type\": \"registry:component\",\n      \"title\": \"Popover\",\n      \"description\": \"A handy small component for your little input needs...😉\",\n      \"dependencies\": [\n        \"@radix-ui/react-popover\",\n        \"class-variance-authority\"\n      ],\n      \"author\": \"Ankan Bhattacharya <https://github.com/ankan002>\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Popover.tsx\",\n          \"target\": \"components/retroui/Popover.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"progress\",\n      \"type\": \"registry:component\",\n      \"title\": \"Progress\",\n      \"description\": \"Show progress...\",\n      \"dependencies\": [\n        \"@radix-ui/react-progress\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Progress.tsx\",\n          \"target\": \"components/retroui/Progress.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"radio\",\n      \"type\": \"registry:component\",\n      \"title\": \"Radio\",\n      \"description\": \"Sometimes you need to pick multiple options! That's where the Radio component comes into play.\",\n      \"dependencies\": [\n        \"@radix-ui/react-radio-group\",\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Radio.tsx\",\n          \"target\": \"components/retroui/Radio.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"select\",\n      \"type\": \"registry:component\",\n      \"title\": \"Select\",\n      \"description\": \"Let your users pick what they want.\",\n      \"dependencies\": [\n        \"@radix-ui/react-select\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Select.tsx\",\n          \"target\": \"components/retroui/Select.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"slider\",\n      \"type\": \"registry:component\",\n      \"title\": \"Slider\",\n      \"description\": \"Let your users pick what they want.\",\n      \"dependencies\": [\n        \"@radix-ui/react-slider\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Slider.tsx\",\n          \"target\": \"components/retroui/Slider.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"sonner\",\n      \"type\": \"registry:component\",\n      \"title\": \"Sonner\",\n      \"description\": \"A beautiful toast component that can grab audience attention from any place.\",\n      \"dependencies\": [\n        \"sonner\",\n        \"lucide-react\",\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Sonner.tsx\",\n          \"target\": \"components/retroui/Sonner.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"switch\",\n      \"type\": \"registry:component\",\n      \"title\": \"Switch\",\n      \"description\": \"Let users to turn on or off your marketing emails or notifications.\",\n      \"dependencies\": [\n        \"@radix-ui/react-switch\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Switch.tsx\",\n          \"target\": \"components/retroui/Switch.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tab\",\n      \"type\": \"registry:component\",\n      \"title\": \"Tab\",\n      \"description\": \"Switch between different views using tabs.\",\n      \"dependencies\": [\n        \"@headlessui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Tab.tsx\",\n          \"target\": \"components/retroui/Tab.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"table\",\n      \"type\": \"registry:component\",\n      \"title\": \"Table\",\n      \"description\": \"Show your data in a tabular format. 📊\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Table.tsx\",\n          \"target\": \"components/retroui/Table.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"text\",\n      \"type\": \"registry:component\",\n      \"title\": \"text\",\n      \"description\": \"Show your texts in different styles. 💅\",\n      \"dependencies\": [\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Text.tsx\",\n          \"target\": \"components/retroui/Text.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"textarea\",\n      \"type\": \"registry:component\",\n      \"title\": \"textarea\",\n      \"description\": \"This pretty input makes your users want to type lots of stuff! ⌨️ ⌨\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Textarea.tsx\",\n          \"target\": \"components/retroui/Textarea.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toc\",\n      \"type\": \"registry:component\",\n      \"title\": \"Table of Contents\",\n      \"description\": \"Show your table of contents in a sidebar.\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/TableOfContents.tsx\",\n          \"target\": \"components/retroui/TableOfContents.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle\",\n      \"type\": \"registry:component\",\n      \"title\": \"Toggle\",\n      \"description\": \"This crazy toggling button keeps people toggling...😃\",\n      \"dependencies\": [\n        \"@radix-ui/react-toggle\",\n        \"class-variance-authority\"\n      ],\n      \"author\": \"Ankan Bhattacharya <https://github.com/ankan002>\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Toggle.tsx\",\n          \"target\": \"components/retroui/Toggle.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-group\",\n      \"type\": \"registry:component\",\n      \"title\": \"Toggle Group\",\n      \"description\": \"Group of toggling buttons...🤙\",\n      \"dependencies\": [\n        \"@radix-ui/react-toggle\",\n        \"@radix-ui/react-toggle-group\",\n        \"class-variance-authority\"\n      ],\n      \"author\": \"Ankan Bhattacharya <https://github.com/ankan002>\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Toggle.tsx\",\n          \"target\": \"components/retroui/Toggle.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"components/retroui/ToggleGroup.tsx\",\n          \"target\": \"components/retroui/ToggleGroup.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tooltip\",\n      \"type\": \"registry:component\",\n      \"title\": \"Tooltip\",\n      \"description\": \"A cool way to give your users a hint of what a component does...😉\",\n      \"dependencies\": [\n        \"@radix-ui/react-tooltip\",\n        \"class-variance-authority\"\n      ],\n      \"author\": \"Ankan Bhattacharya <https://github.com/ankan002>\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Tooltip.tsx\",\n          \"target\": \"components/retroui/Tooltip.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"area-chart\",\n      \"type\": \"registry:component\",\n      \"title\": \"Area Chart\",\n      \"description\": \"Beautiful area chart for data visualization with retro styling\",\n      \"dependencies\": [\n        \"recharts\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/charts/AreaChart.tsx\",\n          \"target\": \"components/retroui/charts/AreaChart.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"bar-chart\",\n      \"type\": \"registry:component\",\n      \"title\": \"Bar Chart\",\n      \"description\": \"Beautiful bar chart for data visualization with retro styling\",\n      \"dependencies\": [\n        \"recharts\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/charts/BarChart.tsx\",\n          \"target\": \"components/retroui/charts/BarChart.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"line-chart\",\n      \"type\": \"registry:component\",\n      \"title\": \"Line Chart\",\n      \"description\": \"Beautiful line chart for data visualization with retro styling\",\n      \"dependencies\": [\n        \"recharts\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/charts/LineChart.tsx\",\n          \"target\": \"components/retroui/charts/LineChart.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"pie-chart\",\n      \"type\": \"registry:component\",\n      \"title\": \"Pie Chart\",\n      \"description\": \"Beautiful pie chart for data visualization with retro styling\",\n      \"dependencies\": [\n        \"recharts\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/charts/PieChart.tsx\",\n          \"target\": \"components/retroui/charts/PieChart.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"accordion-style-default\",\n      \"title\": \"accordion-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/accordion.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/accordion-style-default.tsx\",\n          \"target\": \"components/retroui/preview/accordion-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"alert-style-default\",\n      \"title\": \"alert-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/alert.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/alert-style-default.tsx\",\n          \"target\": \"components/retroui/preview/alert-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"alert-style-solid\",\n      \"title\": \"alert-style-solid\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/alert.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/alert-style-solid.tsx\",\n          \"target\": \"components/retroui/preview/alert-style-solid.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"alert-style-with-icon\",\n      \"title\": \"alert-style-with-icon\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/alert.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/alert-style-with-icon.tsx\",\n          \"target\": \"components/retroui/preview/alert-style-with-icon.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"alert-style-all-status\",\n      \"title\": \"alert-style-all-status\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/alert.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/alert-style-all-status.tsx\",\n          \"target\": \"components/retroui/preview/alert-style-all-status.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"avatar-style-circle\",\n      \"title\": \"avatar-style-circle\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/avatar.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/avatar-style-circle.tsx\",\n          \"target\": \"components/retroui/preview/avatar-style-circle.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"avatar-style-fallbacks\",\n      \"title\": \"avatar-style-fallbacks\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/avatar.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/avatar-style-circle-fallbacks.tsx\",\n          \"target\": \"components/retroui/preview/avatar-style-circle-fallbacks.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"avatar-style-circle-sizes\",\n      \"title\": \"avatar-style-circle-sizes\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/avatar.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/avatar-style-circle-sizes.tsx\",\n          \"target\": \"components/retroui/preview/avatar-style-circle-sizes.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"badge-style-default\",\n      \"title\": \"badge-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/badge.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/badge-style-default.tsx\",\n          \"target\": \"components/retroui/preview/badge-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"badge-style-variants\",\n      \"title\": \"badge-style-variants\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/badge.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/badge-style-variants.tsx\",\n          \"target\": \"components/retroui/preview/badge-style-variants.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"badge-style-default\",\n      \"title\": \"badge-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/badge.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/badge-style-rounded.tsx\",\n          \"target\": \"components/retroui/preview/badge-style-rounded.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"badge-style-sizes\",\n      \"title\": \"badge-style-sizes\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/badge.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/badge-style-sizes.tsx\",\n          \"target\": \"components/retroui/preview/badge-style-sizes.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"button-style-default\",\n      \"title\": \"button-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/button-style-default.tsx\",\n          \"target\": \"components/retroui/preview/button-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"cssVars\": {\n        \"theme\": {\n          \"shadow-xs\": \"1px 1px 0 0 #000\",\n          \"shadow\": \"3px 3px 0 0 #000\",\n          \"shadow-md\": \"4px 4px 0 0 #000\"\n        },\n        \"light\": {\n          \"primary\": \"60 100% 60%\",\n          \"primary-foreground\": \"0 0% 0%\"\n        },\n        \"dark\": {\n          \"primary\": \"60 100% 50%\",\n          \"primary-foreground\": \"0 0% 0%\"\n        }\n      }\n    },\n    {\n      \"name\": \"button-style-secondary\",\n      \"title\": \"button-style-secondary\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/button-style-secondary.tsx\",\n          \"target\": \"components/retroui/preview/button-style-secondary.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"button-style-outline\",\n      \"title\": \"button-style-outline\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/button-style-outline.tsx\",\n          \"target\": \"components/retroui/preview/button-style-outline.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"button-style-link\",\n      \"title\": \"button-style-link\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/button-style-link.tsx\",\n          \"target\": \"components/retroui/preview/button-style-link.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"button-style-with-icon\",\n      \"title\": \"button-style-with-icon\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/button-style-with-icon.tsx\",\n          \"target\": \"components/retroui/preview/button-style-with-icon.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"card-style-default\",\n      \"title\": \"card-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/card.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/card-style-default.tsx\",\n          \"target\": \"components/retroui/preview/card-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"card-style-commerce\",\n      \"title\": \"card-style-commerce\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/card.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/card-style-commerce.tsx\",\n          \"target\": \"components/retroui/preview/card-style-commerce.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"card-style-testimonial\",\n      \"title\": \"card-style-testimonial\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/card.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/card-style-testimonial.tsx\",\n          \"target\": \"components/retroui/preview/card-style-testimonial.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"checkbox-style-default\",\n      \"title\": \"checkbox-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/checkbox.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/checkbox-style-default.tsx\",\n          \"target\": \"components/retroui/preview/checkbox-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"checkbox-style-toggle\",\n      \"title\": \"checkbox-style-toggle\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/checkbox.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/checkbox-style-variants.tsx\",\n          \"target\": \"components/retroui/preview/checkbox-style-variants.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"checkbox-style-default\",\n      \"title\": \"checkbox-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/checkbox.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/checkbox-style-sizes.tsx\",\n          \"target\": \"components/retroui/preview/checkbox-style-sizes.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"input-style-default\",\n      \"title\": \"input-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/input.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/input-style-default.tsx\",\n          \"target\": \"components/retroui/preview/input-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"input-style-with-label\",\n      \"title\": \"input-style-with-label\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/input.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/input-style-with-label.tsx\",\n          \"target\": \"components/retroui/preview/input-style-with-label.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"input-style-error\",\n      \"title\": \"input-style-error\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/input.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/input-style-error.tsx\",\n          \"target\": \"components/retroui/preview/input-style-error.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"menu-style-default\",\n      \"title\": \"menu-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/menu.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/menu-style-default.tsx\",\n          \"target\": \"components/retroui/preview/menu-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"progress-style-default\",\n      \"title\": \"progress-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/progress.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/progress-style-default.tsx\",\n          \"target\": \"components/retroui/preview/progress-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"radio-style-default\",\n      \"title\": \"radio-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/radio.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/radio-style-default.tsx\",\n          \"target\": \"components/retroui/preview/radio-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"radio-style-variants\",\n      \"title\": \"radio-style-variants\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/radio.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/radio-style-variants.tsx\",\n          \"target\": \"components/retroui/preview/radio-style-variants.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"radio-style-sizes\",\n      \"title\": \"radio-style-sizes\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/radio.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/radio-style-sizes.tsx\",\n          \"target\": \"components/retroui/preview/radio-style-sizes.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"select-style-default\",\n      \"title\": \"select-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/select.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/select-style-default.tsx\",\n          \"target\": \"components/retroui/preview/select-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"switch-style-default\",\n      \"title\": \"switch-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/switch.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/switch-style-default.tsx\",\n          \"target\": \"components/retroui/preview/switch-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"switch-style-disabled\",\n      \"title\": \"switch-style-disabled\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/switch.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/switch-style-disabled.tsx\",\n          \"target\": \"components/retroui/preview/switch-style-disabled.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"table-style-default\",\n      \"title\": \"table-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/table.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/table-style-default.tsx\",\n          \"target\": \"components/retroui/preview/table-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"table-with-checkbox\",\n      \"title\": \"table-with-checkbox\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/table.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/table-with-checkbox.tsx\",\n          \"target\": \"components/retroui/preview/table-with-checkbox.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"table-with-sticky-header\",\n      \"title\": \"table-with-sticky-header\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/table.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/table-with-sticky-header.tsx\",\n          \"target\": \"components/retroui/preview/table-with-sticky-header.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"textarea-style-default\",\n      \"title\": \"textarea-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/textarea.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/textarea-style-default.tsx\",\n          \"target\": \"components/retroui/preview/textarea-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"text-headings\",\n      \"title\": \"text-headings\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/text.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/text-headings.tsx\",\n          \"target\": \"components/retroui/preview/text-headings.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"typography-p\",\n      \"title\": \"typography-p\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/text.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/typography-p.tsx\",\n          \"target\": \"components/retroui/preview/typography-p.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tab-style-default\",\n      \"title\": \"tab-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/tab.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/tab-style-default.tsx\",\n          \"target\": \"components/retroui/preview/tab-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"dialog-style-default\",\n      \"title\": \"dialog-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/dialog.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/dialog-style-default.tsx\",\n          \"target\": \"components/retroui/preview/dialog-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"dialog-style-with-footer\",\n      \"title\": \"dialog-style-with-footer\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/dialog.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/dialog-style-with-footer.tsx\",\n          \"target\": \"components/retroui/preview/dialog-style-with-footer.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"dialog-style-width-variant\",\n      \"title\": \"dialog-style-width-variant\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/dialog.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/dialog-style-width-variant.tsx\",\n          \"target\": \"components/retroui/preview/dialog-style-width-variant.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"dialog-style-with-form\",\n      \"title\": \"dialog-style-with-form\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/dialog.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/dialog-style-with-form.tsx\",\n          \"target\": \"components/retroui/preview/dialog-style-with-form.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-style-default\",\n      \"title\": \"toggle-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-style-default.tsx\",\n          \"target\": \"components/retroui/preview/toggle-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-style-outline-muted\",\n      \"title\": \"toggle-style-outline-muted\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-style-outline-muted.tsx\",\n          \"target\": \"components/retroui/preview/toggle-style-outline-muted.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-style-outlined\",\n      \"title\": \"toggle-style-outlined\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-style-outlined.tsx\",\n          \"target\": \"components/retroui/preview/toggle-style-outlined.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-style-solid\",\n      \"title\": \"toggle-style-solid\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-style-solid.tsx\",\n          \"target\": \"components/retroui/preview/toggle-style-solid.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-group-style-default\",\n      \"title\": \"toggle-group-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\",\n        \"https://retroui.dev/r/toggle-group.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-group-style-default.tsx\",\n          \"target\": \"components/retroui/preview/toggle-group-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-group-style-outline-muted\",\n      \"title\": \"toggle-group-style-outline-muted\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\",\n        \"https://retroui.dev/r/toggle-group.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-group-style-outline-muted.tsx\",\n          \"target\": \"components/retroui/preview/toggle-group-style-outline-muted.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-group-style-outlined\",\n      \"title\": \"toggle-group-style-outlined\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\",\n        \"https://retroui.dev/r/toggle-group.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-group-style-outlined.tsx\",\n          \"target\": \"components/retroui/preview/toggle-group-style-outlined.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-group-style-solid\",\n      \"title\": \"toggle-group-style-solid\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\",\n        \"https://retroui.dev/r/toggle-group.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-group-style-solid.tsx\",\n          \"target\": \"components/retroui/preview/toggle-group-style-solid.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tooltip-style-default\",\n      \"title\": \"tooltip-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/tooltip.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/tooltip-style-default.tsx\",\n          \"target\": \"components/retroui/preview/tooltip-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tooltip-style-primary\",\n      \"title\": \"tooltip-style-primary\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/tooltip.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/tooltip-style-primary.tsx\",\n          \"target\": \"components/retroui/preview/tooltip-style-primary.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tooltip-style-solid\",\n      \"title\": \"tooltip-style-solid\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/tooltip.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/tooltip-style-solid.tsx\",\n          \"target\": \"components/retroui/preview/tooltip-style-solid.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"sonner-style-default\",\n      \"title\": \"sonner-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/sonner.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/sonner-style-default.tsx\",\n          \"target\": \"components/retroui/preview/sonner-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"sonner-style-error\",\n      \"title\": \"sonner-style-error\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/sonner.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/sonner-style-error.tsx\",\n          \"target\": \"components/retroui/preview/sonner-style-error.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"popover-style-default\",\n      \"title\": \"popover-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/popover.json\",\n        \"https://retroui.dev/r/label.json\",\n        \"https://retroui.dev/r/input.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/popover-style-default.tsx\",\n          \"target\": \"components/retroui/preview/popover-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"popover-style-default-shadow\",\n      \"title\": \"popover-style-default-shadow\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/popover.json\",\n        \"https://retroui.dev/r/label.json\",\n        \"https://retroui.dev/r/input.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/popover-style-default-shadow.tsx\",\n          \"target\": \"components/retroui/preview/popover-style-default-shadow.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    }\n  ]\n}"
  },
  {
    "path": "public/r/select-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"select-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"select-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/select-style-default.tsx\",\n      \"content\": \"import { Select } from \\\"@/components/retroui/Select\\\";\\nimport React from \\\"react\\\";\\n\\nexport default function SelectStyleDefault() {\\n  return (\\n    <Select>\\n      <Select.Trigger className=\\\"w-60\\\">\\n        <Select.Value placeholder=\\\"Pick your Pokemon\\\" />\\n      </Select.Trigger>\\n      <Select.Content>\\n        <Select.Group>\\n          <Select.Item value=\\\"pikachu\\\">Pikachu</Select.Item>\\n          <Select.Item value=\\\"charizard\\\">Charizard</Select.Item>\\n          <Select.Item value=\\\"bulbasaur\\\">Bulbasaur</Select.Item>\\n          <Select.Item value=\\\"squirtle\\\">Squirtle</Select.Item>\\n        </Select.Group>\\n      </Select.Content>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/select-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/select.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"select\",\n  \"type\": \"registry:component\",\n  \"title\": \"Select\",\n  \"description\": \"Let your users pick what they want.\",\n  \"dependencies\": [\n    \"@radix-ui/react-select\",\n    \"lucide-react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Select.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\nimport * as SelectPrimitive from \\\"@radix-ui/react-select\\\";\\nimport { Check, ChevronDown, ChevronUp } from \\\"lucide-react\\\";\\nimport React from \\\"react\\\";\\n\\nconst Select = SelectPrimitive.Root;\\n\\nconst SelectTrigger = ({\\n  className,\\n  children,\\n  ...props\\n}: SelectPrimitive.SelectTriggerProps) => {\\n  return (\\n    <SelectPrimitive.Trigger\\n      className={cn(\\n        \\\"flex h-10 rounded min-w-40 items-center shadow-md focus:shadow-xs justify-between border-2 border-input border-border bg-transparent px-4 py-2 placeholder:text-muted-foreground outline-none focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\\\",\\n        className,\\n      )}\\n      {...props}\\n    >\\n      {children}\\n      <SelectPrimitive.Icon asChild>\\n        <ChevronDown className=\\\"ml-2 h-4 w-4\\\" />\\n      </SelectPrimitive.Icon>\\n    </SelectPrimitive.Trigger>\\n  );\\n};\\n\\nconst SelectValue = SelectPrimitive.Value;\\n\\nconst SelectIcon = SelectPrimitive.Icon;\\n\\nconst SelectContent = ({\\n  className,\\n  children,\\n  position = \\\"popper\\\",\\n  ...props\\n}: SelectPrimitive.SelectContentProps) => {\\n  return (\\n    <SelectPrimitive.Portal>\\n      <SelectPrimitive.Content\\n        className={cn(\\n          \\\"relative z-50 min-w-[8rem] overflow-hidden border border-border bg-background text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\\\",\\n          position === \\\"popper\\\" &&\\n            \\\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\\\",\\n          className,\\n        )}\\n        position={position}\\n        {...props}\\n      >\\n        <SelectPrimitive.ScrollUpButton className=\\\"flex cursor-default items-center justify-center py-1 text-muted-foreground\\\">\\n          <ChevronUp className=\\\"h-4 w-4\\\" />\\n        </SelectPrimitive.ScrollUpButton>\\n        <SelectPrimitive.Viewport\\n          className={cn(\\n            position === \\\"popper\\\" &&\\n              \\\"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\\\",\\n          )}\\n        >\\n          {children}\\n        </SelectPrimitive.Viewport>\\n        <SelectPrimitive.ScrollDownButton className=\\\"flex cursor-default items-center justify-center py-1 text-muted-foreground\\\">\\n          <ChevronDown className=\\\"h-4 w-4\\\" />\\n        </SelectPrimitive.ScrollDownButton>\\n      </SelectPrimitive.Content>\\n    </SelectPrimitive.Portal>\\n  );\\n};\\n\\nconst SelectGroup = SelectPrimitive.Group;\\n\\nconst SelectItem = ({\\n  className,\\n  children,\\n  ...props\\n}: SelectPrimitive.SelectItemProps) => (\\n  <SelectPrimitive.Item\\n    className={cn(\\n      \\\"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-none data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground focus:bg-primary focus:text-primary-foreground data-disabled:pointer-events-none data-disabled:opacity-50\\\",\\n      className,\\n    )}\\n    {...props}\\n  >\\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\\n\\n    <span className=\\\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\\\">\\n      <SelectPrimitive.ItemIndicator>\\n        <Check className=\\\"h-4 w-4 text-foreground\\\" />\\n      </SelectPrimitive.ItemIndicator>\\n    </span>\\n  </SelectPrimitive.Item>\\n);\\nconst SelectLabel = SelectPrimitive.Label;\\nconst SelectSeparator = SelectPrimitive.Separator;\\n\\nconst SelectObj = Object.assign(Select, {\\n  Trigger: SelectTrigger,\\n  Value: SelectValue,\\n  Icon: SelectIcon,\\n  Content: SelectContent,\\n  Group: SelectGroup,\\n  Item: SelectItem,\\n  Label: SelectLabel,\\n  Separator: SelectSeparator,\\n});\\n\\nexport { SelectObj as Select };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Select.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/slider.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"slider\",\n  \"type\": \"registry:component\",\n  \"title\": \"Slider\",\n  \"description\": \"Let your users pick what they want.\",\n  \"dependencies\": [\n    \"@radix-ui/react-slider\",\n    \"lucide-react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Slider.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport * as SliderPrimitive from \\\"@radix-ui/react-slider\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst Slider = React.forwardRef<\\n  React.ElementRef<typeof SliderPrimitive.Root>,\\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\\n>(({ className, ...props }, ref) => (\\n  <SliderPrimitive.Root\\n    ref={ref}\\n    className={cn(\\n      \\\"relative flex w-full touch-none select-none items-center\\\",\\n      className,\\n    )}\\n    {...props}\\n  >\\n    <SliderPrimitive.Track className=\\\"relative h-3 w-full grow overflow-hidden bg-background border-2\\\">\\n      <SliderPrimitive.Range className=\\\"absolute h-full bg-primary\\\" />\\n    </SliderPrimitive.Track>\\n    <SliderPrimitive.Thumb className=\\\"block h-4.5 w-4.5 border-2 bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\\\" />\\n  </SliderPrimitive.Root>\\n));\\nSlider.displayName = SliderPrimitive.Root.displayName;\\n\\nexport { Slider };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Slider.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/sonner-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"sonner-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"sonner-style-default\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/sonner.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/sonner-style-default.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui\\\";\\nimport { toast } from \\\"sonner\\\";\\n\\nexport default function SonnerStyleDefault() {\\n  const onClick = () => {\\n    toast(\\\"Event has been created\\\", {\\n      description: \\\"Sunday, December 03, 2025\\\",\\n      cancel: {\\n        label: \\\"Undo\\\",\\n        onClick: () => {},\\n      },\\n    });\\n  };\\n\\n  return <Button onClick={onClick}>Show Toast</Button>;\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/sonner-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/sonner-style-error.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"sonner-style-error\",\n  \"type\": \"registry:block\",\n  \"title\": \"sonner-style-error\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/sonner.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/sonner-style-error.tsx\",\n      \"content\": \"import { Button } from \\\"@/components/retroui\\\";\\nimport { toast } from \\\"sonner\\\";\\n\\nexport default function SonnerStyleError() {\\n  const onClick = () => {\\n    toast.error(\\\"Oops! you ran into a pot hole\\\");\\n  };\\n\\n  return <Button onClick={onClick}>Show Toast (Error)</Button>;\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/sonner-style-error.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/sonner-style-rich-colors.json",
    "content": "{\n  \"name\": \"sonner-style-rich-colors\",\n  \"title\": \"sonner-style-rich-colors\",\n  \"type\": \"registry:block\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/sonner.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"dependencies\": [\"lucide-react\"],\n  \"files\": [\n    {\n      \"path\": \"preview/components/sonner-style-rich-colors.tsx\",\n      \"target\": \"components/retroui/preview/sonner-style-rich-colors.tsx\",\n      \"type\": \"registry:block\",\n      \"content\": \"import { Button } from \\\"@/components/retroui\\\";\\nimport { toast } from \\\"sonner\\\";\\n\\nexport default function SonnerStyleRichColors() {\\n  const onClick = () => {\\n    toast.success(\\\"Congrats man 🎉\\\", {\\n      richColors: true,\\n    });\\n  };\\n\\n  return <Button onClick={onClick}>Show Toast (Rick colors)</Button>;\\n}\\n\"\n    }\n  ]\n}\n"
  },
  {
    "path": "public/r/sonner-style-warning.json",
    "content": "{\n  \"name\": \"sonner-style-warning\",\n  \"title\": \"sonner-style-warning\",\n  \"type\": \"registry:block\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/sonner.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"dependencies\": [\"lucide-react\"],\n  \"files\": [\n    {\n      \"path\": \"preview/components/sonner-style-warning.tsx\",\n      \"target\": \"components/retroui/preview/sonner-style-warning.tsx\",\n      \"type\": \"registry:block\",\n      \"content\": \"import { Button } from \\\"@/components/retroui\\\";\\nimport { toast } from \\\"sonner\\\";\\n\\nexport default function SonnerStyleWarning() {\\n  const onClick = () => {\\n    toast.warning(\\\"This is a serious warning\\\");\\n  };\\n\\n  return <Button onClick={onClick}>Show Toast (Warning)</Button>;\\n}\\n\"\n    }\n  ]\n}\n"
  },
  {
    "path": "public/r/sonner.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"sonner\",\n  \"type\": \"registry:component\",\n  \"title\": \"Sonner\",\n  \"description\": \"A beautiful toast component that can grab audience attention from any place.\",\n  \"dependencies\": [\n    \"sonner\",\n    \"lucide-react\",\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Sonner.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Toaster as Sonner } from \\\"sonner\\\";\\n\\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\\n\\nconst Toaster = ({ ...props }: ToasterProps) => {\\n  return (\\n    <Sonner\\n      toastOptions={{\\n        classNames: {\\n          toast:\\n            \\\"h-auto w-full p-4 bg-background border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border flex items-center relative\\\",\\n          description:\\n            \\\"group-[.toast]:text-muted-foreground ml-2 text-sm font-sans\\\",\\n          actionButton:\\n            \\\"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 bg-background border-border shadow hover:shadow-xs hover:translate-[2px] duration-200 transition-all focus:shadow-none border-2 ml-auto h-fit min-w-fit\\\",\\n          cancelButton:\\n            \\\"group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 text-sm bg-background border-border shadow hover:shadow-xs hover:translate-[2px] duration-200 transition-all focus:shadow-none border-2 ml-auto h-fit min-w-fit\\\",\\n          title: \\\"ml-2 font-sans\\\",\\n          closeButton:\\n            \\\"absolute bg-background -top-1 -left-1 rounded-full p-0.5\\\",\\n        },\\n        unstyled: true,\\n      }}\\n      {...props}\\n    />\\n  );\\n};\\n\\nexport { Toaster };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Sonner.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/switch-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"switch-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"switch-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/switch.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/switch-style-default.tsx\",\n      \"content\": \"import { Switch } from \\\"@/components/retroui/Switch\\\";\\nimport React from \\\"react\\\";\\n\\nexport default function SwitchStyleDefault() {\\n  return (\\n    <div className=\\\"flex items-center space-x-2\\\">\\n      <Switch id=\\\"notification\\\" />\\n      <label htmlFor=\\\"notification\\\">Email Notifications</label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/switch-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/switch-style-disabled.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"switch-style-disabled\",\n  \"type\": \"registry:block\",\n  \"title\": \"switch-style-disabled\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/switch.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/switch-style-disabled.tsx\",\n      \"content\": \"import { Switch } from \\\"@/components/retroui/Switch\\\";\\nimport React from \\\"react\\\";\\n\\nexport default function SwitchStyleDisabled() {\\n  return (\\n    <div className=\\\"flex items-center space-x-2\\\">\\n      <Switch id=\\\"notification\\\" disabled />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/switch-style-disabled.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/switch.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"switch\",\n  \"type\": \"registry:component\",\n  \"title\": \"Switch\",\n  \"description\": \"Let users to turn on or off your marketing emails or notifications.\",\n  \"dependencies\": [\n    \"@radix-ui/react-switch\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Switch.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport * as SwitchPrimitives from \\\"@radix-ui/react-switch\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (\\n  <SwitchPrimitives.Root\\n    className={cn(\\n      \\\"peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary\\\",\\n      className,\\n    )}\\n    {...props}\\n  >\\n    <SwitchPrimitives.Thumb\\n      className={cn(\\n        \\\"pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background\\\",\\n      )}\\n    />\\n  </SwitchPrimitives.Root>\\n);\\n\\nexport { Switch };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Switch.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/tab-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tab-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"tab-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/tab.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/tab-style-default.tsx\",\n      \"content\": \"import { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList } from \\\"@/components/retroui/Tab\\\";\\n\\nexport default function TabStyleDefault() {\\n  return (\\n    <Tabs>\\n      <TabsTriggerList>\\n        <TabsTrigger>Home</TabsTrigger>\\n        <TabsTrigger>About</TabsTrigger>\\n        <TabsTrigger>Contact</TabsTrigger>\\n      </TabsTriggerList>\\n      <TabsPanels>\\n        <TabsContent>\\n          Welcome to RetroUI, a retro styled UI library built with React,\\n          Tailwind CSS & Headless UI.\\n        </TabsContent>\\n        <TabsContent>This is the about section!</TabsContent>\\n        <TabsContent>And, this is the contact section!</TabsContent>\\n      </TabsPanels>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/tab-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/tab.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tab\",\n  \"type\": \"registry:component\",\n  \"title\": \"Tab\",\n  \"description\": \"Switch between different views using tabs.\",\n  \"dependencies\": [\n    \"@headlessui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Tab.tsx\",\n      \"content\": \"import { cn } from \\\"@/lib/utils\\\";\\nimport {\\n  Tab,\\n  TabGroup,\\n  TabList,\\n  TabListProps,\\n  TabPanel,\\n  TabPanelProps,\\n  TabPanels,\\n  TabProps,\\n} from \\\"@headlessui/react\\\";\\n\\nconst Tabs = TabGroup;\\nconst TabsPanels = TabPanels;\\n\\ninterface ITabsTriggerList extends TabListProps {\\n  className?: string;\\n}\\nconst TabsTriggerList = ({\\n  children,\\n  className,\\n  ...props\\n}: ITabsTriggerList) => {\\n  return (\\n    <TabList className={cn(\\\"flex flex-row space-x-2\\\", className)} {...props}>\\n      {children}\\n    </TabList>\\n  );\\n};\\n\\ninterface ITabsTrigger extends TabProps {\\n  className?: string;\\n}\\nconst TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {\\n  return (\\n    <Tab\\n      className={cn(\\n        \\\"px-4 py-1 border-2 border-transparent data-selected:border-border data-selected:bg-primary data-selected:text-primary-foreground data-selected:font-semibold focus:outline-hidden\\\",\\n        className,\\n      )}\\n      {...props}\\n    >\\n      {children}\\n    </Tab>\\n  );\\n};\\n\\ninterface ITabsContent extends TabPanelProps {\\n  className?: string;\\n}\\nconst TabsContent = ({ children, className, ...props }: ITabsContent) => {\\n  return (\\n    <TabPanel\\n      className={cn(\\\"border-2 border-border mt-2 p-4\\\", className)}\\n      {...props}\\n    >\\n      {children}\\n    </TabPanel>\\n  );\\n};\\n\\nexport { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Tab.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/table-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"table-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"table-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/table-style-default.tsx\",\n      \"content\": \"import { Badge } from \\\"@/components/retroui\\\"\\nimport {\\n    Table,\\n} from \\\"@/components/retroui/Table\\\"\\n\\nconst invoices = [\\n    {\\n        invoice: \\\"INV001\\\",\\n        customer: \\\"John Doe\\\",\\n        paymentStatus: \\\"Paid\\\",\\n        totalAmount: \\\"$250.00\\\",\\n        paymentMethod: \\\"Credit Card\\\",\\n    },\\n    {\\n        invoice: \\\"INV002\\\",\\n        customer: \\\"Jane Doe\\\",\\n        paymentStatus: \\\"Pending\\\",\\n        totalAmount: \\\"$150.00\\\",\\n        paymentMethod: \\\"PayPal\\\",\\n    },\\n    {\\n        invoice: \\\"INV003\\\",\\n        customer: \\\"Mark Doe\\\",\\n        paymentStatus: \\\"Unpaid\\\",\\n        totalAmount: \\\"$350.00\\\",\\n        paymentMethod: \\\"Bank Transfer\\\",\\n    },\\n    {\\n        invoice: \\\"INV004\\\",\\n        customer: \\\"Robert Doe\\\",\\n        paymentStatus: \\\"Paid\\\",\\n        totalAmount: \\\"$450.00\\\",\\n        paymentMethod: \\\"Credit Card\\\",\\n    },\\n    {\\n        invoice: \\\"INV005\\\",\\n        customer: \\\"Isabella Doe\\\",\\n        paymentStatus: \\\"Paid\\\",\\n        totalAmount: \\\"$550.00\\\",\\n        paymentMethod: \\\"PayPal\\\",\\n    },\\n    {\\n        invoice: \\\"INV006\\\",\\n        customer: \\\"Mrs. Doe\\\",\\n        paymentStatus: \\\"Pending\\\",\\n        totalAmount: \\\"$200.00\\\",\\n        paymentMethod: \\\"Bank Transfer\\\",\\n    },\\n    {\\n        invoice: \\\"INV007\\\",\\n        customer: \\\"Mr. Doe\\\",\\n        paymentStatus: \\\"Unpaid\\\",\\n        totalAmount: \\\"$300.00\\\",\\n        paymentMethod: \\\"Credit Card\\\",\\n    },\\n]\\n\\nexport default function TableStyleDefault() {\\n    return (\\n        <Table className=\\\"max-w-lg mb-6 mx-auto\\\">\\n            <Table.Header>\\n                <Table.Row>\\n                    <Table.Head className=\\\"w-[100px]\\\">Invoice</Table.Head>\\n                    <Table.Head>Customer</Table.Head>\\n                    <Table.Head>Status</Table.Head>\\n                    <Table.Head>Method</Table.Head>\\n                    <Table.Head className=\\\"text-right\\\">Amount</Table.Head>\\n                </Table.Row>\\n            </Table.Header>\\n            <Table.Body>\\n                {invoices.map((invoice) => (\\n                    <Table.Row key={invoice.invoice}>\\n                        <Table.Cell className=\\\"font-medium\\\">{invoice.invoice}</Table.Cell>\\n                        <Table.Cell>{invoice.customer}</Table.Cell>\\n                        <Table.Cell><Badge variant=\\\"solid\\\" size=\\\"sm\\\">{invoice.paymentStatus}</Badge></Table.Cell>\\n                        <Table.Cell>{invoice.paymentMethod}</Table.Cell>\\n                        <Table.Cell className=\\\"text-right\\\">{invoice.totalAmount}</Table.Cell>\\n                    </Table.Row>\\n                ))}\\n            </Table.Body>\\n            <Table.Footer>\\n                <Table.Row>\\n                    <Table.Cell colSpan={4}>Total</Table.Cell>\\n                    <Table.Cell className=\\\"text-right\\\">$2,500.00</Table.Cell>\\n                </Table.Row>\\n            </Table.Footer>\\n        </Table>\\n    )\\n}\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/table-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/table-with-checkbox.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"table-with-checkbox\",\n  \"type\": \"registry:block\",\n  \"title\": \"table-with-checkbox\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/table-with-checkbox.tsx\",\n      \"content\": \"import { Badge, Checkbox } from \\\"@/components/retroui\\\"\\nimport {\\n  Table,\\n} from \\\"@/components/retroui/Table\\\"\\nimport { useState } from \\\"react\\\"\\n\\nconst employees = [\\n  {\\n    id: \\\"1\\\",\\n    name: \\\"Alice Johnson\\\",\\n    department: \\\"Engineering\\\",\\n    status: \\\"Active\\\",\\n    salary: \\\"85,000\\\",\\n  },\\n  {\\n    id: \\\"2\\\",\\n    name: \\\"Bob Smith\\\",\\n    department: \\\"Product\\\",\\n    status: \\\"Active\\\",\\n    salary: \\\"95,000\\\",\\n  },\\n  {\\n    id: \\\"3\\\",\\n    name: \\\"Carol Williams\\\",\\n    department: \\\"Design\\\",\\n    status: \\\"On Leave\\\",\\n    salary: \\\"70,000\\\",\\n  },\\n  {\\n    id: \\\"4\\\",\\n    name: \\\"David Brown\\\",\\n    department: \\\"Engineering\\\",\\n    status: \\\"Active\\\",\\n    salary: \\\"90,000\\\",\\n  },\\n  {\\n    id: \\\"5\\\",\\n    name: \\\"Eve Davis\\\",\\n    department: \\\"Engineering\\\",\\n    status: \\\"Active\\\",\\n    salary: \\\"75,000\\\",\\n  },\\n  {\\n    id: \\\"6\\\",\\n    name: \\\"Frank Wilson\\\",\\n    department: \\\"Marketing\\\",\\n    status: \\\"Inactive\\\",\\n    salary: \\\"80,000\\\",\\n  },\\n]\\n\\nexport default function TableWithCheckbox() {\\n  const [selectedEmployees, setSelectedEmployees] = useState<Set<string>>(new Set())\\n\\n  const handleSelectAll = (checked: boolean) => {\\n    if (checked) {\\n      setSelectedEmployees(new Set(employees.map(emp => emp.id)))\\n    } else {\\n      setSelectedEmployees(new Set())\\n    }\\n  }\\n\\n  const handleSelectEmployee = (employeeId: string, checked: boolean) => {\\n    const newSelected = new Set(selectedEmployees)\\n    if (checked) {\\n      newSelected.add(employeeId)\\n    } else {\\n      newSelected.delete(employeeId)\\n    }\\n    setSelectedEmployees(newSelected)\\n  }\\n\\n  const isAllSelected = selectedEmployees.size === employees.length\\n\\n  return (\\n    <Table className=\\\"max-w-lg mb-6 mx-auto\\\">\\n      <Table.Header>\\n        <Table.Row>\\n          <Table.Head className=\\\"w-[50px]\\\">\\n            <Checkbox\\n              checked={isAllSelected}\\n              onCheckedChange={handleSelectAll}\\n            />\\n          </Table.Head>\\n          <Table.Head>Name</Table.Head>\\n          <Table.Head>Department</Table.Head>\\n          <Table.Head>Status</Table.Head>\\n          <Table.Head className=\\\"text-right\\\">Salary</Table.Head>\\n        </Table.Row>\\n      </Table.Header>\\n      <Table.Body>\\n        {employees.map((employee) => (\\n          <Table.Row key={employee.id}>\\n            <Table.Cell>\\n              <Checkbox\\n                checked={selectedEmployees.has(employee.id)}\\n                onCheckedChange={(checked) => handleSelectEmployee(employee.id, Boolean(checked))}\\n              />\\n            </Table.Cell>\\n            <Table.Cell className=\\\"font-medium\\\">{employee.name}</Table.Cell>\\n            <Table.Cell>{employee.department}</Table.Cell>\\n            <Table.Cell>\\n              <Badge\\n                variant={employee.status === 'Active' ? 'default' : employee.status === 'On Leave' ? 'outline' : 'solid'}\\n                size=\\\"sm\\\"\\n              >\\n                {employee.status}\\n              </Badge>\\n            </Table.Cell>\\n            <Table.Cell className=\\\"text-right\\\">$ {employee.salary}</Table.Cell>\\n          </Table.Row>\\n        ))}\\n      </Table.Body>\\n      <Table.Footer>\\n        <Table.Row>\\n          <Table.Cell colSpan={4}>Selected: {selectedEmployees.size} / {employees.length}</Table.Cell>\\n          <Table.Cell className=\\\"text-right font-semibold\\\">$ {employees.reduce((total, employee) => total + Number(employee.salary.replace(',', '')), 0)}</Table.Cell>\\n        </Table.Row>\\n      </Table.Footer>\\n    </Table>\\n  )\\n}\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/table-with-checkbox.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/table-with-sticky-header.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"table-with-sticky-header\",\n  \"type\": \"registry:block\",\n  \"title\": \"table-with-sticky-header\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/table-with-sticky-header.tsx\",\n      \"content\": \"import { Badge } from \\\"@/components/retroui\\\";\\nimport { Table } from \\\"@/components/retroui/Table\\\";\\n\\nconst transactions = [\\n  {\\n    id: \\\"TXN001\\\",\\n    date: \\\"2024-01-15\\\",\\n    description: \\\"Payment from Customer A\\\",\\n    amount: \\\"$1,250.00\\\",\\n    category: \\\"Revenue\\\",\\n  },\\n  {\\n    id: \\\"TXN002\\\",\\n    date: \\\"2024-01-15\\\",\\n    description: \\\"Office Supplies Purchase\\\",\\n    amount: \\\"-$85.50\\\",\\n    category: \\\"Expense\\\",\\n  },\\n  {\\n    id: \\\"TXN003\\\",\\n    date: \\\"2024-01-16\\\",\\n    description: \\\"Software License Renewal\\\",\\n    category: \\\"Expense\\\",\\n    amount: \\\"-$299.99\\\",\\n  },\\n  {\\n    id: \\\"TXN004\\\",\\n    date: \\\"2024-01-16\\\",\\n    description: \\\"Payment from Customer B\\\",\\n    category: \\\"Revenue\\\",\\n    amount: \\\"$750.00\\\",\\n  },\\n  {\\n    id: \\\"TXN005\\\",\\n    date: \\\"2024-01-17\\\",\\n    description: \\\"Marketing Campaign\\\",\\n    category: \\\"Expense\\\",\\n    amount: \\\"-$500.00\\\",\\n  },\\n  {\\n    id: \\\"TXN006\\\",\\n    date: \\\"2024-01-17\\\",\\n    description: \\\"Freelancer Payment\\\",\\n    category: \\\"Expense\\\",\\n    amount: \\\"-$400.00\\\",\\n  },\\n  {\\n    id: \\\"TXN007\\\",\\n    date: \\\"2024-01-18\\\",\\n    description: \\\"Payment from Customer C\\\",\\n    category: \\\"Revenue\\\",\\n    amount: \\\"$2,100.00\\\",\\n  },\\n  {\\n    id: \\\"TXN008\\\",\\n    date: \\\"2024-01-18\\\",\\n    description: \\\"Equipment Purchase\\\",\\n    category: \\\"Expense\\\",\\n    amount: \\\"-$1,200.00\\\",\\n  },\\n  {\\n    id: \\\"TXN009\\\",\\n    date: \\\"2024-01-19\\\",\\n    description: \\\"Subscription Fee\\\",\\n    category: \\\"Expense\\\",\\n    amount: \\\"-$49.99\\\",\\n    status: \\\"Pending\\\",\\n  },\\n  {\\n    id: \\\"TXN010\\\",\\n    date: \\\"2024-01-19\\\",\\n    description: \\\"Payment from Customer D\\\",\\n    category: \\\"Revenue\\\",\\n    amount: \\\"$890.00\\\",\\n  },\\n  {\\n    id: \\\"TXN011\\\",\\n    date: \\\"2024-01-20\\\",\\n    description: \\\"Travel Expenses\\\",\\n    category: \\\"Expense\\\",\\n    amount: \\\"-$350.00\\\",\\n  },\\n  {\\n    id: \\\"TXN012\\\",\\n    date: \\\"2024-01-20\\\",\\n    description: \\\"Payment from Customer E\\\",\\n    category: \\\"Revenue\\\",\\n    amount: \\\"$1,500.00\\\",\\n  },\\n];\\n\\nexport default function TableWithStickyHeader() {\\n  return (\\n    <div className=\\\"h-96 border-2\\\">\\n      <Table className=\\\"border-0 shadow-none\\\">\\n        <Table.Header className=\\\"sticky top-0\\\">\\n          <Table.Row className=\\\"bg-secondary hover:bg-secondary\\\">\\n            <Table.Head className=\\\"w-[100px] text-secondary-foreground\\\">\\n              ID\\n            </Table.Head>\\n            <Table.Head className=\\\"text-secondary-foreground\\\">Date</Table.Head>\\n            <Table.Head className=\\\"text-secondary-foreground\\\">\\n              Description\\n            </Table.Head>\\n            <Table.Head className=\\\"text-secondary-foreground\\\">\\n              Category\\n            </Table.Head>\\n            <Table.Head className=\\\"text-right text-secondary-foreground\\\">\\n              Amount\\n            </Table.Head>\\n          </Table.Row>\\n        </Table.Header>\\n        <Table.Body>\\n          {transactions.map((transaction) => (\\n            <Table.Row key={transaction.id}>\\n              <Table.Cell className=\\\"font-medium\\\">{transaction.id}</Table.Cell>\\n              <Table.Cell>{transaction.date}</Table.Cell>\\n              <Table.Cell>{transaction.description}</Table.Cell>\\n              <Table.Cell>\\n                <Badge\\n                  variant={\\n                    transaction.category === \\\"Revenue\\\" ? \\\"default\\\" : \\\"outline\\\"\\n                  }\\n                  size=\\\"sm\\\"\\n                >\\n                  {transaction.category}\\n                </Badge>\\n              </Table.Cell>\\n              <Table.Cell\\n                className={`text-right font-medium ${transaction.amount.startsWith(\\\"-\\\") ? \\\"text-destructive\\\" : \\\"text-foreground\\\"}`}\\n              >\\n                {transaction.amount}\\n              </Table.Cell>\\n            </Table.Row>\\n          ))}\\n        </Table.Body>\\n      </Table>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/table-with-sticky-header.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/table.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"table\",\n  \"type\": \"registry:component\",\n  \"title\": \"Table\",\n  \"description\": \"Show your data in a tabular format. 📊\",\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Table.tsx\",\n      \"content\": \"import * as React from \\\"react\\\"\\n\\nimport { cn } from \\\"@/lib/utils\\\"\\n\\nconst Table = React.forwardRef<\\n    HTMLTableElement,\\n    React.HTMLAttributes<HTMLTableElement>\\n>(({ className, ...props }, ref) => (\\n    <div className=\\\"relative h-full w-full overflow-auto\\\">\\n        <table\\n            ref={ref}\\n            className={cn(\\\"w-full caption-bottom text-sm border-2 shadow-lg\\\", className)}\\n            {...props}\\n        />\\n    </div>\\n))\\nTable.displayName = \\\"Table\\\"\\n\\nconst TableHeader = React.forwardRef<\\n    HTMLTableSectionElement,\\n    React.HTMLAttributes<HTMLTableSectionElement>\\n>(({ className, ...props }, ref) => (\\n    <thead ref={ref} className={cn(\\\"[&_tr]:border-b bg-primary text-primary-foreground font-head\\\", className)} {...props} />\\n))\\nTableHeader.displayName = \\\"TableHeader\\\"\\n\\nconst TableBody = React.forwardRef<\\n    HTMLTableSectionElement,\\n    React.HTMLAttributes<HTMLTableSectionElement>\\n>(({ className, ...props }, ref) => (\\n    <tbody\\n        ref={ref}\\n        className={cn(\\\"[&_tr:last-child]:border-0\\\", className)}\\n        {...props}\\n    />\\n))\\nTableBody.displayName = \\\"TableBody\\\"\\n\\nconst TableFooter = React.forwardRef<\\n    HTMLTableSectionElement,\\n    React.HTMLAttributes<HTMLTableSectionElement>\\n>(({ className, ...props }, ref) => (\\n    <tfoot\\n        ref={ref}\\n        className={cn(\\n            \\\"border-t bg-accent font-medium [&>tr]:last:border-b-0\\\",\\n            className\\n        )}\\n        {...props}\\n    />\\n))\\nTableFooter.displayName = \\\"TableFooter\\\"\\n\\nconst TableRow = React.forwardRef<\\n    HTMLTableRowElement,\\n    React.HTMLAttributes<HTMLTableRowElement>\\n>(({ className, ...props }, ref) => (\\n    <tr\\n        ref={ref}\\n        className={cn(\\n            \\\"border-b transition-colors hover:bg-primary/50 hover:text-primary-foreground data-[state=selected]:bg-muted\\\",\\n            className\\n        )}\\n        {...props}\\n    />\\n))\\nTableRow.displayName = \\\"TableRow\\\"\\n\\nconst TableHead = React.forwardRef<\\n    HTMLTableCellElement,\\n    React.ThHTMLAttributes<HTMLTableCellElement>\\n>(({ className, ...props }, ref) => (\\n    <th\\n        ref={ref}\\n        className={cn(\\n            \\\"h-10 md:h-12 px-4 text-left align-middle font-medium text-primary-foreground [&:has([role=checkbox])]:pr-0\\\",\\n            className\\n        )}\\n        {...props}\\n    />\\n))\\nTableHead.displayName = \\\"TableHead\\\"\\n\\nconst TableCell = React.forwardRef<\\n    HTMLTableCellElement,\\n    React.TdHTMLAttributes<HTMLTableCellElement>\\n>(({ className, ...props }, ref) => (\\n    <td\\n        ref={ref}\\n        className={cn(\\\"p-2 md:p-3 align-middle [&:has([role=checkbox])]:pr-0\\\", className)}\\n        {...props}\\n    />\\n))\\nTableCell.displayName = \\\"TableCell\\\"\\n\\nconst TableCaption = React.forwardRef<\\n    HTMLTableCaptionElement,\\n    React.HTMLAttributes<HTMLTableCaptionElement>\\n>(({ className, ...props }, ref) => (\\n    <caption\\n        ref={ref}\\n        className={cn(\\\"my-2 text-sm text-muted-foreground\\\", className)}\\n        {...props}\\n    />\\n))\\nTableCaption.displayName = \\\"TableCaption\\\"\\n\\nconst TableObj = Object.assign(Table, {\\n    Header: TableHeader,\\n    Body: TableBody,\\n    Footer: TableFooter,\\n    Row: TableRow,\\n    Head: TableHead,\\n    Cell: TableCell,\\n    Caption: TableCaption,\\n})\\n\\nexport {\\n    TableObj as Table,\\n}\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Table.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/text-headings.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"text-headings\",\n  \"type\": \"registry:block\",\n  \"title\": \"text-headings\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/text.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/text-headings.tsx\",\n      \"content\": \"import { Text } from \\\"@/components/retroui/Text\\\";\\n\\nexport default function TextHeadings() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <Text as=\\\"h1\\\">This is H1</Text>\\n      <Text as=\\\"h2\\\">This is H2</Text>\\n      <Text as=\\\"h3\\\">This is H3</Text>\\n      <Text as=\\\"h4\\\">This is H4</Text>\\n      <Text as=\\\"h5\\\">This is H5</Text>\\n      <Text as=\\\"h6\\\">This is H6</Text>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/text-headings.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/text.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"text\",\n  \"type\": \"registry:component\",\n  \"title\": \"text\",\n  \"description\": \"Show your texts in different styles. 💅\",\n  \"dependencies\": [\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Text.tsx\",\n      \"content\": \"import { ElementType, HTMLAttributes } from \\\"react\\\";\\nimport { VariantProps, cva } from \\\"class-variance-authority\\\";\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst textVariants = cva(\\\"font-head\\\", {\\n  variants: {\\n    as: {\\n      p: \\\"font-sans text-base\\\",\\n      li: \\\"font-sans text-base\\\",\\n      a: \\\"font-sans text-base hover:underline underline-offset-2 decoration-primary\\\",\\n      h1: \\\"text-4xl lg:text-5xl font-bold\\\",\\n      h2: \\\"text-3xl lg:text-4xl font-semibold\\\",\\n      h3: \\\"text-2xl font-medium\\\",\\n      h4: \\\"text-xl font-normal\\\",\\n      h5: \\\"text-lg font-normal\\\",\\n      h6: \\\"text-base font-normal\\\",\\n    },\\n  },\\n  defaultVariants: {\\n    as: \\\"p\\\",\\n  },\\n});\\n\\ninterface TextProps\\n  extends Omit<HTMLAttributes<HTMLElement>, \\\"className\\\">,\\n    VariantProps<typeof textVariants> {\\n  className?: string;\\n}\\n\\nexport const Text = (props: TextProps) => {\\n  const { className, as, ...otherProps } = props;\\n  const Tag: ElementType = as || \\\"p\\\";\\n\\n  return (\\n    <Tag className={cn(textVariants({ as }), className)} {...otherProps} />\\n  );\\n};\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Text.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/textarea-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"textarea-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"textarea-style-default\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/textarea-style-default.tsx\",\n      \"content\": \"import { Textarea } from \\\"@/components/retroui/Textarea\\\";\\n\\nexport default function TextareaStyleDefault() {\\n  return (\\n    <Textarea\\n      rows={4}\\n      placeholder=\\\"type something...\\\"\\n      className=\\\"px-4 py-2 w-full border-2 shadow-md transition focus:outline-hidden focus:shadow-xs\\\"\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/textarea-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/textarea.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"textarea\",\n  \"type\": \"registry:component\",\n  \"title\": \"textarea\",\n  \"description\": \"This pretty input makes your users want to type lots of stuff! ⌨️ ⌨\",\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Textarea.tsx\",\n      \"content\": \"import React from \\\"react\\\";\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nexport function Textarea({\\n  type = \\\"text\\\",\\n  placeholder = \\\"Enter text...\\\",\\n  className = \\\"\\\",\\n  ...props\\n}) {\\n  return (\\n    <textarea\\n      placeholder={placeholder}\\n      rows={4}\\n      className={cn(\\n        \\\"px-4 py-2 w-full border-2 rounded border-border shadow-md transition focus:outline-hidden focus:shadow-xs placeholder:text-muted-foreground\\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Textarea.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toc.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toc\",\n  \"type\": \"registry:component\",\n  \"title\": \"Table of Contents\",\n  \"description\": \"Show your table of contents in a sidebar.\",\n  \"files\": [\n    {\n      \"path\": \"components/retroui/TableOfContents.tsx\",\n      \"content\": \"\\n\\\"use client\\\";\\n\\nimport { cn } from '@/lib/utils';\\nimport React, { useEffect, useState } from 'react';\\n\\ninterface TOCItem {\\n    title: string;\\n    url: string;\\n    level: number;\\n    items?: TOCItem[];\\n}\\n\\ninterface TableOfContentsProps {\\n    depth?: number;\\n    className?: string;\\n    children?: React.ReactNode;\\n}\\n\\nfunction generateTOCFromDOM(depth: number = 6): TOCItem[] {\\n    const headings: NodeListOf<HTMLHeadingElement> = document.querySelectorAll(\\n        Array.from({ length: depth }, (_, i) => `h${i + 1}`).join(', ')\\n    );\\n\\n    const items: TOCItem[] = [];\\n    const stack: TOCItem[] = [];\\n\\n    headings.forEach((heading) => {\\n        const level = parseInt(heading.tagName.charAt(1));\\n        const id = heading.id || heading.textContent?.toLowerCase().replace(/\\\\s+/g, '-').replace(/[^\\\\w-]/g, '') || '';\\n\\n        if (!heading.id && id) {\\n            heading.id = id;\\n        }\\n\\n        const item: TOCItem = {\\n            title: heading.textContent || '',\\n            url: `#${id}`,\\n            level,\\n        };\\n\\n        while (stack.length > 0 && stack[stack.length - 1].level >= level) {\\n            stack.pop();\\n        }\\n\\n        if (stack.length === 0) {\\n            items.push(item);\\n        } else {\\n            const parent = stack[stack.length - 1];\\n            if (!parent.items) parent.items = [];\\n            parent.items.push(item);\\n        }\\n\\n        stack.push(item);\\n    });\\n\\n    return items;\\n}\\n\\nfunction renderTOCItems(items: TOCItem[], level = 0, activeId: string | null) {\\n    if (!items || items.length === 0) return null;\\n\\n    return (\\n        <ul className={`space-y-1 ${level > 0 ? 'ml-4 mt-1' : ''}`}>\\n            {items.map((item, index) => {\\n                const isActive = activeId === item.url.substring(1);\\n                return (\\n                    <li key={index}>\\n                        <a\\n                            href={item.url}\\n                            className={`text-sm max-w-full truncate transition-colors block py-1 border-l-2 pl-2 ${\\n                                isActive \\n                                    ? 'text-black border-black bg-accent' \\n                                    : 'border-transparent hover:border-black hover:text-black'\\n                            }`}\\n                        >\\n                            {item.title}\\n                        </a>\\n                        {item.items && renderTOCItems(item.items, level + 1, activeId)}\\n                    </li>\\n                );\\n            })}\\n        </ul>\\n    );\\n}\\n\\nexport function TableOfContents({\\n    depth = 2,\\n    className = \\\"\\\",\\n    children,\\n}: TableOfContentsProps) {\\n    const [tocItems, setTocItems] = useState<TOCItem[]>([]);\\n    const [activeId, setActiveId] = useState<string | null>(null);\\n\\n    useEffect(() => {\\n        const items = generateTOCFromDOM(depth);\\n        setTocItems(items);\\n\\n        const observer = new MutationObserver(() => {\\n            const updatedItems = generateTOCFromDOM(depth);\\n            setTocItems(updatedItems);\\n        });\\n\\n        observer.observe(document.body, {\\n            childList: true,\\n            subtree: true,\\n            attributes: true,\\n            attributeFilter: ['id']\\n        });\\n\\n        return () => observer.disconnect();\\n    }, [depth]);\\n\\n    useEffect(() => {\\n        const observer = new IntersectionObserver(\\n            (entries) => {\\n                entries.forEach((entry) => {\\n                    if (entry.isIntersecting) {\\n                        setActiveId(entry.target.id);\\n                    }\\n                });\\n            },\\n            { rootMargin: '-20% 0% -35% 0%' }\\n        );\\n\\n        const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');\\n        headings.forEach((heading) => observer.observe(heading));\\n\\n        return () => observer.disconnect();\\n    }, []);\\n\\n    if (tocItems.length === 0) {\\n        return null;\\n    }\\n\\n    return (\\n        <div className={cn(\\\"border-2 shadow-md p-4 rounded w-52 h-60 overflow-y-auto sidebar-scroll\\\", className)}>\\n            {children}\\n            {renderTOCItems(tocItems, 0, activeId)}\\n        </div>\\n    );\\n}\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/TableOfContents.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toggle-group-outlined.json",
    "content": "{\n  \"name\": \"toggle-group-style-outline-muted\",\n  \"title\": \"toggle-group-style-outline-muted\",\n  \"type\": \"registry:block\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/toggle.json\",\n    \"https://retroui.dev/r/toggle-group.json\"\n  ],\n  \"dependencies\": [\"lucide-react\"],\n  \"files\": [\n    {\n      \"path\": \"preview/components/toggle-group-style-outline-muted.tsx\",\n      \"target\": \"components/retroui/preview/toggle-group-style-outline-muted.tsx\",\n      \"type\": \"registry:block\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@/components/retroui\\\";\\nimport { Bold, Italic, Underline } from \\\"lucide-react\\\";\\n\\nexport default function ToggleGroupStyleOutlined() {\\n  return (\\n    <ToggleGroup type=\\\"multiple\\\" variant=\\\"outlined\\\">\\n      <ToggleGroupItem value=\\\"bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n\\n      <ToggleGroupItem value=\\\"italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n\\n      <ToggleGroupItem value=\\\"underline\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n}\\n\"\n    }\n  ]\n}\n"
  },
  {
    "path": "public/r/toggle-group-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-group-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"toggle-group-style-default\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/toggle.json\",\n    \"https://retroui.dev/r/toggle-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/toggle-group-style-default.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@/components/retroui\\\";\\nimport { Bold, Italic, Underline } from \\\"lucide-react\\\";\\n\\nexport default function ToggleGroupStyleDefault() {\\n  return (\\n    <ToggleGroup type=\\\"multiple\\\" variant=\\\"default\\\">\\n      <ToggleGroupItem value=\\\"bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n\\n      <ToggleGroupItem value=\\\"italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n\\n      <ToggleGroupItem value=\\\"underline\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/toggle-group-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toggle-group-style-outline-muted.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-group-style-outline-muted\",\n  \"type\": \"registry:block\",\n  \"title\": \"toggle-group-style-outline-muted\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/toggle.json\",\n    \"https://retroui.dev/r/toggle-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/toggle-group-style-outline-muted.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@/components/retroui\\\";\\nimport { Bold, Italic, Underline } from \\\"lucide-react\\\";\\n\\nexport default function ToggleGroupStyleOutlineMuted() {\\n  return (\\n    <ToggleGroup type=\\\"multiple\\\" variant=\\\"outline-muted\\\">\\n      <ToggleGroupItem value=\\\"bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n\\n      <ToggleGroupItem value=\\\"italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n\\n      <ToggleGroupItem value=\\\"underline\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/toggle-group-style-outline-muted.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toggle-group-style-outlined.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-group-style-outlined\",\n  \"type\": \"registry:block\",\n  \"title\": \"toggle-group-style-outlined\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/toggle.json\",\n    \"https://retroui.dev/r/toggle-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/toggle-group-style-outlined.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@/components/retroui\\\";\\nimport { Bold, Italic, Underline } from \\\"lucide-react\\\";\\n\\nexport default function ToggleGroupStyleOutlined() {\\n  return (\\n    <ToggleGroup type=\\\"multiple\\\" variant=\\\"outlined\\\">\\n      <ToggleGroupItem value=\\\"bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n\\n      <ToggleGroupItem value=\\\"italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n\\n      <ToggleGroupItem value=\\\"underline\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/toggle-group-style-outlined.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toggle-group-style-solid.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-group-style-solid\",\n  \"type\": \"registry:block\",\n  \"title\": \"toggle-group-style-solid\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/toggle.json\",\n    \"https://retroui.dev/r/toggle-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/toggle-group-style-solid.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@/components/retroui\\\";\\nimport { Bold, Italic, Underline } from \\\"lucide-react\\\";\\n\\nexport default function ToggleGroupStyleSolid() {\\n  return (\\n    <ToggleGroup type=\\\"multiple\\\" variant=\\\"solid\\\">\\n      <ToggleGroupItem value=\\\"bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n\\n      <ToggleGroupItem value=\\\"italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n\\n      <ToggleGroupItem value=\\\"underline\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/toggle-group-style-solid.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toggle-group.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-group\",\n  \"type\": \"registry:component\",\n  \"title\": \"Toggle Group\",\n  \"author\": \"Ankan Bhattacharya <https://github.com/ankan002>\",\n  \"description\": \"Group of toggling buttons...🤙\",\n  \"dependencies\": [\n    \"@radix-ui/react-toggle\",\n    \"@radix-ui/react-toggle-group\",\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Toggle.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport * as TogglePrimitive from \\\"@radix-ui/react-toggle\\\";\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst toggleVariants = cva(\\n    \\\"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\\\",\\n    {\\n        variants: {\\n            variant: {\\n                default:\\n                    \\\"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted\\\",\\n                outlined:\\n                    \\\"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\\\",\\n                solid: \\\"border-2 border-input bg-transparent hover:bg-secondary hover:text-secondary-foreground hover:border-secondary data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground data-[state=on]:border-secondary\\\",\\n                \\\"outline-muted\\\":\\n                    \\\"border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted\\\",\\n            },\\n            size: {\\n                default: \\\"h-10 px-3 min-w-10\\\",\\n                sm: \\\"h-9 px-2.5 min-w-9\\\",\\n                lg: \\\"h-11 px-5 min-w-11\\\",\\n            },\\n        },\\n        defaultVariants: {\\n            variant: \\\"default\\\",\\n            size: \\\"default\\\",\\n        },\\n    },\\n);\\n\\nconst Toggle = React.forwardRef<\\n    React.ElementRef<typeof TogglePrimitive.Root>,\\n    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\\n        VariantProps<typeof toggleVariants>\\n>(({ className, variant, size, ...props }, ref) => (\\n    <TogglePrimitive.Root\\n        ref={ref}\\n        className={cn(toggleVariants({ variant, size, className }))}\\n        {...props}\\n    />\\n));\\n\\nToggle.displayName = TogglePrimitive.Root.displayName;\\n\\nexport { Toggle, toggleVariants };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Toggle.tsx\"\n    },\n    {\n      \"path\": \"components/retroui/ToggleGroup.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport * as ToggleGroupPrimitive from \\\"@radix-ui/react-toggle-group\\\";\\nimport { type VariantProps } from \\\"class-variance-authority\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\nimport { toggleVariants } from \\\"./Toggle\\\";\\n\\nconst ToggleGroupContext = React.createContext<\\n    VariantProps<typeof toggleVariants>\\n>({\\n    size: \\\"default\\\",\\n    variant: \\\"default\\\",\\n});\\n\\nconst ToggleGroup = React.forwardRef<\\n    React.ElementRef<typeof ToggleGroupPrimitive.Root>,\\n    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\\n        VariantProps<typeof toggleVariants>\\n>(({ className, variant, size, children, ...props }, ref) => (\\n    <ToggleGroupPrimitive.Root\\n        ref={ref}\\n        className={cn(\\\"flex items-center justify-center gap-1\\\", className)}\\n        {...props}\\n    >\\n        <ToggleGroupContext.Provider value={{ variant, size }}>\\n            {children}\\n        </ToggleGroupContext.Provider>\\n    </ToggleGroupPrimitive.Root>\\n));\\n\\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;\\n\\nconst ToggleGroupItem = React.forwardRef<\\n    React.ElementRef<typeof ToggleGroupPrimitive.Item>,\\n    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\\n        VariantProps<typeof toggleVariants>\\n>(({ className, children, variant, size, ...props }, ref) => {\\n    const context = React.useContext(ToggleGroupContext);\\n\\n    return (\\n        <ToggleGroupPrimitive.Item\\n            ref={ref}\\n            className={cn(\\n                toggleVariants({\\n                    variant: context.variant || variant,\\n                    size: context.size || size,\\n                }),\\n                className,\\n            )}\\n            {...props}\\n        >\\n            {children}\\n        </ToggleGroupPrimitive.Item>\\n    );\\n});\\n\\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;\\n\\nexport { ToggleGroup, ToggleGroupItem };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/ToggleGroup.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toggle-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"toggle-style-default\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/toggle.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/toggle-style-default.tsx\",\n      \"content\": \"import { Toggle } from \\\"@/components/retroui\\\";\\nimport { Bold } from \\\"lucide-react\\\";\\n\\nexport default function ToggleStyleDefault() {\\n  return (\\n    <Toggle>\\n      <Bold />\\n    </Toggle>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/toggle-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toggle-style-outline-muted.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-style-outline-muted\",\n  \"type\": \"registry:block\",\n  \"title\": \"toggle-style-outline-muted\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/toggle.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/toggle-style-outline-muted.tsx\",\n      \"content\": \"import { Toggle } from \\\"@/components/retroui\\\";\\nimport { Bold } from \\\"lucide-react\\\";\\n\\nexport default function ToggleStyleOutlineMuted() {\\n  return (\\n    <Toggle variant=\\\"outline-muted\\\">\\n      <Bold />\\n    </Toggle>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/toggle-style-outline-muted.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toggle-style-outlined.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-style-outlined\",\n  \"type\": \"registry:block\",\n  \"title\": \"toggle-style-outlined\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/toggle.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/toggle-style-outlined.tsx\",\n      \"content\": \"import { Toggle } from \\\"@/components/retroui\\\";\\nimport { Bold } from \\\"lucide-react\\\";\\n\\nexport default function ToggleStyleOutlined() {\\n  return (\\n    <Toggle variant=\\\"outlined\\\">\\n      <Bold />\\n    </Toggle>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/toggle-style-outlined.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toggle-style-solid.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-style-solid\",\n  \"type\": \"registry:block\",\n  \"title\": \"toggle-style-solid\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/toggle.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/toggle-style-solid.tsx\",\n      \"content\": \"import { Toggle } from \\\"@/components/retroui\\\";\\nimport { Italic } from \\\"lucide-react\\\";\\n\\nexport default function ToggleStyleSolid() {\\n  return (\\n    <Toggle variant=\\\"solid\\\">\\n      <Italic /> Italics\\n    </Toggle>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/toggle-style-solid.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/toggle.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle\",\n  \"type\": \"registry:component\",\n  \"title\": \"Toggle\",\n  \"author\": \"Ankan Bhattacharya <https://github.com/ankan002>\",\n  \"description\": \"This crazy toggling button keeps people toggling...😃\",\n  \"dependencies\": [\n    \"@radix-ui/react-toggle\",\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Toggle.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport * as TogglePrimitive from \\\"@radix-ui/react-toggle\\\";\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nconst toggleVariants = cva(\\n    \\\"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\\\",\\n    {\\n        variants: {\\n            variant: {\\n                default:\\n                    \\\"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted\\\",\\n                outlined:\\n                    \\\"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\\\",\\n                solid: \\\"border-2 border-input bg-transparent hover:bg-secondary hover:text-secondary-foreground hover:border-secondary data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground data-[state=on]:border-secondary\\\",\\n                \\\"outline-muted\\\":\\n                    \\\"border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted\\\",\\n            },\\n            size: {\\n                default: \\\"h-10 px-3 min-w-10\\\",\\n                sm: \\\"h-9 px-2.5 min-w-9\\\",\\n                lg: \\\"h-11 px-5 min-w-11\\\",\\n            },\\n        },\\n        defaultVariants: {\\n            variant: \\\"default\\\",\\n            size: \\\"default\\\",\\n        },\\n    },\\n);\\n\\nconst Toggle = React.forwardRef<\\n    React.ElementRef<typeof TogglePrimitive.Root>,\\n    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\\n        VariantProps<typeof toggleVariants>\\n>(({ className, variant, size, ...props }, ref) => (\\n    <TogglePrimitive.Root\\n        ref={ref}\\n        className={cn(toggleVariants({ variant, size, className }))}\\n        {...props}\\n    />\\n));\\n\\nToggle.displayName = TogglePrimitive.Root.displayName;\\n\\nexport { Toggle, toggleVariants };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Toggle.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/tooltip-style-default.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tooltip-style-default\",\n  \"type\": \"registry:block\",\n  \"title\": \"tooltip-style-default\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/tooltip.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/tooltip-style-default.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Button, Tooltip } from \\\"@/components/retroui\\\";\\n\\nexport default function TooltipStyleDefault() {\\n  return (\\n    <Tooltip.Provider>\\n      <Tooltip>\\n        <Tooltip.Trigger asChild>\\n          <Button variant=\\\"outline\\\">Hover</Button>\\n        </Tooltip.Trigger>\\n        <Tooltip.Content variant=\\\"default\\\">Add to Library</Tooltip.Content>\\n      </Tooltip>\\n    </Tooltip.Provider>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/tooltip-style-default.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/tooltip-style-primary.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tooltip-style-primary\",\n  \"type\": \"registry:block\",\n  \"title\": \"tooltip-style-primary\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/tooltip.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/tooltip-style-primary.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Button, Tooltip } from \\\"@/components/retroui\\\";\\n\\nexport default function TooltipStylePrimary() {\\n  return (\\n    <Tooltip.Provider>\\n      <Tooltip>\\n        <Tooltip.Trigger asChild>\\n          <Button variant=\\\"outline\\\">Hover</Button>\\n        </Tooltip.Trigger>\\n        <Tooltip.Content variant=\\\"primary\\\">Add to Library</Tooltip.Content>\\n      </Tooltip>\\n    </Tooltip.Provider>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/tooltip-style-primary.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/tooltip-style-solid.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tooltip-style-solid\",\n  \"type\": \"registry:block\",\n  \"title\": \"tooltip-style-solid\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/tooltip.json\",\n    \"https://retroui.dev/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/tooltip-style-solid.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Button, Tooltip } from \\\"@/components/retroui\\\";\\n\\nexport default function TooltipStyleSolid() {\\n  return (\\n    <Tooltip.Provider>\\n      <Tooltip>\\n        <Tooltip.Trigger asChild>\\n          <Button variant=\\\"outline\\\">Hover</Button>\\n        </Tooltip.Trigger>\\n        <Tooltip.Content variant=\\\"solid\\\">Add to Library</Tooltip.Content>\\n      </Tooltip>\\n    </Tooltip.Provider>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/tooltip-style-solid.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/tooltip.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tooltip\",\n  \"type\": \"registry:component\",\n  \"title\": \"Tooltip\",\n  \"description\": \"A cool way to give your users a hint of what a component does...😉\",\n  \"dependencies\": [\n    \"@radix-ui/react-tooltip\",\n    \"class-variance-authority\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"components/retroui/Tooltip.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport * as TooltipPrimitive from \\\"@radix-ui/react-tooltip\\\";\\n\\nimport { cn } from \\\"@/lib/utils\\\";\\nimport { cva, VariantProps } from \\\"class-variance-authority\\\";\\n\\nconst tooltipContentVariants = cva(\\n  \\\"z-50 overflow-hidden border-2 border-border bg-background px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]\\\",\\n  {\\n    variants: {\\n      variant: {\\n        default: \\\"bg-background text-foreground\\\",\\n        primary: \\\"bg-primary text-primary-foreground\\\",\\n        solid: \\\"bg-black text-white\\\",\\n      },\\n    },\\n    defaultVariants: {\\n      variant: \\\"default\\\",\\n    },\\n  },\\n);\\n\\nconst TooltipProvider = TooltipPrimitive.Provider;\\n\\nconst Tooltip = TooltipPrimitive.Root;\\n\\nconst TooltipTrigger = TooltipPrimitive.Trigger;\\n\\nconst TooltipContent = React.forwardRef<\\n  React.ElementRef<typeof TooltipPrimitive.Content>,\\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &\\n    VariantProps<typeof tooltipContentVariants>\\n>(({ className, sideOffset = 4, variant, ...props }, ref) => (\\n  <TooltipPrimitive.Portal>\\n    <TooltipPrimitive.Content\\n      ref={ref}\\n      sideOffset={sideOffset}\\n      className={cn(\\n        tooltipContentVariants({\\n          variant,\\n          className,\\n        }),\\n      )}\\n      {...props}\\n    />\\n  </TooltipPrimitive.Portal>\\n));\\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\\n\\nconst TooltipObject = Object.assign(Tooltip, {\\n  Trigger: TooltipTrigger,\\n  Content: TooltipContent,\\n  Provider: TooltipProvider,\\n});\\n\\nexport { TooltipObject as Tooltip };\\n\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/retroui/Tooltip.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/typography-p.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"typography-p\",\n  \"type\": \"registry:block\",\n  \"title\": \"typography-p\",\n  \"registryDependencies\": [\n    \"https://retroui.dev/r/text.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"preview/components/typography-p.tsx\",\n      \"content\": \"import { Text } from \\\"@/components/retroui/Text\\\";\\n\\nexport default function TextParagraph() {\\n  return (\\n    <Text className=\\\"font-sans text-base\\\">\\n      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos,\\n      doloremque inventore nesciunt quo sequi veniam impedit alias libero\\n      dolorem tempore quia esse fugit fuga iste aliquam expedita molestias\\n      iusto?\\n    </Text>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\",\n      \"target\": \"components/retroui/preview/typography-p.tsx\"\n    }\n  ]\n}"
  },
  {
    "path": "public/r/utils.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"utils\",\n  \"type\": \"registry:lib\",\n  \"title\": \"Utils\",\n  \"dependencies\": [\n    \"clsx\",\n    \"tailwind-merge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"lib/utils.ts\",\n      \"content\": \"import clsx from \\\"clsx\\\";\\nimport { ClassNameValue, twMerge } from \\\"tailwind-merge\\\";\\n\\nexport function cn(...classes: ClassNameValue[]) {\\n  return twMerge(clsx(classes));\\n}\\n\",\n      \"type\": \"registry:lib\"\n    }\n  ]\n}"
  },
  {
    "path": "registry.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry.json\",\n  \"name\": \"RetroUI\",\n  \"homepage\": \"https://retroui.dev\",\n  \"dependencies\": [\n    \"tailwind-merge\",\n    \"clsx\"\n  ],\n  \"items\": [\n    {\n      \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n      \"name\": \"retroui-theme\",\n      \"title\": \"retroui-theme\",\n      \"type\": \"registry:style\",\n      \"cssVars\": {\n        \"theme\": {\n          \"shadow-xs\": \"1px 1px 0 0 var(--border)\",\n          \"shadow-sm\": \"2px 2px 0 0 var(--border)\",\n          \"shadow\": \"3px 3px 0 0 var(--border)\",\n          \"shadow-md\": \"4px 4px 0 0 var(--border)\",\n          \"shadow-lg\": \"6px 6px 0 0 var(--border)\",\n          \"shadow-xl\": \"10px 10px 0 1px var(--border)\",\n          \"shadow-2xl\": \"16px 16px 0 1px var(--border)\"\n        },\n        \"light\": {\n          \"background\": \"0 0% 100%\",\n          \"foreground\": \"0 0% 0%\",\n          \"card\": \"0 0% 100%\",\n          \"card-foreground\": \"0 0% 0%\",\n          \"primary\": \"50 100% 60%\",\n          \"primary-foreground\": \"0 0% 0%\",\n          \"muted\": \"0 0% 68%\",\n          \"muted-foreground\": \"0 0% 35%\",\n          \"accent\": \"50 89% 74%\",\n          \"accent-foreground\": \"0 0% 0%\",\n          \"destructive\": \"355 78% 56%\",\n          \"destructive-foreground\": \"0 0% 100%\",\n          \"border\": \"0 0% 0%\"\n        },\n        \"dark\": {\n          \"background\": \"0 0% 100%\",\n          \"foreground\": \"0 0% 0%\",\n          \"card\": \"0 0% 100%\",\n          \"card-foreground\": \"0 0% 0%\",\n          \"primary\": \"50 100% 60%\",\n          \"primary-foreground\": \"0 0% 0%\",\n          \"muted\": \"0 0% 68%\",\n          \"muted-foreground\": \"0 0% 35%\",\n          \"accent\": \"50 89% 74%\",\n          \"accent-foreground\": \"0 0% 0%\",\n          \"destructive\": \"355 78% 56%\",\n          \"destructive-foreground\": \"0 0% 100%\",\n          \"border\": \"0 0% 0%\"\n        }\n      }\n    },\n    {\n      \"name\": \"utils\",\n      \"type\": \"registry:lib\",\n      \"title\": \"Utils\",\n      \"dependencies\": [\n        \"clsx\",\n        \"tailwind-merge\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"lib/utils.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ]\n    },\n    {\n      \"name\": \"accordion\",\n      \"type\": \"registry:component\",\n      \"title\": \"Accordion\",\n      \"description\": \"This collapsible component let's your users read only the content they care about. 😌\",\n      \"dependencies\": [\n        \"@radix-ui/react-accordion\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Accordion.tsx\",\n          \"target\": \"components/retroui/Accordion.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"alert\",\n      \"type\": \"registry:component\",\n      \"title\": \"Alert\",\n      \"description\": \"Notify your users about important events and updates. 📣\",\n      \"dependencies\": [\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Alert.tsx\",\n          \"target\": \"components/retroui/Alert.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"avatar\",\n      \"type\": \"registry:component\",\n      \"title\": \"Avatar\",\n      \"description\": \"Default rounded avatar that can show your users profile picture. ✨\",\n      \"dependencies\": [\n        \"@radix-ui/react-avatar\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Avatar.tsx\",\n          \"target\": \"components/retroui/Avatar.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"badge\",\n      \"type\": \"registry:component\",\n      \"title\": \"Badge\",\n      \"description\": \"The component that looks like a button but isn't clickable!\",\n      \"dependencies\": [\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Badge.tsx\",\n          \"target\": \"components/retroui/Badge.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"button\",\n      \"type\": \"registry:component\",\n      \"title\": \"Retro Button\",\n      \"description\": \"This bold button makes sure your users click on it and perform the actions you want!\",\n      \"dependencies\": [\n        \"class-variance-authority\",\n        \"@radix-ui/react-slot\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Button.tsx\",\n          \"target\": \"components/retroui/Button.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"breadcrumb\",\n      \"type\": \"registry:component\",\n      \"title\": \"Breadcrumb\",\n      \"dependencies\": [\n        \"@radix-ui/react-slot\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Breadcrumb.tsx\",\n          \"target\": \"components/retroui/Breadcrumb.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"card\",\n      \"type\": \"registry:component\",\n      \"title\": \"Card\",\n      \"description\": \"A customizable card component to visualize your content. 📝\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Card.tsx\",\n          \"target\": \"components/retroui/Card.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"components/retroui/Text.tsx\",\n          \"target\": \"components/retroui/Text.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"calendar\",\n      \"type\": \"registry:component\",\n      \"title\": \"Calendar\",\n      \"description\": \"A customizable calendar component for showing dates. 📝\",\n      \"dependencies\": [\n        \"react-day-picker\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Calendar.tsx\",\n          \"target\": \"components/retroui/Calendar.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"components/retroui/Button.tsx\",\n          \"target\": \"components/retroui/Button.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"carousel\",\n      \"type\": \"registry:component\",\n      \"title\": \"Carousel\",\n      \"description\": \"A customizable carousel component to show animated cards\",\n      \"dependencies\": [\n        \"embla-carousel-react\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Carousel.tsx\",\n          \"target\": \"components/retroui/Carousel.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"components/retroui/Button.tsx\",\n          \"target\": \"components/retroui/Button.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"checkbox\",\n      \"type\": \"registry:component\",\n      \"title\": \"Checkbox\",\n      \"description\": \"Let users confirm or reject an option.\",\n      \"dependencies\": [\n        \"@radix-ui/react-checkbox\",\n        \"class-variance-authority\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Checkbox.tsx\",\n          \"target\": \"components/retroui/Checkbox.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"dialog\",\n      \"type\": \"registry:component\",\n      \"title\": \"Dialog\",\n      \"description\": \"An impactful dialog that ensures your important messages and actions get the attention they deserve! 💬✨\",\n      \"dependencies\": [\n        \"@radix-ui/react-dialog\",\n        \"@radix-ui/react-visually-hidden\",\n        \"class-variance-authority\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Dialog.tsx\",\n          \"target\": \"components/retroui/Dialog.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"drawer\",\n      \"type\": \"registry:component\",\n      \"title\": \"Drawer\",\n      \"description\": \"A component that can slide in from any side of the screen.\",\n      \"dependencies\": [\n        \"vaul\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Drawer.tsx\",\n          \"target\": \"components/retroui/Drawer.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"command\",\n      \"type\": \"registry:component\",\n      \"title\": \"Command\",\n      \"description\": \"Fast, keyboard-first command palette powered by cmdk.\",\n      \"dependencies\": [\n        \"cmdk\",\n        \"@radix-ui/react-dialog\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Command.tsx\",\n          \"target\": \"components/retroui/Command.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"input\",\n      \"type\": \"registry:component\",\n      \"title\": \"Input\",\n      \"description\": \"This pretty input makes your users want to type stuff! ⌨️\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Input.tsx\",\n          \"target\": \"components/retroui/Input.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"label\",\n      \"type\": \"registry:component\",\n      \"title\": \"Label\",\n      \"description\": \"Label for form fields\",\n      \"dependencies\": [\n        \"@radix-ui/react-label\",\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Label.tsx\",\n          \"target\": \"components/retroui/Label.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"loader\",\n      \"type\": \"registry:component\",\n      \"title\": \"Loader\",\n      \"description\": \"A loading indicator\",\n      \"dependencies\": [\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Loader.tsx\",\n          \"target\": \"components/retroui/Loader.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"menu\",\n      \"type\": \"registry:component\",\n      \"title\": \"Menu\",\n      \"description\": \"Show your users a list of actions they can take. 📋\",\n      \"dependencies\": [\n        \"@radix-ui/react-dropdown-menu\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Menu.tsx\",\n          \"target\": \"components/retroui/Menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"context-menu\",\n      \"type\": \"registry:component\",\n      \"title\": \"Context Menu\",\n      \"description\": \"Show contextual actions on right-click.\",\n      \"dependencies\": [\n        \"@radix-ui/react-context-menu\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/ContextMenu.tsx\",\n          \"target\": \"components/retroui/ContextMenu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"popover\",\n      \"type\": \"registry:component\",\n      \"title\": \"Popover\",\n      \"description\": \"A handy small component for your little input needs...😉\",\n      \"dependencies\": [\n        \"@radix-ui/react-popover\",\n        \"class-variance-authority\"\n      ],\n      \"author\": \"Ankan Bhattacharya <https://github.com/ankan002>\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Popover.tsx\",\n          \"target\": \"components/retroui/Popover.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"progress\",\n      \"type\": \"registry:component\",\n      \"title\": \"Progress\",\n      \"description\": \"Show progress...\",\n      \"dependencies\": [\n        \"@radix-ui/react-progress\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Progress.tsx\",\n          \"target\": \"components/retroui/Progress.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"radio\",\n      \"type\": \"registry:component\",\n      \"title\": \"Radio\",\n      \"description\": \"Sometimes you need to pick multiple options! That's where the Radio component comes into play.\",\n      \"dependencies\": [\n        \"@radix-ui/react-radio-group\",\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Radio.tsx\",\n          \"target\": \"components/retroui/Radio.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"select\",\n      \"type\": \"registry:component\",\n      \"title\": \"Select\",\n      \"description\": \"Let your users pick what they want.\",\n      \"dependencies\": [\n        \"@radix-ui/react-select\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Select.tsx\",\n          \"target\": \"components/retroui/Select.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"slider\",\n      \"type\": \"registry:component\",\n      \"title\": \"Slider\",\n      \"description\": \"Let your users pick what they want.\",\n      \"dependencies\": [\n        \"@radix-ui/react-slider\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Slider.tsx\",\n          \"target\": \"components/retroui/Slider.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"sonner\",\n      \"type\": \"registry:component\",\n      \"title\": \"Sonner\",\n      \"description\": \"A beautiful toast component that can grab audience attention from any place.\",\n      \"dependencies\": [\n        \"sonner\",\n        \"lucide-react\",\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Sonner.tsx\",\n          \"target\": \"components/retroui/Sonner.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"switch\",\n      \"type\": \"registry:component\",\n      \"title\": \"Switch\",\n      \"description\": \"Let users to turn on or off your marketing emails or notifications.\",\n      \"dependencies\": [\n        \"@radix-ui/react-switch\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Switch.tsx\",\n          \"target\": \"components/retroui/Switch.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tab\",\n      \"type\": \"registry:component\",\n      \"title\": \"Tab\",\n      \"description\": \"Switch between different views using tabs.\",\n      \"dependencies\": [\n        \"@headlessui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Tab.tsx\",\n          \"target\": \"components/retroui/Tab.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"table\",\n      \"type\": \"registry:component\",\n      \"title\": \"Table\",\n      \"description\": \"Show your data in a tabular format. 📊\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Table.tsx\",\n          \"target\": \"components/retroui/Table.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"text\",\n      \"type\": \"registry:component\",\n      \"title\": \"text\",\n      \"description\": \"Show your texts in different styles. 💅\",\n      \"dependencies\": [\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Text.tsx\",\n          \"target\": \"components/retroui/Text.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"textarea\",\n      \"type\": \"registry:component\",\n      \"title\": \"textarea\",\n      \"description\": \"This pretty input makes your users want to type lots of stuff! ⌨️ ⌨\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Textarea.tsx\",\n          \"target\": \"components/retroui/Textarea.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toc\",\n      \"type\": \"registry:component\",\n      \"title\": \"Table of Contents\",\n      \"description\": \"Show your table of contents in a sidebar.\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/TableOfContents.tsx\",\n          \"target\": \"components/retroui/TableOfContents.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle\",\n      \"type\": \"registry:component\",\n      \"title\": \"Toggle\",\n      \"description\": \"This crazy toggling button keeps people toggling...😃\",\n      \"dependencies\": [\n        \"@radix-ui/react-toggle\",\n        \"class-variance-authority\"\n      ],\n      \"author\": \"Ankan Bhattacharya <https://github.com/ankan002>\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Toggle.tsx\",\n          \"target\": \"components/retroui/Toggle.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-group\",\n      \"type\": \"registry:component\",\n      \"title\": \"Toggle Group\",\n      \"description\": \"Group of toggling buttons...🤙\",\n      \"dependencies\": [\n        \"@radix-ui/react-toggle\",\n        \"@radix-ui/react-toggle-group\",\n        \"class-variance-authority\"\n      ],\n      \"author\": \"Ankan Bhattacharya <https://github.com/ankan002>\",\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Toggle.tsx\",\n          \"target\": \"components/retroui/Toggle.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"components/retroui/ToggleGroup.tsx\",\n          \"target\": \"components/retroui/ToggleGroup.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tooltip\",\n      \"type\": \"registry:component\",\n      \"title\": \"Tooltip\",\n      \"description\": \"A cool way to give your users a hint of what a component does...😉\",\n      \"dependencies\": [\n        \"@radix-ui/react-tooltip\",\n        \"class-variance-authority\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/Tooltip.tsx\",\n          \"target\": \"components/retroui/Tooltip.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"area-chart\",\n      \"type\": \"registry:component\",\n      \"title\": \"Area Chart\",\n      \"description\": \"Beautiful area chart for data visualization with retro styling\",\n      \"dependencies\": [\n        \"recharts\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/charts/AreaChart.tsx\",\n          \"target\": \"components/retroui/charts/AreaChart.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"bar-chart\",\n      \"type\": \"registry:component\",\n      \"title\": \"Bar Chart\",\n      \"description\": \"Beautiful bar chart for data visualization with retro styling\",\n      \"dependencies\": [\n        \"recharts\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/charts/BarChart.tsx\",\n          \"target\": \"components/retroui/charts/BarChart.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"line-chart\",\n      \"type\": \"registry:component\",\n      \"title\": \"Line Chart\",\n      \"description\": \"Beautiful line chart for data visualization with retro styling\",\n      \"dependencies\": [\n        \"recharts\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/charts/LineChart.tsx\",\n          \"target\": \"components/retroui/charts/LineChart.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"pie-chart\",\n      \"type\": \"registry:component\",\n      \"title\": \"Pie Chart\",\n      \"description\": \"Beautiful pie chart for data visualization with retro styling\",\n      \"dependencies\": [\n        \"recharts\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"components/retroui/charts/PieChart.tsx\",\n          \"target\": \"components/retroui/charts/PieChart.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ]\n    },\n    {\n      \"name\": \"accordion-style-default\",\n      \"title\": \"accordion-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/accordion.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/accordion-style-default.tsx\",\n          \"target\": \"components/retroui/preview/accordion-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"alert-style-default\",\n      \"title\": \"alert-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/alert.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/alert-style-default.tsx\",\n          \"target\": \"components/retroui/preview/alert-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"alert-style-solid\",\n      \"title\": \"alert-style-solid\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/alert.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/alert-style-solid.tsx\",\n          \"target\": \"components/retroui/preview/alert-style-solid.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"alert-style-with-icon\",\n      \"title\": \"alert-style-with-icon\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/alert.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/alert-style-with-icon.tsx\",\n          \"target\": \"components/retroui/preview/alert-style-with-icon.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"alert-style-all-status\",\n      \"title\": \"alert-style-all-status\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/alert.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/alert-style-all-status.tsx\",\n          \"target\": \"components/retroui/preview/alert-style-all-status.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"avatar-style-circle\",\n      \"title\": \"avatar-style-circle\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/avatar.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/avatar-style-circle.tsx\",\n          \"target\": \"components/retroui/preview/avatar-style-circle.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"avatar-style-fallbacks\",\n      \"title\": \"avatar-style-fallbacks\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/avatar.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/avatar-style-circle-fallbacks.tsx\",\n          \"target\": \"components/retroui/preview/avatar-style-circle-fallbacks.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"avatar-style-circle-sizes\",\n      \"title\": \"avatar-style-circle-sizes\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/avatar.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/avatar-style-circle-sizes.tsx\",\n          \"target\": \"components/retroui/preview/avatar-style-circle-sizes.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"badge-style-default\",\n      \"title\": \"badge-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/badge.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/badge-style-default.tsx\",\n          \"target\": \"components/retroui/preview/badge-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"badge-style-variants\",\n      \"title\": \"badge-style-variants\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/badge.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/badge-style-variants.tsx\",\n          \"target\": \"components/retroui/preview/badge-style-variants.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"badge-style-default\",\n      \"title\": \"badge-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/badge.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/badge-style-rounded.tsx\",\n          \"target\": \"components/retroui/preview/badge-style-rounded.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"badge-style-sizes\",\n      \"title\": \"badge-style-sizes\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/badge.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/badge-style-sizes.tsx\",\n          \"target\": \"components/retroui/preview/badge-style-sizes.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"button-style-default\",\n      \"title\": \"button-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/button-style-default.tsx\",\n          \"target\": \"components/retroui/preview/button-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"cssVars\": {\n        \"theme\": {\n          \"shadow-xs\": \"1px 1px 0 0 #000\",\n          \"shadow\": \"3px 3px 0 0 #000\",\n          \"shadow-md\": \"4px 4px 0 0 #000\"\n        },\n        \"light\": {\n          \"primary\": \"60 100% 60%\",\n          \"primary-foreground\": \"0 0% 0%\"\n        },\n        \"dark\": {\n          \"primary\": \"60 100% 50%\",\n          \"primary-foreground\": \"0 0% 0%\"\n        }\n      }\n    },\n    {\n      \"name\": \"button-style-secondary\",\n      \"title\": \"button-style-secondary\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/button-style-secondary.tsx\",\n          \"target\": \"components/retroui/preview/button-style-secondary.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"button-style-outline\",\n      \"title\": \"button-style-outline\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/button-style-outline.tsx\",\n          \"target\": \"components/retroui/preview/button-style-outline.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"button-style-link\",\n      \"title\": \"button-style-link\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/button-style-link.tsx\",\n          \"target\": \"components/retroui/preview/button-style-link.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"button-style-with-icon\",\n      \"title\": \"button-style-with-icon\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/button-style-with-icon.tsx\",\n          \"target\": \"components/retroui/preview/button-style-with-icon.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"card-style-default\",\n      \"title\": \"card-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/card.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/card-style-default.tsx\",\n          \"target\": \"components/retroui/preview/card-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"card-style-commerce\",\n      \"title\": \"card-style-commerce\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/card.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/card-style-commerce.tsx\",\n          \"target\": \"components/retroui/preview/card-style-commerce.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"card-style-testimonial\",\n      \"title\": \"card-style-testimonial\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/card.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/card-style-testimonial.tsx\",\n          \"target\": \"components/retroui/preview/card-style-testimonial.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"checkbox-style-default\",\n      \"title\": \"checkbox-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/checkbox.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/checkbox-style-default.tsx\",\n          \"target\": \"components/retroui/preview/checkbox-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"checkbox-style-toggle\",\n      \"title\": \"checkbox-style-toggle\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/checkbox.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/checkbox-style-variants.tsx\",\n          \"target\": \"components/retroui/preview/checkbox-style-variants.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"checkbox-style-default\",\n      \"title\": \"checkbox-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/checkbox.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/checkbox-style-sizes.tsx\",\n          \"target\": \"components/retroui/preview/checkbox-style-sizes.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"input-style-default\",\n      \"title\": \"input-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/input.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/input-style-default.tsx\",\n          \"target\": \"components/retroui/preview/input-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"input-style-with-label\",\n      \"title\": \"input-style-with-label\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/input.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/input-style-with-label.tsx\",\n          \"target\": \"components/retroui/preview/input-style-with-label.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"input-style-error\",\n      \"title\": \"input-style-error\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/input.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/input-style-error.tsx\",\n          \"target\": \"components/retroui/preview/input-style-error.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"menu-style-default\",\n      \"title\": \"menu-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/menu.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/menu-style-default.tsx\",\n          \"target\": \"components/retroui/preview/menu-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"progress-style-default\",\n      \"title\": \"progress-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/progress.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/progress-style-default.tsx\",\n          \"target\": \"components/retroui/preview/progress-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"radio-style-default\",\n      \"title\": \"radio-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/radio.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/radio-style-default.tsx\",\n          \"target\": \"components/retroui/preview/radio-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"radio-style-variants\",\n      \"title\": \"radio-style-variants\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/radio.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/radio-style-variants.tsx\",\n          \"target\": \"components/retroui/preview/radio-style-variants.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"radio-style-sizes\",\n      \"title\": \"radio-style-sizes\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/radio.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/radio-style-sizes.tsx\",\n          \"target\": \"components/retroui/preview/radio-style-sizes.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"select-style-default\",\n      \"title\": \"select-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/select.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/select-style-default.tsx\",\n          \"target\": \"components/retroui/preview/select-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"switch-style-default\",\n      \"title\": \"switch-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/switch.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/switch-style-default.tsx\",\n          \"target\": \"components/retroui/preview/switch-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"switch-style-disabled\",\n      \"title\": \"switch-style-disabled\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/switch.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/switch-style-disabled.tsx\",\n          \"target\": \"components/retroui/preview/switch-style-disabled.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"table-style-default\",\n      \"title\": \"table-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/table.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/table-style-default.tsx\",\n          \"target\": \"components/retroui/preview/table-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"table-with-checkbox\",\n      \"title\": \"table-with-checkbox\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/table.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/table-with-checkbox.tsx\",\n          \"target\": \"components/retroui/preview/table-with-checkbox.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"table-with-sticky-header\",\n      \"title\": \"table-with-sticky-header\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/table.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/table-with-sticky-header.tsx\",\n          \"target\": \"components/retroui/preview/table-with-sticky-header.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"textarea-style-default\",\n      \"title\": \"textarea-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/textarea.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/textarea-style-default.tsx\",\n          \"target\": \"components/retroui/preview/textarea-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"text-headings\",\n      \"title\": \"text-headings\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/text.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/text-headings.tsx\",\n          \"target\": \"components/retroui/preview/text-headings.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"typography-p\",\n      \"title\": \"typography-p\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/text.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/typography-p.tsx\",\n          \"target\": \"components/retroui/preview/typography-p.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tab-style-default\",\n      \"title\": \"tab-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/tab.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/tab-style-default.tsx\",\n          \"target\": \"components/retroui/preview/tab-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"dialog-style-default\",\n      \"title\": \"dialog-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/dialog.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/dialog-style-default.tsx\",\n          \"target\": \"components/retroui/preview/dialog-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"dialog-style-with-footer\",\n      \"title\": \"dialog-style-with-footer\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/dialog.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/dialog-style-with-footer.tsx\",\n          \"target\": \"components/retroui/preview/dialog-style-with-footer.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"dialog-style-width-variant\",\n      \"title\": \"dialog-style-width-variant\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/dialog.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/dialog-style-width-variant.tsx\",\n          \"target\": \"components/retroui/preview/dialog-style-width-variant.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"dialog-style-with-form\",\n      \"title\": \"dialog-style-with-form\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/dialog.json\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/dialog-style-with-form.tsx\",\n          \"target\": \"components/retroui/preview/dialog-style-with-form.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-style-default\",\n      \"title\": \"toggle-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-style-default.tsx\",\n          \"target\": \"components/retroui/preview/toggle-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-style-outline-muted\",\n      \"title\": \"toggle-style-outline-muted\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-style-outline-muted.tsx\",\n          \"target\": \"components/retroui/preview/toggle-style-outline-muted.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-style-outlined\",\n      \"title\": \"toggle-style-outlined\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-style-outlined.tsx\",\n          \"target\": \"components/retroui/preview/toggle-style-outlined.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-style-solid\",\n      \"title\": \"toggle-style-solid\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-style-solid.tsx\",\n          \"target\": \"components/retroui/preview/toggle-style-solid.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-group-style-default\",\n      \"title\": \"toggle-group-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\",\n        \"https://retroui.dev/r/toggle-group.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-group-style-default.tsx\",\n          \"target\": \"components/retroui/preview/toggle-group-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-group-style-outline-muted\",\n      \"title\": \"toggle-group-style-outline-muted\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\",\n        \"https://retroui.dev/r/toggle-group.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-group-style-outline-muted.tsx\",\n          \"target\": \"components/retroui/preview/toggle-group-style-outline-muted.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-group-style-outlined\",\n      \"title\": \"toggle-group-style-outlined\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\",\n        \"https://retroui.dev/r/toggle-group.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-group-style-outlined.tsx\",\n          \"target\": \"components/retroui/preview/toggle-group-style-outlined.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"toggle-group-style-solid\",\n      \"title\": \"toggle-group-style-solid\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/toggle.json\",\n        \"https://retroui.dev/r/toggle-group.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/toggle-group-style-solid.tsx\",\n          \"target\": \"components/retroui/preview/toggle-group-style-solid.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tooltip-style-default\",\n      \"title\": \"tooltip-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/tooltip.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/tooltip-style-default.tsx\",\n          \"target\": \"components/retroui/preview/tooltip-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tooltip-style-primary\",\n      \"title\": \"tooltip-style-primary\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/tooltip.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/tooltip-style-primary.tsx\",\n          \"target\": \"components/retroui/preview/tooltip-style-primary.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"tooltip-style-solid\",\n      \"title\": \"tooltip-style-solid\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/tooltip.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/tooltip-style-solid.tsx\",\n          \"target\": \"components/retroui/preview/tooltip-style-solid.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"sonner-style-default\",\n      \"title\": \"sonner-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/sonner.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/sonner-style-default.tsx\",\n          \"target\": \"components/retroui/preview/sonner-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"sonner-style-error\",\n      \"title\": \"sonner-style-error\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/sonner.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/sonner-style-error.tsx\",\n          \"target\": \"components/retroui/preview/sonner-style-error.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"popover-style-default\",\n      \"title\": \"popover-style-default\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/popover.json\",\n        \"https://retroui.dev/r/label.json\",\n        \"https://retroui.dev/r/input.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/popover-style-default.tsx\",\n          \"target\": \"components/retroui/preview/popover-style-default.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    },\n    {\n      \"name\": \"popover-style-default-shadow\",\n      \"title\": \"popover-style-default-shadow\",\n      \"type\": \"registry:block\",\n      \"registryDependencies\": [\n        \"https://retroui.dev/r/popover.json\",\n        \"https://retroui.dev/r/label.json\",\n        \"https://retroui.dev/r/input.json\",\n        \"https://retroui.dev/r/button.json\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"preview/components/popover-style-default-shadow.tsx\",\n          \"target\": \"components/retroui/preview/popover-style-default-shadow.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ]\n    }\n  ]\n}"
  },
  {
    "path": "showcase.json",
    "content": "{\n    \"advibly.com\": {\n        \"name\": \"Advibly\",\n        \"url\": \"https://advibly.com\",\n        \"cover\": \"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/advibly.com.png\",\n        \"color\": \"red-200\"\n    },\n    \"brijeshmarch16.vercel.app\": {\n        \"name\": \"Brijesh Portfolio\",\n        \"url\": \"https://brijeshmarch16.vercel.app\",\n        \"cover\": \"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/brijeshmarch16.png\",\n        \"color\": \"yellow-200\"\n    },\n    \"buildersguild.space\": {\n        \"name\": \"Builders Guild\",\n        \"url\": \"https://buildersguild.space\",\n        \"cover\": \"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/buildersguild.space.png\",\n        \"color\": \"orange-200\"\n    },\n    \"codeinpublic.com\": {\n        \"name\": \"Code in Public\",\n        \"url\": \"https://codeinpublic.com\",\n        \"cover\": \"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/codeinpublic.jpg\",\n        \"color\": \"purple-200\"\n    },\n    \"fplradar.com\": {\n        \"name\": \"FPL Radar\",\n        \"url\": \"https://fplradar.com\",\n        \"cover\": \"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/fplradar.com.png\",\n        \"color\": \"green-200\"\n    },\n    \"pouf.chat\": {\n        \"name\": \"Pouf Chat\",\n        \"url\": \"https://pouf.chat\",\n        \"cover\": \"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/pouf.chat.png\",\n        \"color\": \"purple-200\"\n    },\n    \"rewardkitty.com\": {\n        \"name\": \"Reward Kitty\",\n        \"url\": \"https://rewardkitty.com\",\n        \"cover\": \"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/rewardkitty.com.png\",\n        \"color\": \"blue-200\"\n    },\n    \"startcod.ing\": {\n        \"name\": \"Start Coding\",\n        \"url\": \"https://startcoding.ing\",\n        \"cover\": \"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/startcod.ing.png\",\n        \"color\": \"yellow-200\"\n    },\n    \"vanikya.ai\": {\n        \"name\": \"Vanikya AI\",\n        \"url\": \"https://vanikya.ai\",\n        \"cover\": \"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/vanikya.ai.png\",\n        \"color\": \"green-200\"\n    }\n}"
  },
  {
    "path": "tasks.md",
    "content": "[ ] Add pre-commit hook to run build and lint\n[ ] Add CDN with Clouflare\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\"./*\"],\n      \"contentlayer/generated\": [\"./.contentlayer/generated\"]\n    }\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\", \"content/docs/charts/bar-chart.mdx\"],\n  \"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "types/index.d.ts",
    "content": "export interface INavItem {\n  title: string;\n  href: string;\n  tag?: string;\n}\n\nexport interface INavItemWithChildren {\n  title: string;\n  children: INavItem[];\n}\n\nexport interface INavigationConfig {\n  topNavItems: INavItem[];\n  sideNavItems: INavItemWithChildren[];\n}\n"
  },
  {
    "path": "types/unist.d.ts",
    "content": "import { Node } from \"unist-builder\";\n\nexport interface UnistNode extends Node {\n  type: string;\n  name?: string;\n  tagName?: string;\n  value?: string;\n  attributes?: {\n    name: string;\n    value: unknown;\n    type?: string;\n  }[];\n  properties?: {\n    __src__?: string;\n    __npmCommand__?: string;\n    __yarnCommand__?: string;\n    __pnpmCommand__?: string;\n    __bunCommand__?: string;\n    className?: string[];\n  };\n  children?: UnistNode[];\n}\n\nexport interface UnistTree extends Node {\n  type: \"root\";\n  children: UnistNode[];\n}\n\nexport interface NpmCommands {\n  __npmCommand__?: string;\n  __yarnCommand__?: string;\n  __pnpmCommand__?: string;\n  __bunCommand__?: string;\n}\n"
  }
]