[ { "path": ".cursor/mcp.json", "content": "{\n \"mcpServers\": {\n \"shadcn\": {\n \"command\": \"npx\",\n \"args\": [\"shadcn@latest\", \"mcp\"]\n }\n }\n}\n" }, { "path": ".editorconfig", "content": "# editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true" }, { "path": ".gitattributes", "content": "* text=auto eol=lf" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.yml", "content": "name: \"Bug report\"\ndescription: Report an issue with Magic UI\ntitle: \"[bug]: \"\nlabels: [\"bug\"]\nbody:\n - type: markdown\n attributes:\n value: |\n ### Thanks for taking the time to create a bug report. Please search open/closed issues before submitting, as the issue may have already been reported/addressed.\n\n - type: markdown\n attributes:\n value: |\n #### If you aren't sure this is a bug or not, please open a discussion instead:\n - [Discussions](https://github.com/magicuidesign/magicui/discussions/new?category=general)\n\n - type: textarea\n id: bug-description\n attributes:\n label: Describe the bug\n description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us how in the description. Thanks!\n placeholder: Bug description\n validations:\n required: true\n\n - type: input\n id: components-affected\n attributes:\n label: Affected component/components\n description: Which Magic UI components are affected?\n placeholder: ex. Rainbow Button, Terminal...\n validations:\n required: true\n\n - type: textarea\n id: reproduction\n attributes:\n label: How to reproduce\n description: A step-by-step description of how to reproduce the bug.\n placeholder: |\n 1. Go to '...'\n 2. Click on '....'\n 3. See error\n validations:\n required: true\n\n - type: input\n id: codesandbox-stackblitz\n attributes:\n label: Codesandbox/StackBlitz link\n description: |\n A link to a CodeSandbox or StackBlitz that includes a minimal reproduction of the problem. In rare cases when not applicable, you can link to a GitHub repository that we can easily run to recreate the issue. If a report is vague and does not have a reproduction, it will be closed without warning. \n\n > [!CAUTION]\n > If you skip this step, this issue might be **labeled** with `please add a reproduction` and **closed**.\n validations:\n required: false\n\n - type: textarea\n id: logs\n attributes:\n label: Logs\n description: \"Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.\"\n render: bash\n\n - type: textarea\n id: system-info\n attributes:\n label: System Info\n description: Information about browsers, system or binaries that's relevant.\n render: bash\n placeholder: System, Binaries, Browsers\n validations:\n required: true\n\n - type: checkboxes\n id: terms\n attributes:\n label: Before submitting\n description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/magicuidesign/magicui/blob/main/CONTRIBUTING.md).\n options:\n - label: I've made research efforts and searched the documentation\n required: true\n - label: I've searched for existing issues\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.yml", "content": "name: \"Feature request\"\ndescription: Create a feature request for Magic UI\ntitle: \"[feat]: \"\nlabels: [\"area: request\"]\nbody:\n - type: markdown\n attributes:\n value: |\n ### Thanks for taking the time to create a feature request! Please search open/closed issues before submitting, as the issue may have already been reported/addressed.\n\n - type: markdown\n attributes:\n value: |\n #### If you aren't sure this is a bug or not, please open a discussion instead:\n - [Discussions](https://github.com/magicuidesign/magicui/discussions/new?category=general)\n\n - type: textarea\n id: feature-description\n attributes:\n label: Feature description\n description: Tell us about your feature request\n placeholder: \"I think this feature would be great because...\"\n value: \"Describe your feature request...\"\n validations:\n required: true\n\n - type: input\n id: components-affected\n attributes:\n label: Affected component/components\n description: Is this feature request relevant to any of the already existing components?\n placeholder: ex. Button, Checkbox...\n validations:\n required: false\n\n - type: textarea\n id: context\n attributes:\n label: Additional Context\n description: Add any other context about the feature here.\n placeholder: ex. screenshots, Stack Overflow links, forum links, etc.\n value: \"Additional details here...\"\n validations:\n required: false\n\n - type: checkboxes\n id: terms\n attributes:\n label: Before submitting\n description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/magicuidesign/magicui/blob/main/CONTRIBUTING.md).\n options:\n - label: I've made research efforts and searched the documentation\n required: true\n - label: I've searched for existing issues and PRs\n required: true\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "## Description\n\n\n## Changes\n\n\n## Motivation\n\n\n## Breaking Changes\n\n\n## Screenshots\n\n\n> Device / Browser / Viewport:\n\n| Before | After |\n| --- | --- |\n| | |\n" }, { "path": ".github/scripts/publish-articles.cjs", "content": "#!/usr/bin/env node\n\"use strict\";\n\nconst fs = require(\"fs\");\nconst path = require(\"path\");\nconst yaml = require(\"js-yaml\");\n\nconst payload = JSON.parse(fs.readFileSync(\"payload.json\", \"utf8\"));\nconst articles = (payload && payload.data && payload.data.articles) || [];\nif (!Array.isArray(articles) || articles.length === 0) process.exit(0);\n\nconst folder = path.join(\"apps\", \"www\", \"content\", \"blog\");\nfs.mkdirSync(folder, { recursive: true });\n\nfor (const a of articles) {\n const fmObj = {\n title: a.title || \"\",\n description: a.meta_description || \"\",\n image: a.image_url || \"\",\n author: \"Dillion Verma\",\n tags: Array.isArray(a.tags) ? a.tags : [],\n publishedOn: a.created_at || \"\",\n featured: true,\n };\n const fm =\n \"---\\n\" + yaml.dump(fmObj, { noRefs: true, lineWidth: 0 }) + \"---\\n\";\n const body = String(a.content_markdown || \"\");\n const file = path.join(folder, `${a.slug}.mdx`);\n fs.writeFileSync(file, fm + body, \"utf8\");\n console.log(`Wrote ${file}`);\n}\n" }, { "path": ".github/scripts/submit-sitemap.mjs", "content": "import { JWT } from \"google-auth-library\";\nimport { google } from \"googleapis\";\n\nconst { SITE_URL, SITEMAP_URL, GOOGLE_SEARCH_CONSOLE_JSON_KEY } = process.env;\n\nif (!SITE_URL || !SITEMAP_URL || !GOOGLE_SEARCH_CONSOLE_JSON_KEY) {\n throw new Error(\"Missing required environment variables\");\n}\n\nconst keys = JSON.parse(\n Buffer.from(GOOGLE_SEARCH_CONSOLE_JSON_KEY, \"base64\").toString(\"utf-8\"),\n);\n\nconst client = new JWT({\n email: keys.client_email,\n key: keys.private_key,\n scopes: [\n \"https://www.googleapis.com/auth/webmasters\",\n \"https://www.googleapis.com/auth/webmasters.readonly\",\n ],\n});\n\ngoogle.options({ auth: client });\n\nconst searchconsole = google.searchconsole(\"v1\");\n\n(async () => {\n try {\n await searchconsole.sitemaps.submit({\n feedpath: SITEMAP_URL,\n siteUrl: SITE_URL,\n });\n } catch (e) {\n console.log(e);\n process.exit(1);\n } finally {\n process.exit(0);\n }\n})();\n" }, { "path": ".github/workflows/code-check.yml", "content": "name: Code check\n\non:\n pull_request:\n branches: [\"*\"]\n\njobs:\n lint:\n runs-on: ubuntu-latest\n name: pnpm lint\n steps:\n - uses: actions/checkout@v6\n with:\n fetch-depth: 0\n\n - name: Install Node.js\n uses: actions/setup-node@v3\n with:\n node-version: 22\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n id: pnpm-install\n with:\n version: 9.15.0\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n - uses: actions/cache@v3\n name: Setup pnpm cache\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n - name: Install dependencies\n run: pnpm install\n\n - run: pnpm lint\n\n format:\n runs-on: ubuntu-latest\n name: pnpm format:check\n steps:\n - uses: actions/checkout@v6\n with:\n fetch-depth: 0\n\n - name: Install Node.js\n uses: actions/setup-node@v3\n with:\n node-version: 22\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n id: pnpm-install\n with:\n version: 9.15.0\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n\n - uses: actions/cache@v3\n name: Setup pnpm cache\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n\n - name: Install dependencies\n run: pnpm install\n\n - run: pnpm format:check\n\n tsc:\n runs-on: ubuntu-latest\n name: pnpm typecheck\n steps:\n - uses: actions/checkout@v6\n with:\n fetch-depth: 0\n\n - name: Install Node.js\n uses: actions/setup-node@v3\n with:\n node-version: 22\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n id: pnpm-install\n with:\n version: 9.15.0\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n - uses: actions/cache@v3\n name: Setup pnpm cache\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n - name: Install dependencies\n run: pnpm install\n\n - run: pnpm typecheck\n\n registry-deps:\n runs-on: ubuntu-latest\n name: pnpm registry-deps:check\n steps:\n - uses: actions/checkout@v6\n with:\n fetch-depth: 0\n\n - name: Install Node.js\n uses: actions/setup-node@v3\n with:\n node-version: 22\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n id: pnpm-install\n with:\n version: 9.15.0\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n - uses: actions/cache@v3\n name: Setup pnpm cache\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n - name: Install dependencies\n run: pnpm install\n\n - run: pnpm registry-deps:check\n\n registry-drift:\n runs-on: ubuntu-latest\n name: registry artifact drift check\n steps:\n - uses: actions/checkout@v6\n with:\n fetch-depth: 0\n\n - name: Install Node.js\n uses: actions/setup-node@v3\n with:\n node-version: 22\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n id: pnpm-install\n with:\n version: 9.15.0\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n - uses: actions/cache@v3\n name: Setup pnpm cache\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n - name: Install dependencies\n run: pnpm install\n\n - name: Build registry artifacts\n run: pnpm build:registry\n\n - name: Verify registry artifacts are committed\n run: |\n CHANGED_FILES=\"$(git status --porcelain --untracked-files=all -- \\\n apps/www/registry.json \\\n apps/www/registry/__index__.tsx \\\n apps/www/public/registry.json \\\n apps/www/public/r \\\n apps/www/public/llms.txt \\\n apps/www/public/llms-full.txt)\"\n\n if [ -n \"$CHANGED_FILES\" ]; then\n echo \"Registry artifacts are out of date.\"\n echo \"Changed files:\"\n printf '%s\\n' \"$CHANGED_FILES\"\n echo \"Run: pnpm build:registry\"\n echo \"Then commit generated files.\"\n exit 1\n fi\n" }, { "path": ".github/workflows/publish-article.yml", "content": "name: Publish Blog Article\n\non:\n workflow_dispatch:\n inputs:\n payload:\n description: \"JSON payload from webhook\"\n required: true\n\npermissions:\n contents: write\n\njobs:\n publish-article:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v5\n with:\n ref: ${{ github.head_ref }}\n\n - uses: pnpm/action-setup@v4\n with:\n version: 9.15.0\n run_install: false\n\n - name: Setup Node\n uses: actions/setup-node@v4\n with:\n node-version: 22\n cache: pnpm\n - name: Install dependencies\n run: pnpm install\n\n - name: Save payload\n run: node -e \"require('fs').writeFileSync('payload.json', process.env.PAYLOAD)\"\n env:\n PAYLOAD: ${{ github.event.inputs.payload }}\n\n - name: Write blog posts\n run: node .github/scripts/publish-articles.cjs\n\n - name: Delete payload\n run: rm -f payload.json\n\n - name: Format code\n run: pnpm format:fix\n\n - name: Commit & push\n run: |\n git config user.name \"github-actions[bot]\"\n git config user.email \"41898282+github-actions[bot]@users.noreply.github.com\"\n git add .\n git commit -m \"Add blog article from webhook\" || echo \"No changes\"\n git push\n" }, { "path": ".github/workflows/submit-sitemap.yml", "content": "name: Submit Sitemap to Google\n\non:\n workflow_run:\n workflows:\n - Publish Blog Article\n types:\n - completed\n workflow_dispatch:\n inputs:\n sitemap_url:\n description: \"Override sitemap URL (optional)\"\n required: false\n\npermissions: {}\n\nenv:\n SITEMAP_URL: https://magicui.design/sitemap.xml\n SITE_URL: sc-domain:magicui.design\n\njobs:\n submit-sitemap:\n if: ${{ github.event_name == 'workflow_dispatch' || github.event.workflow_run.conclusion == 'success' }}\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v5\n\n - name: Setup Node\n uses: actions/setup-node@v4\n with:\n node-version: 22\n\n - name: Install dependencies\n run: npm install --no-save googleapis google-auth-library\n\n - name: Publish Sitemap\n run: node .github/scripts/submit-sitemap.mjs\n env:\n GOOGLE_SEARCH_CONSOLE_JSON_KEY: ${{ secrets.GOOGLE_SEARCH_CONSOLE_JSON_KEY }}\n SITE_URL: ${{ env.SITE_URL }}\n SITEMAP_URL: ${{ inputs.sitemap_url || env.SITEMAP_URL }}\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\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# IDE Files\n.idea\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*\n.env*.local\n!.env.example\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n\n# turbo cache\n.turbo\n" }, { "path": ".prettierignore", "content": "yarn.lock\nnode_modules\n.next\n.source\n" }, { "path": "AGENTS.md", "content": "# Project Context\nUltracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's lightning-fast formatter and linter.\n\n## Key Principles\n- Zero configuration required\n- Subsecond performance\n- Maximum type safety\n- AI-friendly code generation\n\n## Before Writing Code\n1. Analyze existing patterns in the codebase\n2. Consider edge cases and error scenarios\n3. Follow the rules below strictly\n4. Validate accessibility requirements\n\n## Rules\n\n### Accessibility (a11y)\n- Don't use `accessKey` attribute on any HTML element.\n- Don't set `aria-hidden=\"true\"` on focusable elements.\n- Don't add ARIA roles, states, and properties to elements that don't support them.\n- Don't use distracting elements like `` or ``.\n- Only use the `scope` prop on `` elements.\n- Don't assign non-interactive ARIA roles to interactive HTML elements.\n- Make sure label elements have text content and are associated with an input.\n- Don't assign interactive ARIA roles to non-interactive HTML elements.\n- Don't assign `tabIndex` to non-interactive HTML elements.\n- Don't use positive integers for `tabIndex` property.\n- Don't include \"image\", \"picture\", or \"photo\" in img alt prop.\n- Don't use explicit role property that's the same as the implicit/default role.\n- Make static elements with click handlers use a valid role attribute.\n- Always include a `title` element for SVG elements.\n- Give all elements requiring alt text meaningful information for screen readers.\n- Make sure anchors have content that's accessible to screen readers.\n- Assign `tabIndex` to non-interactive HTML elements with `aria-activedescendant`.\n- Include all required ARIA attributes for elements with ARIA roles.\n- Make sure ARIA properties are valid for the element's supported roles.\n- Always include a `type` attribute for button elements.\n- Make elements with interactive roles and handlers focusable.\n- Give heading elements content that's accessible to screen readers (not hidden with `aria-hidden`).\n- Always include a `lang` attribute on the html element.\n- Always include a `title` attribute for iframe elements.\n- Accompany `onClick` with at least one of: `onKeyUp`, `onKeyDown`, or `onKeyPress`.\n- Accompany `onMouseOver`/`onMouseOut` with `onFocus`/`onBlur`.\n- Include caption tracks for audio and video elements.\n- Use semantic elements instead of role attributes in JSX.\n- Make sure all anchors are valid and navigable.\n- Ensure all ARIA properties (`aria-*`) are valid.\n- Use valid, non-abstract ARIA roles for elements with ARIA roles.\n- Use valid ARIA state and property values.\n- Use valid values for the `autocomplete` attribute on input elements.\n- Use correct ISO language/country codes for the `lang` attribute.\n\n### Code Complexity and Quality\n- Don't use consecutive spaces in regular expression literals.\n- Don't use the `arguments` object.\n- Don't use primitive type aliases or misleading types.\n- Don't use the comma operator.\n- Don't use empty type parameters in type aliases and interfaces.\n- Don't write functions that exceed a given Cognitive Complexity score.\n- Don't nest describe() blocks too deeply in test files.\n- Don't use unnecessary boolean casts.\n- Don't use unnecessary callbacks with flatMap.\n- Use for...of statements instead of Array.forEach.\n- Don't create classes that only have static members (like a static namespace).\n- Don't use this and super in static contexts.\n- Don't use unnecessary catch clauses.\n- Don't use unnecessary constructors.\n- Don't use unnecessary continue statements.\n- Don't export empty modules that don't change anything.\n- Don't use unnecessary escape sequences in regular expression literals.\n- Don't use unnecessary fragments.\n- Don't use unnecessary labels.\n- Don't use unnecessary nested block statements.\n- Don't rename imports, exports, and destructured assignments to the same name.\n- Don't use unnecessary string or template literal concatenation.\n- Don't use String.raw in template literals when there are no escape sequences.\n- Don't use useless case statements in switch statements.\n- Don't use ternary operators when simpler alternatives exist.\n- Don't use useless `this` aliasing.\n- Don't use any or unknown as type constraints.\n- Don't initialize variables to undefined.\n- Don't use the void operators (they're not familiar).\n- Use arrow functions instead of function expressions.\n- Use Date.now() to get milliseconds since the Unix Epoch.\n- Use .flatMap() instead of map().flat() when possible.\n- Use literal property access instead of computed property access.\n- Don't use parseInt() or Number.parseInt() when binary, octal, or hexadecimal literals work.\n- Use concise optional chaining instead of chained logical expressions.\n- Use regular expression literals instead of the RegExp constructor when possible.\n- Don't use number literal object member names that aren't base 10 or use underscore separators.\n- Remove redundant terms from logical expressions.\n- Use while loops instead of for loops when you don't need initializer and update expressions.\n- Don't pass children as props.\n- Don't reassign const variables.\n- Don't use constant expressions in conditions.\n- Don't use `Math.min` and `Math.max` to clamp values when the result is constant.\n- Don't return a value from a constructor.\n- Don't use empty character classes in regular expression literals.\n- Don't use empty destructuring patterns.\n- Don't call global object properties as functions.\n- Don't declare functions and vars that are accessible outside their block.\n- Make sure builtins are correctly instantiated.\n- Don't use super() incorrectly inside classes. Also check that super() is called in classes that extend other constructors.\n- Don't use variables and function parameters before they're declared.\n- Don't use 8 and 9 escape sequences in string literals.\n- Don't use literal numbers that lose precision.\n\n### React and JSX Best Practices\n- Don't use the return value of React.render.\n- Make sure all dependencies are correctly specified in React hooks.\n- Make sure all React hooks are called from the top level of component functions.\n- Don't forget key props in iterators and collection literals.\n- Don't destructure props inside JSX components in Solid projects.\n- Don't define React components inside other components.\n- Don't use event handlers on non-interactive elements.\n- Don't assign to React component props.\n- Don't use both `children` and `dangerouslySetInnerHTML` props on the same element.\n- Don't use dangerous JSX props.\n- Don't use Array index in keys.\n- Don't insert comments as text nodes.\n- Don't assign JSX properties multiple times.\n- Don't add extra closing tags for components without children.\n- Use `<>...` instead of `...`.\n- Watch out for possible \"wrong\" semicolons inside JSX elements.\n\n### Correctness and Safety\n- Don't assign a value to itself.\n- Don't return a value from a setter.\n- Don't compare expressions that modify string case with non-compliant values.\n- Don't use lexical declarations in switch clauses.\n- Don't use variables that haven't been declared in the document.\n- Don't write unreachable code.\n- Make sure super() is called exactly once on every code path in a class constructor before this is accessed if the class has a superclass.\n- Don't use control flow statements in finally blocks.\n- Don't use optional chaining where undefined values aren't allowed.\n- Don't have unused function parameters.\n- Don't have unused imports.\n- Don't have unused labels.\n- Don't have unused private class members.\n- Don't have unused variables.\n- Make sure void (self-closing) elements don't have children.\n- Don't return a value from a function with the return type 'void'\n- Use isNaN() when checking for NaN.\n- Make sure \"for\" loop update clauses move the counter in the right direction.\n- Make sure typeof expressions are compared to valid values.\n- Make sure generator functions contain yield.\n- Don't use await inside loops.\n- Don't use bitwise operators.\n- Don't use expressions where the operation doesn't change the value.\n- Make sure Promise-like statements are handled appropriately.\n- Don't use __dirname and __filename in the global scope.\n- Prevent import cycles.\n- Don't use configured elements.\n- Don't hardcode sensitive data like API keys and tokens.\n- Don't let variable declarations shadow variables from outer scopes.\n- Don't use the TypeScript directive @ts-ignore.\n- Prevent duplicate polyfills from Polyfill.io.\n- Don't use useless backreferences in regular expressions that always match empty strings.\n- Don't use unnecessary escapes in string literals.\n- Don't use useless undefined.\n- Make sure getters and setters for the same property are next to each other in class and object definitions.\n- Make sure object literals are declared consistently (defaults to explicit definitions).\n- Use static Response methods instead of new Response() constructor when possible.\n- Make sure switch-case statements are exhaustive.\n- Make sure the `preconnect` attribute is used when using Google Fonts.\n- Use `Array#{indexOf,lastIndexOf}()` instead of `Array#{findIndex,findLastIndex}()` when looking for the index of an item.\n- Make sure iterable callbacks return consistent values.\n- Use `with { type: \"json\" }` for JSON module imports.\n- Use numeric separators in numeric literals.\n- Use object spread instead of `Object.assign()` when constructing new objects.\n- Always use the radix argument when using `parseInt()`.\n- Make sure JSDoc comment lines start with a single asterisk, except for the first one.\n- Include a description parameter for `Symbol()`.\n- Don't use spread (`...`) syntax on accumulators.\n- Don't use the `delete` operator.\n- Don't access namespace imports dynamically.\n- Don't use namespace imports.\n- Declare regex literals at the top level.\n- Don't use `target=\"_blank\"` without `rel=\"noopener\"`.\n\n### TypeScript Best Practices\n- Don't use TypeScript enums.\n- Don't export imported variables.\n- Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.\n- Don't use TypeScript namespaces.\n- Don't use non-null assertions with the `!` postfix operator.\n- Don't use parameter properties in class constructors.\n- Don't use user-defined types.\n- Use `as const` instead of literal types and type annotations.\n- Use either `T[]` or `Array` consistently.\n- Initialize each enum member value explicitly.\n- Use `export type` for types.\n- Use `import type` for types.\n- Make sure all enum members are literal values.\n- Don't use TypeScript const enum.\n- Don't declare empty interfaces.\n- Don't let variables evolve into any type through reassignments.\n- Don't use the any type.\n- Don't misuse the non-null assertion operator (!) in TypeScript files.\n- Don't use implicit any type on variable declarations.\n- Don't merge interfaces and classes unsafely.\n- Don't use overload signatures that aren't next to each other.\n- Use the namespace keyword instead of the module keyword to declare TypeScript namespaces.\n\n### Style and Consistency\n- Don't use global `eval()`.\n- Don't use callbacks in asynchronous tests and hooks.\n- Don't use negation in `if` statements that have `else` clauses.\n- Don't use nested ternary expressions.\n- Don't reassign function parameters.\n- This rule lets you specify global variable names you don't want to use in your application.\n- Don't use specified modules when loaded by import or require.\n- Don't use constants whose value is the upper-case version of their name.\n- Use `String.slice()` instead of `String.substr()` and `String.substring()`.\n- Don't use template literals if you don't need interpolation or special-character handling.\n- Don't use `else` blocks when the `if` block breaks early.\n- Don't use yoda expressions.\n- Don't use Array constructors.\n- Use `at()` instead of integer index access.\n- Follow curly brace conventions.\n- Use `else if` instead of nested `if` statements in `else` clauses.\n- Use single `if` statements instead of nested `if` clauses.\n- Use `new` for all builtins except `String`, `Number`, and `Boolean`.\n- Use consistent accessibility modifiers on class properties and methods.\n- Use `const` declarations for variables that are only assigned once.\n- Put default function parameters and optional function parameters last.\n- Include a `default` clause in switch statements.\n- Use the `**` operator instead of `Math.pow`.\n- Use `for-of` loops when you need the index to extract an item from the iterated array.\n- Use `node:assert/strict` over `node:assert`.\n- Use the `node:` protocol for Node.js builtin modules.\n- Use Number properties instead of global ones.\n- Use assignment operator shorthand where possible.\n- Use function types instead of object types with call signatures.\n- Use template literals over string concatenation.\n- Use `new` when throwing an error.\n- Don't throw non-Error values.\n- Use `String.trimStart()` and `String.trimEnd()` over `String.trimLeft()` and `String.trimRight()`.\n- Use standard constants instead of approximated literals.\n- Don't assign values in expressions.\n- Don't use async functions as Promise executors.\n- Don't reassign exceptions in catch clauses.\n- Don't reassign class members.\n- Don't compare against -0.\n- Don't use labeled statements that aren't loops.\n- Don't use void type outside of generic or return types.\n- Don't use console.\n- Don't use control characters and escape sequences that match control characters in regular expression literals.\n- Don't use debugger.\n- Don't assign directly to document.cookie.\n- Use `===` and `!==`.\n- Don't use duplicate case labels.\n- Don't use duplicate class members.\n- Don't use duplicate conditions in if-else-if chains.\n- Don't use two keys with the same name inside objects.\n- Don't use duplicate function parameter names.\n- Don't have duplicate hooks in describe blocks.\n- Don't use empty block statements and static blocks.\n- Don't let switch clauses fall through.\n- Don't reassign function declarations.\n- Don't allow assignments to native objects and read-only global variables.\n- Use Number.isFinite instead of global isFinite.\n- Use Number.isNaN instead of global isNaN.\n- Don't assign to imported bindings.\n- Don't use irregular whitespace characters.\n- Don't use labels that share a name with a variable.\n- Don't use characters made with multiple code points in character class syntax.\n- Make sure to use new and constructor properly.\n- Don't use shorthand assign when the variable appears on both sides.\n- Don't use octal escape sequences in string literals.\n- Don't use Object.prototype builtins directly.\n- Don't redeclare variables, functions, classes, and types in the same scope.\n- Don't have redundant \"use strict\".\n- Don't compare things where both sides are exactly the same.\n- Don't let identifiers shadow restricted names.\n- Don't use sparse arrays (arrays with holes).\n- Don't use template literal placeholder syntax in regular strings.\n- Don't use the then property.\n- Don't use unsafe negation.\n- Don't use var.\n- Don't use with statements in non-strict contexts.\n- Make sure async functions actually use await.\n- Make sure default clauses in switch statements come last.\n- Make sure to pass a message value when creating a built-in error.\n- Make sure get methods always return a value.\n- Use a recommended display strategy with Google Fonts.\n- Make sure for-in loops include an if statement.\n- Use Array.isArray() instead of instanceof Array.\n- Make sure to use the digits argument with Number#toFixed().\n- Make sure to use the \"use strict\" directive in script files.\n\n### Next.js Specific Rules\n- Don't use `` elements in Next.js projects.\n- Don't use `` elements in Next.js projects.\n- Don't import next/document outside of pages/_document.jsx in Next.js projects.\n- Don't use the next/head module in pages/_document.js on Next.js projects.\n\n### Testing Best Practices\n- Don't use export or module.exports in test files.\n- Don't use focused tests.\n- Make sure the assertion function, like expect, is placed inside an it() function call.\n- Don't use disabled tests.\n\n## Common Tasks\n- `npx ultracite init` - Initialize Ultracite in your project\n- `npx ultracite fix` - Format and fix code automatically\n- `npx ultracite check` - Check for issues without fixing\n\n## Example: Error Handling\n```typescript\n// ✅ Good: Comprehensive error handling\ntry {\n const result = await fetchData();\n return { success: true, data: result };\n} catch (error) {\n console.error('API call failed:', error);\n return { success: false, error: error.message };\n}\n\n// ❌ Bad: Swallowing errors\ntry {\n return await fetchData();\n} catch (e) {\n console.log(e);\n}\n```" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to MagicUI\n\nThank you for your interest in contributing to MagicUI! We appreciate your support and look forward to your contributions. This guide will help you understand the directory structure and provide detailed instructions on how to add a new component to MagicUI.\n\nRead the [example PR](https://github.com/magicuidesign/magicui/pull/780) to learn which files you need to add. **You only need to change 5 files to add a new component or effect** and it only takes around 10 minutes of work!\n\nOnce done, open a pull request from your forked repo to the main repo [here](https://github.com/magicuidesign/magicui/compare).\n\n## Getting Started\n\n### Fork and Clone the Repository\n\n1. **Fork this repository** \n Click [here](https://github.com/magicuidesign/magicui/fork) to fork the repository.\n\n2. **Clone your forked repository to your local machine**\n\n ```bash\n git clone https://github.com//magicui.git\n ```\n\n3. **Navigate to the project directory**\n\n ```bash\n cd magicui\n ```\n\n4. **Create a new branch for your changes**\n\n ```bash\n git checkout -b my-new-branch\n ```\n\n5. **Install dependencies**\n\n ```bash\n pnpm i\n ```\n\n6. **Create a `.env.local` file**\n\n ```bash\n touch .env.local && echo \"NEXT_PUBLIC_APP_URL=http://localhost:3000\" > .env.local\n ```\n\n7. **Run the project**\n ```bash\n pnpm dev\n ```\n\n## Adding a New Component\n\nTo add a new component to MagicUI, you will need to modify several files. Follow these steps:\n\n### 1. Create Component\n\nCreate the main component in `registry/magicui/example-component.tsx`\n\n```typescript\nimport React from 'react'\n\nexport default function ExampleComponent() {\n return (\n
\n This is your component.\n
\n )\n}\n```\n\n### 2. Create Component Demo\n\nProvide a basic example to showcase your component in `registry/example/example-component-demo.tsx`\n\n```typescript\nimport ExampleComponent from '@/registry/magicui/example-component'\n\nexport default function ExampleComponentDemo() {\n return (\n
\n \n
\n )\n}\n```\n\n### 3. Update Sidebar\n\nAdd your component to the sidebar in `config/docs.ts`\n\n```typescript\n{\n title: \"Example Component\",\n href: `/docs/components/example-component`,\n items: [],\n label: \"New\",\n}\n```\n\n### 4. Create docs\n\nCreate an MDX file for documenting your component in `content/docs/components/example-component.mdx`\n\n````md\n---\ntitle: Example Component\ndate: 2024-06-01\ndescription: Example component for Magic UI\nauthor: magicui\npublished: true\n---\n\n\n\n## Installation\n\n\n\n\n CLI\n Manual\n\n\n\n```bash\nnpx shadcn@latest add @magicui/example-component\n```\n\n\n\n\n\n\n\nCopy and paste the following code into your project.\n\n\n\nUpdate the import paths to match your project setup.\n\nAdd the required CSS animations\n\nAdd the following animations to your global CSS file inside the `@theme inline` block (e.g., `app/globals.css` or similar)\n\n```css title=\"app/globals.css\" {1-2,4-18}\n--animate-example: example var(--duration) infinite linear;\n\n@keyframes example {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(calc(-100% - var(--gap)));\n }\n}\n```\n\n\n\n\n\n\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------- | -------- | -------- | -------------------------- |\n| `color` | `String` | `\"blue\"` | The color of the component |\n````\n\n### 5. Update Registry\n\nExport your component and example in the registry files:\n\nIn `registry/registry-ui.ts`:\n\n```typescript\nexport const ui: Registry = [\n // ... existing components ...\n {\n name: \"example-component\",\n type: \"registry:ui\",\n title: \"Example Component\",\n description:\n \"A versatile component that can be used to display various types of content such as text, images, or videos.\",\n dependencies: [\"motion\"],\n files: [\n {\n path: \"registry/magicui/example-component.tsx\",\n type: \"registry:ui\",\n },\n ],\n // Add CSS variables for the component\n cssVars: {\n theme: {\n \"animate-example\": \"example var(--duration) infinite linear\",\n },\n },\n // Add CSS keyframes for the component\n css: {\n \"@keyframes example\": {\n from: {\n transform: \"translateX(0)\",\n },\n to: {\n transform: \"translateX(calc(-100% - var(--gap)))\",\n },\n },\n },\n },\n];\n```\n\nIn `registry/registry-examples.ts`:\n\n```typescript\nexport const examples: Registry = [\n // ... existing examples ...\n {\n name: \"example-component-demo\",\n description: \"An example of the example-component\",\n type: \"registry:example\",\n registryDependencies: [\"example-component\"],\n files: [\n {\n path: \"registry/example/example-component-demo.tsx\",\n type: \"registry:example\",\n },\n ],\n },\n];\n```\n\nMake sure to add any necessary dependencies, tailwind configurations, or other properties as needed for your specific component.\n\n### 6. Build registry\n\n```bash\npnpm build:registry\n```\n\n## Adding to the showcase\n\n### 1. Create your showcase as a MDX file\n\nCreate your showcase in `content/showcase/website-name.mdx`\n\n```mdx\n---\ntitle: website-name.com\ndescription: Website description\nimage: /showcase/website-name.png\nhref: https://website-name.com\nfeatured: true\naffiliation: YC S25, raised $10M\n---\n```\n\n### 2. Create an image\n\nUpload an image of your site to `public/showcase/website-name.png`\n\n## Ask for Help\n\nFor any help or questions, please open a new GitHub issue.\n" }, { "path": "LICENSE.md", "content": "MIT License\n\nCopyright (c) Magic UI\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": "\"Magic\n

Magic UI

\n

\n UI Library for Design Engineers\n

\n
\n \"GitHub\n \"Twitter\n \"License\"\n \"Discord\"\n \n
\n\n## Documentation\n\nVisit https://magicui.design/docs to view the documentation.\n\n## Contributing\n\nVisit our [contributing guide](https://github.com/magicuidesign/magicui/blob/main/CONTRIBUTING.md) to learn how to contribute. It only takes ~5 minutes to add your own!\n\n## Community\n\nHave questions, comments or feedback? [Join our discord](http://magicui.design/discord).\n\n## Authors\n\n\n \n\n\n## Stats\n\n![Alt](https://repobeats.axiom.co/api/embed/38b63c4514a8a4cd7d1307985af2889c78d67bcc.svg \"Repobeats analytics image\")\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=magicuidesign/magicui&type=Date)](https://www.star-history.com/#magicuidesign/magicui&Date)\n\n## License\n\nLicensed under the [MIT license](https://github.com/magicuidesign/magicui/blob/main/LICENSE.md).\n" }, { "path": "apps/www/.env.example", "content": "NEXT_PUBLIC_APP_URL=http://localhost:3000\n" }, { "path": "apps/www/.gitignore", "content": "# App-specific ignores\n.next\nout\nbuild\nnode_modules\n.turbo\n.vercel\n*.tsbuildinfo\nnext-env.d.ts\n.source\n" }, { "path": "apps/www/.prettierignore", "content": "registry/__index__.tsx\n" }, { "path": "apps/www/app/(blog)/blog/[...slug]/page.tsx", "content": "/* eslint-disable @next/next/no-img-element */\nimport type { Metadata } from \"next\"\nimport Link from \"next/link\"\nimport { notFound } from \"next/navigation\"\nimport { mdxComponents } from \"@/mdx-components\"\nimport { ArrowLeftIcon } from \"lucide-react\"\nimport type { BlogPosting, BreadcrumbList, WithContext } from \"schema-dts\"\n\nimport { siteConfig } from \"@/config/site\"\nimport { blogSource } from \"@/lib/source\"\nimport { absoluteUrl, calculateReadingTime, formatDate } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { MobileTOC } from \"@/components/blog/mobile-toc\"\nimport { BlogTableOfContents } from \"@/components/blog/table-of-contents\"\nimport { SidebarCTA } from \"@/components/sidebar-cta\"\n\nexport const revalidate = false\nexport const dynamic = \"force-static\"\nexport const dynamicParams = false\n\ninterface PageProps {\n params: Promise<{\n slug: string[]\n }>\n}\n\nexport function generateStaticParams() {\n return blogSource.generateParams()\n}\n\nasync function getDocFromParams({ params }: PageProps) {\n const { slug } = await params\n const page = blogSource.getPage(slug)\n if (!page) notFound()\n const doc = page.data\n if (!doc.title || !doc.description) {\n notFound()\n }\n\n return { doc, page }\n}\n\nexport async function generateMetadata({\n params,\n}: PageProps): Promise {\n const { doc, page } = await getDocFromParams({ params })\n\n if (!page) {\n return {}\n }\n\n return {\n title: `${doc.title} | ${siteConfig.name}`,\n description: doc.description,\n openGraph: {\n title: doc.title,\n description: doc.description,\n type: \"article\",\n url: absoluteUrl(page.url),\n images: [\n {\n url: doc.image ?? \"\",\n width: 1200,\n height: 630,\n },\n ],\n },\n twitter: {\n card: \"summary_large_image\",\n title: doc.title,\n description: doc.description,\n\n images: [doc.image ?? \"\"],\n creator: \"@dillionverma\",\n },\n }\n}\n\nexport default async function BlogPage({ params }: PageProps) {\n const { doc, page } = await getDocFromParams({ params })\n const content = await doc.getText(\"raw\")\n const MDX = doc.body\n\n const toBreadcrumbLabel = (segment: string) =>\n segment\n .split(\"-\")\n .filter(Boolean)\n .map((part) => part.slice(0, 1).toUpperCase() + part.slice(1))\n .join(\" \") || segment\n\n const slugSegments = page.url\n .replace(/^\\/blog\\/?/, \"\")\n .split(\"/\")\n .filter(Boolean)\n const intermediateCrumbs = slugSegments\n .slice(0, -1)\n .map((segment, index) => ({\n name: toBreadcrumbLabel(segment),\n url: `/blog/${slugSegments.slice(0, index + 1).join(\"/\")}`,\n }))\n const breadcrumbs = [\n { name: \"Home\", url: \"/\" },\n { name: \"Blog\", url: \"/blog\" },\n ...intermediateCrumbs,\n { name: doc.title, url: page.url },\n ] as const\n\n // Generate structured data for individual blog post\n const structuredData: WithContext = {\n \"@context\": \"https://schema.org\",\n \"@type\": \"BlogPosting\",\n headline: doc.title,\n description: doc.description,\n url: absoluteUrl(page.url),\n datePublished: doc.publishedOn,\n dateModified: doc.publishedOn,\n author: {\n \"@type\": \"Person\",\n name: doc.author ?? \"Magic UI Team\",\n url: siteConfig.links?.twitter,\n },\n image: doc.image ? [doc.image] : undefined,\n publisher: {\n \"@type\": \"Organization\",\n name: siteConfig.name,\n url: siteConfig.url,\n logo: {\n \"@type\": \"ImageObject\",\n url: `${siteConfig.url}/logo.png`,\n },\n },\n mainEntityOfPage: {\n \"@type\": \"WebPage\",\n \"@id\": absoluteUrl(page.url),\n },\n wordCount: content ? content.split(/\\s+/).length : 0,\n timeRequired: `PT${calculateReadingTime(content || \"\")}M`,\n keywords: (() => {\n const docTag = doc.tags\n if (!docTag) return undefined\n return Array.isArray(docTag) ? docTag : [docTag]\n })(),\n inLanguage: \"en-US\",\n }\n\n const breadcrumbStructuredData: WithContext = {\n \"@context\": \"https://schema.org\",\n \"@type\": \"BreadcrumbList\",\n itemListElement: breadcrumbs.map((breadcrumb, index) => ({\n \"@type\": \"ListItem\",\n position: index + 1,\n name: breadcrumb.name,\n item: absoluteUrl(breadcrumb.url),\n })),\n }\n\n const serializedStructuredData = JSON.stringify(structuredData).replace(\n /\n \n \n
\n
\n \n \n Back to Blog\n \n
\n
\n {doc && (\n
\n
\n \n
\n
\n
\n

\n {doc.title}\n

\n

\n {doc.description}\n

\n
\n {doc.publishedOn && (\n \n )}\n {doc.publishedOn && ·}\n {calculateReadingTime(content)} min read\n
\n
\n
\n
\n {(() => {\n const docTag = doc.tags\n const tags = docTag\n ? Array.isArray(docTag)\n ? docTag\n : [docTag]\n : []\n\n return (\n tags.length > 0 && (\n
\n {tags.map((tag) => (\n \n \n {tag}\n \n \n ))}\n
\n )\n )\n })()}\n
\n
\n )}\n
\n
\n \n
\n \n
\n \n
\n \n )\n}\n" }, { "path": "apps/www/app/(blog)/blog/layout.tsx", "content": "import { SiteFooter } from \"@/components/site-footer\"\nimport { SiteHeader } from \"@/components/site-header\"\n\nexport default function Layout({ children }: { children: React.ReactNode }) {\n return (\n <>\n \n
{children}
\n \n \n )\n}\n" }, { "path": "apps/www/app/(blog)/blog/page.tsx", "content": "/* eslint-disable @next/next/no-img-element */\nimport type { Metadata } from \"next\"\nimport Link from \"next/link\"\nimport type { Blog, BreadcrumbList, WithContext } from \"schema-dts\"\n\nimport { siteConfig } from \"@/config/site\"\nimport { blogSource } from \"@/lib/source\"\nimport {\n absoluteUrl,\n calculateReadingTime,\n constructMetadata,\n formatDate,\n normalizeTag,\n pluralize,\n} from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\n\nexport const revalidate = false\nexport const dynamic = \"force-static\"\nexport const dynamicParams = false\n\nexport function generateStaticParams() {\n return []\n}\n\nconst BLOG_DESCRIPTION =\n \"Latest articles about UI components, animations, and web development best practices.\"\n\nexport const metadata: Metadata = constructMetadata({\n title: `Blog | ${siteConfig.name}`,\n description: BLOG_DESCRIPTION,\n})\n\nexport default async function Page({\n searchParams,\n}: {\n searchParams?: Promise<{ tag?: string }>\n}) {\n const params = await searchParams\n const selectedTag = params?.tag ?? \"\"\n\n const posts = blogSource.getPages().sort((a, b) => {\n const dateA = new Date(a.data?.publishedOn || 0).getTime()\n const dateB = new Date(b.data?.publishedOn || 0).getTime()\n return dateB - dateA\n })\n\n const filteredPosts = selectedTag\n ? posts.filter((p) => normalizeTag(p.data?.tags).includes(selectedTag))\n : posts\n\n const breadcrumbs = [\n { name: \"Home\", url: \"/\" },\n { name: \"Blog\", url: \"/blog\" },\n ] as const\n\n const breadcrumbStructuredData: WithContext = {\n \"@context\": \"https://schema.org\",\n \"@type\": \"BreadcrumbList\",\n itemListElement: breadcrumbs.map((breadcrumb, index) => ({\n \"@type\": \"ListItem\",\n position: index + 1,\n name: breadcrumb.name,\n item: absoluteUrl(breadcrumb.url),\n })),\n }\n\n // Generate structured data\n const structuredData: WithContext = {\n \"@context\": \"https://schema.org\",\n \"@type\": \"Blog\",\n name: `${siteConfig.name} Blog`,\n description: BLOG_DESCRIPTION,\n url: `${siteConfig.url}/blog`,\n inLanguage: \"en-US\",\n publisher: {\n \"@type\": \"Organization\",\n name: siteConfig.name,\n url: siteConfig.url,\n logo: {\n \"@type\": \"ImageObject\",\n url: `${siteConfig.url}/icon.png`,\n },\n },\n blogPost: filteredPosts.slice(0, 10).map((post) => ({\n \"@type\": \"BlogPosting\",\n headline: post.data?.title,\n description: post.data?.description,\n url: `${siteConfig.url}${post.url}`,\n datePublished: post.data?.publishedOn,\n dateModified: post.data?.publishedOn,\n author: {\n \"@type\": \"Person\",\n name: post.data?.author,\n url: siteConfig.links?.twitter,\n },\n image: post.data?.image ? [post.data?.image] : undefined,\n keywords:\n normalizeTag(post.data?.tags).length > 0\n ? normalizeTag(post.data?.tags)\n : undefined,\n publisher: {\n \"@type\": \"Organization\",\n name: siteConfig.name,\n url: siteConfig.url,\n },\n })),\n }\n\n const serializedStructuredData = JSON.stringify(structuredData).replace(\n /\n \n \n
\n
\n
\n

Blog

\n

\n {BLOG_DESCRIPTION}\n

\n
\n\n {filteredPosts.length > 0 && (\n \n {selectedTag\n ? `${pluralize(filteredPosts.length, \"article\")} tagged with \"${selectedTag}\"`\n : `${pluralize(filteredPosts.length, \"article\")} total`}\n \n )}\n
\n\n {/* {tags.length > 0 && (\n \n )} */}\n\n {filteredPosts.length === 0 ? (\n
\n

\n {selectedTag\n ? `No articles found for \"${selectedTag}\".`\n : \"No posts yet.\"}\n

\n {selectedTag && (\n \n View all articles\n \n )}\n
\n ) : (\n
\n {filteredPosts.map(async (post) => {\n const content = await post.data?.getText(\"raw\")\n return (\n \n \n {post.data?.image && (\n
\n \n
\n )}\n\n
\n
\n

\n {post.data?.title ?? post.url}\n

\n {post.data?.description && (\n

\n {post.data.description}\n

\n )}\n
\n\n
\n {post.data?.publishedOn && (\n \n )}\n {post.data?.publishedOn && ·}\n \n {calculateReadingTime(content ?? \"\")} min read\n \n
\n\n {normalizeTag(post.data?.tags).length > 0 && (\n
\n {normalizeTag(post.data.tags)\n .slice(0, 3)\n .map((tag) => (\n \n {tag}\n \n ))}\n
\n )}\n
\n \n \n )\n })}\n
\n )}\n
\n \n )\n}\n" }, { "path": "apps/www/app/(docs)/docs/[[...slug]]/page.tsx", "content": "import type { Metadata } from \"next\"\nimport Link from \"next/link\"\nimport { notFound } from \"next/navigation\"\nimport { mdxComponents } from \"@/mdx-components\"\nimport { IconArrowLeft, IconArrowRight } from \"@tabler/icons-react\"\nimport type { BreadcrumbItem } from \"fumadocs-core/breadcrumb\"\nimport { getBreadcrumbItems } from \"fumadocs-core/breadcrumb\"\nimport { findNeighbour } from \"fumadocs-core/server\"\nimport type { BreadcrumbList, TechArticle, WithContext } from \"schema-dts\"\n\nimport { getNeighboursFromConfig } from \"@/config/docs\"\nimport { siteConfig } from \"@/config/site\"\nimport { replaceComponentSource } from \"@/lib/docs\"\nimport { source } from \"@/lib/source\"\nimport { absoluteUrl } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Contribute } from \"@/components/contribute\"\nimport { DocsCopyPage } from \"@/components/docs-copy-page\"\nimport { DocsTableOfContents } from \"@/components/docs-toc\"\nimport { SidebarCTA } from \"@/components/sidebar-cta\"\n\nexport const revalidate = false\nexport const dynamic = \"force-static\"\nexport const dynamicParams = false\n\nexport function generateStaticParams() {\n return source.generateParams()\n}\n\ninterface DocPageProps {\n params: Promise<{\n slug: string[]\n }>\n}\n\nasync function getDocFromParams({ params }: DocPageProps) {\n const { slug } = await params\n const page = source.getPage(slug)\n if (!page) notFound()\n const doc = page.data\n if (!doc.title || !doc.description) {\n notFound()\n }\n\n return { doc, page }\n}\n\nexport async function generateMetadata({\n params,\n}: DocPageProps): Promise {\n const { doc, page } = await getDocFromParams({ params })\n\n if (!doc) {\n return {}\n }\n\n const ogUrl = new URL(absoluteUrl(\"/og\"))\n ogUrl.searchParams.set(\"title\", doc.title ?? \"\")\n ogUrl.searchParams.set(\"description\", doc.description ?? \"\")\n\n return {\n title: `${doc.title} | React Components & Templates`,\n description: doc.description,\n openGraph: {\n title: doc.title,\n description: doc.description,\n type: \"article\",\n url: absoluteUrl(page.url),\n images: [\n {\n url: ogUrl.toString(),\n width: 1200,\n height: 630,\n },\n ],\n },\n twitter: {\n card: \"summary_large_image\",\n title: doc.title,\n description: doc.description,\n images: [ogUrl.toString()],\n creator: \"@dillionverma\",\n },\n }\n}\n\nexport default async function DocPage({ params }: DocPageProps) {\n const { doc, page } = await getDocFromParams({ params })\n const MDX = doc.body\n const content = await doc.getText(\"raw\")\n const configNeighbours = getNeighboursFromConfig(page.url)\n const treeNeighbours = findNeighbour(source.pageTree, page.url)\n const neighbours = {\n previous: configNeighbours.previous ?? treeNeighbours.previous,\n next: configNeighbours.next ?? treeNeighbours.next,\n }\n const breadcrumbs = getBreadcrumbItems(page.url, source.pageTree, {\n includeRoot: { url: \"/docs\" },\n includePage: true,\n })\n const lastBreadcrumb = breadcrumbs.at(-1)\n\n const resolveBreadcrumbName = (item: BreadcrumbItem): string => {\n if (typeof item.name === \"string\") {\n return item.name\n }\n\n if (typeof item.name === \"number\") {\n return `${item.name}`\n }\n\n return doc.title\n }\n\n const breadcrumbStructuredData: WithContext = {\n \"@context\": \"https://schema.org\",\n \"@type\": \"BreadcrumbList\",\n itemListElement: breadcrumbs.map((item, index) => ({\n \"@type\": \"ListItem\",\n position: index + 1,\n name: resolveBreadcrumbName(item),\n item: absoluteUrl(item.url ?? page.url),\n })),\n }\n\n const docStructuredData: WithContext = {\n \"@context\": \"https://schema.org\",\n \"@type\": \"TechArticle\",\n headline: doc.title,\n name: doc.title,\n description: doc.description,\n url: absoluteUrl(page.url),\n inLanguage: \"en-US\",\n datePublished: doc.date?.toString(),\n dateModified: doc.lastModified?.toString(),\n mainEntityOfPage: absoluteUrl(page.url),\n publisher: {\n \"@type\": \"Organization\",\n name: siteConfig.name,\n url: siteConfig.url,\n logo: {\n \"@type\": \"ImageObject\",\n url: `${siteConfig.url}/logo.png`,\n },\n },\n author: {\n \"@type\": \"Organization\",\n name: siteConfig.name,\n url: siteConfig.url,\n },\n isPartOf: {\n \"@type\": \"CreativeWorkSeries\",\n name: \"Magic UI Documentation\",\n url: absoluteUrl(\"/docs\"),\n },\n wordCount: content ? content.split(/\\s+/).length : 0,\n }\n\n const serializedDocStructuredData = JSON.stringify(docStructuredData).replace(\n /\n \n \n \n
\n
\n
\n
\n {breadcrumbs.length > 1 ? (\n \n
    \n {breadcrumbs.map((item) => {\n const label = resolveBreadcrumbName(item)\n const key = item.url ?? label\n const isLast = item === lastBreadcrumb\n\n return (\n
  1. \n {isLast ? (\n \n {label}\n \n ) : item.url ? (\n \n {label}\n \n ) : (\n {label}\n )}\n {!isLast ? / : null}\n
    2. \n )\n })}\n
\n \n ) : null}\n
\n

\n {doc.title}\n

\n
\n \n {neighbours.previous && (\n \n \n \n Previous\n \n \n )}\n {neighbours.next && (\n \n \n Next\n \n \n \n )}\n
\n
\n {doc.description && (\n

\n {doc.description}\n

\n )}\n
\n
\n
\n \n
\n
\n \n
\n \n )\n}\n" }, { "path": "apps/www/components/sections/testimonials.tsx", "content": "import { ExpandableMasonarySection } from \"@/components/sections/expandable-masonary-section\"\nimport { TestimonialTweetLink } from \"@/components/sections/testimonial-tweet-link\"\nimport { TweetCard } from \"@/registry/magicui/tweet-card\"\n\nconst allTweets = [\n \"https://x.com/steventey/status/1722659583464968612\",\n \"https://x.com/rauchg/status/1867249854613008822\",\n \"https://x.com/mckaywrigley/status/1831098800351719924\",\n \"https://x.com/chronark_/status/1754781648262967323\",\n \"https://x.com/aidenybai/status/1793403298843869672\",\n \"https://x.com/phuctm97/status/1793443202592288914\",\n \"https://x.com/RayFernando1337/status/1821208623638573211\",\n \"https://x.com/SullyOmarr/status/1668506160620769280\",\n \"https://x.com/vahaah/status/1878800566144708650\",\n \"https://x.com/DmytroKrasun/status/1793642777873633543\",\n \"https://x.com/MarcKlingen/status/1793422145399455746\",\n \"https://x.com/jordanphughes/status/1794287517430415390\",\n \"https://x.com/jordienr/status/1681389309037772820\",\n \"https://x.com/mckaywrigley/status/1831185841051590857\",\n \"https://x.com/karmpat72748262/status/1889758543840002457\",\n \"https://x.com/WhopIO/status/1722690049374830639\",\n \"https://x.com/hailsxr/status/1853552782076477578\",\n \"https://x.com/taishik_/status/1668510585926066176\",\n \"https://x.com/sup_nim/status/1668525144409624578\",\n \"https://x.com/saporito_eth/status/1801445101786304799\",\n \"https://x.com/JakeDuth/status/1668442365625790465\",\n \"https://x.com/0xRaduan/status/1668557577985179648\",\n \"https://x.com/yazinsai/status/1668617800934641672\",\n \"https://x.com/wes_walke/status/1668612106696941570\",\n \"https://x.com/beneverman/status/1681477151042797568\",\n \"https://x.com/DevAlien/status/1668618017528479745\",\n \"https://x.com/fredmaiaarantes/status/1684676668445622272\",\n \"https://x.com/DesignSumu/status/1668559314272022528\",\n \"https://x.com/commandodev/status/1668640878225764354\",\n \"https://x.com/SandBoxSo/status/1668570645741948930\",\n \"https://x.com/sxndrao/status/1668634137547399168\",\n \"https://x.com/sameerposwal03/status/1862084069833797788\",\n \"https://x.com/eersnington/status/1854657826011967597\",\n \"https://x.com/fardeen14693425/status/1857782464673923476\",\n \"https://x.com/Md_Sadiq_Md/status/1858221399959359566\",\n \"https://x.com/AwesomAmri/status/1668432554842619906\",\n \"https://x.com/avansteenweghen/status/1783271768138146086\",\n \"https://x.com/lizhagearty/status/1835827024981541193\",\n \"https://x.com/namyakhann/status/1793412434121949344\",\n //\"https://x.com/sphinxsaas/status/1879233539109216723\",\n // \"https://x.com/chronark_/status/1779077288329433146\",\n // \"https://x.com/_raoufai/status/1850950163051024470\",\n // \"https://x.com/taishik_/status/1875316979831337058\",\n // \"https://x.com/rauchg/status/1803626308720796147\",\n // \"https://x.com/dillionverma/status/1879324180598165702\",\n // \"https://x.com/Star_Knight12/status/1861814034363981989\",\n // \"https://x.com/mohamedzamakhan/status/1859810055924895904\",\n // \"https://x.com/DutchEngIishman/status/1795888864202043645\",\n].map((t) => t.split(\"/\").slice(-1)[0])\n\nexport function Testimonials() {\n return (\n
\n

\n What People Are Saying on Twitter\n

\n \n {allTweets.map((id) => (\n \n \n \n ))}\n \n
\n )\n}\n" }, { "path": "apps/www/components/sections/video-testimonials.tsx", "content": "\"use client\"\n\nimport type { SVGProps } from \"react\"\nimport { useState } from \"react\"\nimport Image from \"next/image\"\nimport { motion } from \"motion/react\"\n\nconst YOUTUBE_THUMBNAIL_BASE_URL = \"https://img.youtube.com/vi\"\nconst VIDEO_EMBEDS = [\n \"https://www.youtube.com/embed/UGm8djxwC5s\",\n \"https://www.youtube.com/embed/qh3NGpYRG3I\",\n \"https://www.youtube.com/embed/AkN6xJcnVYs\",\n \"https://www.youtube.com/embed/hlSu_ldrbQw\",\n \"https://www.youtube.com/embed/ZYvvTehpA5I\",\n] as const\n\nfunction extractVideoId(url: string) {\n try {\n const parsed = new URL(url)\n const pathnameParts = parsed.pathname.split(\"/\")\n const lastSegment = pathnameParts.at(-1)\n if (!lastSegment) {\n return \"\"\n }\n return lastSegment.split(\"?\").at(0) ?? \"\"\n } catch {\n return \"\"\n }\n}\n\nfunction buildEmbedSrc(url: string, shouldAutoplay: boolean) {\n if (!shouldAutoplay) {\n return url\n }\n\n return url.includes(\"?\") ? `${url}&autoplay=1` : `${url}?autoplay=1`\n}\n\nfunction PlayIcon(props: SVGProps) {\n return (\n \n Play\n \n \n \n )\n}\n\nexport function VideoTestimonials() {\n const [activeIndex, setActiveIndex] = useState(null)\n\n return (\n \n

\n Featured on YouTube\n

\n
\n {VIDEO_EMBEDS.map((embedUrl, index) => {\n const videoId = extractVideoId(embedUrl)\n const isActive = activeIndex === index\n const thumbnailSrc = videoId\n ? `${YOUTUBE_THUMBNAIL_BASE_URL}/${videoId}/hqdefault.jpg`\n : undefined\n\n const columnClasses =\n index === 0\n ? \"md:col-span-4 md:row-span-2\"\n : index === 1 || index === 2\n ? \"md:col-span-2 md:row-span-1\"\n : \"md:col-span-3 md:row-span-1\"\n\n return (\n {\n setActiveIndex(index)\n }}\n onKeyDown={(event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault()\n setActiveIndex(index)\n }\n }}\n className={`group bg-card focus-visible:outline-primary border-border hover:border-border/80 relative cursor-pointer overflow-hidden rounded-xl border transition-[border-color,transform] duration-200 ease-in-out focus-visible:outline focus-visible:outline-offset-2 ${columnClasses}`}\n whileHover={{ scale: 1.01 }}\n >\n {!isActive && (\n <>\n {thumbnailSrc ? (\n \n ) : (\n \n Video preview unavailable\n \n )}\n
\n
\n \n \n \n \n )}\n {isActive && (\n \n )}\n \n )\n })}\n
\n \n )\n}\n" }, { "path": "apps/www/components/sidebar-cta.tsx", "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { CheckIcon, ChevronRight } from \"lucide-react\"\n\nimport { trackEvent } from \"@/lib/events\"\nimport { Button } from \"@/components/ui/button\"\nimport { PingDot } from \"@/components/ping-dot\"\nimport { AnimatedShinyText } from \"@/registry/magicui/animated-shiny-text\"\nimport { AuroraText } from \"@/registry/magicui/aurora-text\"\nimport { LineShadowText } from \"@/registry/magicui/line-shadow-text\"\nimport { TextAnimate } from \"@/registry/magicui/text-animate\"\n\nexport function ProCTA() {\n return (\n
\n
\n \n \n Limited Time Offer\n \n
\n\n
\n

\n Ship{\" \"}\n \n Faster\n {\" \"}\n with{\" \"}\n \n Magic UI Pro\n \n

\n

\n Stop building from scratch.
Get{\" \"}\n \n 8 production-ready templates\n {\" \"}\n and{\" \"}\n \n 50+ premium components\n {\" \"}\n that your users will love.\n

\n
\n\n
\n
\n
\n \n
\n Next.js 15 + TypeScript ready\n
\n
\n
\n \n
\n Copy, paste, customize in minutes\n
\n
\n
\n \n
\n Save 100+ hours of development\n
\n
\n\n
\n
\n $199\n \n once\n \n
\n\n trackEvent({ name: \"sidebar_cta_clicked\" })}\n >\n \n Get Lifetime Access\n \n \n \n\n
\n

\n Trusted by 5,000+ developers\n

\n
\n
\n
\n )\n}\n\nexport function ProductHuntCTA() {\n return (\n trackEvent({ name: \"product_hunt_sidebar_cta_clicked\" })}\n className=\"group my-20 flex w-full flex-col items-center justify-center gap-2 rounded-xl bg-[#ff6154] p-4 text-center text-lg leading-tight font-medium text-white\"\n >\n \n Vote for Magic UI on Product Hunt Today!\n \n \n ✨ Show your support and vote for us\n \n\n \n \n )\n}\n\nexport function SidebarCTA() {\n return \n}\n" }, { "path": "apps/www/components/site-banner.tsx", "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { trackEvent } from \"@/lib/events\"\n\nexport function ProBanner() {\n return (\n
\n
\n trackEvent({ name: \"banner_cta_clicked\" })}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"inline-flex text-xs leading-normal md:text-sm\"\n >\n ✨{\" \"}\n \n {\" \"}\n Introducing Magic UI Pro - 50+ blocks and templates to build\n beautiful landing pages in minutes\n {\" \"}\n
\n
\n
\n )\n}\n\nexport function ProductHuntBanner() {\n return (\n
\n
\n trackEvent({ name: \"product_hunt_banner_clicked\" })}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"inline-flex text-xs leading-normal md:text-sm\"\n >\n ✨{\" \"}\n \n {\" \"}\n Magic UI is live on Product Hunt Today! Show your support and vote\n for us.\n {\" \"}\n
\n
\n
\n )\n}\n\nexport function SiteBanner() {\n return \n}\n" }, { "path": "apps/www/components/site-footer.tsx", "content": "import { siteConfig } from \"@/config/site\"\n\nexport function SiteFooter() {\n return (\n
\n
\n
\n
\n Built by{\" \"}\n \n dillion\n \n . The source code is available on{\" \"}\n \n GitHub\n \n .\n
\n
\n
\n
\n )\n}\n" }, { "path": "apps/www/components/site-header.tsx", "content": "import { docsConfig } from \"@/config/docs\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { CommandMenu } from \"@/components/command-menu\"\nimport { DiscordLink } from \"@/components/discord-link\"\nimport { GitHubLink } from \"@/components/github-link\"\nimport { LogoButton } from \"@/components/logo-button\"\nimport { MainNav } from \"@/components/main-nav\"\nimport { MobileNav } from \"@/components/mobile-nav\"\nimport { ModeToggle } from \"@/components/mode-toggle\"\n\nexport function SiteHeader() {\n return (\n
\n
\n
\n \n \n \n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n )\n}\n" }, { "path": "apps/www/components/tech-stack.tsx", "content": "import { cn } from \"@/lib/utils\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\ntype TechComponentType = {\n name: string\n icon: React.ReactNode\n}\n\ntype TechComponents = Record\n\nconst techComponents: TechComponents = {\n nextjs: {\n name: \"Next.js 14\",\n icon: (\n \n Next.js\n \n \n ),\n },\n react: {\n name: \"React\",\n icon: (\n \n React\n \n \n ),\n },\n typescript: {\n name: \"Typescript \",\n icon: (\n \n \n \n ),\n },\n tailwindcss: {\n name: \"Tailwind CSS\",\n icon: (\n \n Tailwind CSS\n \n \n ),\n },\n motion: {\n name: \"Motion\",\n icon: (\n \n Motion\n \n \n \n \n ),\n },\n shadcn: {\n name: \"shadcn\",\n icon: (\n \n {/* */}\n \n \n \n ),\n },\n}\n\nexport function TechStack({\n technologies,\n className,\n}: {\n technologies: string[]\n className?: string\n}) {\n return (\n
\n {technologies.map((tech) => (\n \n {techComponents[tech].icon}\n \n

{techComponents[tech].name}

\n \n \n ))}\n
\n )\n}\n" }, { "path": "apps/www/components/template-open.tsx", "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { GitHubLogoIcon } from \"@radix-ui/react-icons\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ninterface TemplateOpenProps {\n url: string\n free?: boolean\n}\n\nexport function TemplateOpen({ url, free = false }: TemplateOpenProps) {\n if (free) {\n return (\n \n Download\n \n \n )\n }\n\n return (\n \n Buy Now\n \n \n )\n}\n" }, { "path": "apps/www/components/template-preview.tsx", "content": "import { ReactNode } from \"react\"\nimport Link from \"next/link\"\nimport { ExternalLinkIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nexport function TemplatePreview({\n href,\n children,\n}: {\n href: string\n children: ReactNode\n}) {\n return (\n \n {children}\n \n \n )\n}\n" }, { "path": "apps/www/components/theme-provider.tsx", "content": "\"use client\"\n\nimport {\n ThemeProvider as NextThemesProvider,\n ThemeProviderProps,\n} from \"next-themes\"\n\nexport function ThemeProvider({ children, ...props }: ThemeProviderProps) {\n return {children}\n}\n" }, { "path": "apps/www/components/ui/accordion.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Accordion({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction AccordionItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n svg]:rotate-180\",\n className\n )}\n {...props}\n >\n {children}\n \n \n \n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n
{children}
\n \n )\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\n" }, { "path": "apps/www/components/ui/alert.tsx", "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" }, { "path": "apps/www/components/ui/avatar.tsx", "content": "\"use client\"\n\nimport * 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,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n" }, { "path": "apps/www/components/ui/badge.tsx", "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends\n React.HTMLAttributes,\n VariantProps {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n
\n )\n}\n\nexport { Badge, badgeVariants }\n" }, { "path": "apps/www/components/ui/button.tsx", "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n rainbow:\n \"group relative animate-rainbow cursor-pointer border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]\",\n \"rainbow-outline\":\n \"group relative animate-rainbow cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] px-4 text-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-lg gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-lg px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n" }, { "path": "apps/www/components/ui/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/ui/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 & {\n buttonVariant?: React.ComponentProps[\"variant\"]\n}) {\n const defaultClassNames = getDefaultClassNames()\n\n return (\n 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 \"relative flex flex-col gap-4 md:flex-row\",\n defaultClassNames.months\n ),\n month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n nav: cn(\n \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n defaultClassNames.nav\n ),\n button_previous: cn(\n buttonVariants({ variant: buttonVariant }),\n \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n defaultClassNames.button_previous\n ),\n button_next: cn(\n buttonVariants({ variant: buttonVariant }),\n \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n defaultClassNames.button_next\n ),\n month_caption: cn(\n \"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]\",\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\n \"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium\",\n defaultClassNames.dropdowns\n ),\n dropdown_root: cn(\n \"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border\",\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\n \"bg-popover absolute inset-0 opacity-0\",\n defaultClassNames.dropdown\n ),\n caption_label: cn(\n \"select-none font-medium\",\n captionLayout === \"label\"\n ? \"text-sm\"\n : \"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5\",\n defaultClassNames.caption_label\n ),\n table: \"w-full border-collapse\",\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\n weekday: cn(\n \"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal\",\n defaultClassNames.weekday\n ),\n week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n week_number_header: cn(\n \"w-[--cell-size] select-none\",\n defaultClassNames.week_number_header\n ),\n week_number: cn(\n \"text-muted-foreground select-none text-[0.8rem]\",\n defaultClassNames.week_number\n ),\n day: cn(\n \"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md\",\n defaultClassNames.day\n ),\n range_start: cn(\n \"bg-accent rounded-l-md\",\n defaultClassNames.range_start\n ),\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n range_end: cn(\"bg-accent rounded-r-md\", defaultClassNames.range_end),\n today: cn(\n \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n defaultClassNames.today\n ),\n outside: cn(\n \"text-muted-foreground aria-selected:text-muted-foreground\",\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 \n )\n },\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === \"left\") {\n return (\n \n )\n }\n\n if (orientation === \"right\") {\n return (\n \n )\n }\n\n return (\n \n )\n },\n DayButton: CalendarDayButton,\n WeekNumber: ({ children, ...props }) => {\n return (\n \n
\n {children}\n
\n \n )\n },\n ...components,\n }}\n {...props}\n />\n )\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n ...props\n}: React.ComponentProps) {\n const defaultClassNames = getDefaultClassNames()\n\n const ref = React.useRef(null)\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus()\n }, [modifiers.focused])\n\n return (\n span]:text-xs [&>span]:opacity-70\",\n defaultClassNames.day,\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Calendar, CalendarDayButton }\n" }, { "path": "apps/www/components/ui/card.tsx", "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n" }, { "path": "apps/www/components/ui/collapsible.tsx", "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n" }, { "path": "apps/www/components/ui/command.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\"\n\nfunction Command({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandDialog({\n title = \"Command Palette\",\n description = \"Search for a command to run...\",\n children,\n className,\n showCloseButton = true,\n ...props\n}: React.ComponentProps & {\n title?: string\n description?: string\n className?: string\n showCloseButton?: boolean\n}) {\n return (\n \n \n {title}\n {description}\n \n \n \n {children}\n \n \n \n )\n}\n\nfunction CommandInput({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n
\n )\n}\n\nfunction CommandList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandEmpty({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n}\n" }, { "path": "apps/www/components/ui/context-menu.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nContextMenuCheckboxItem.displayName =\n ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuGroup,\n ContextMenuPortal,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuRadioGroup,\n}\n" }, { "path": "apps/www/components/ui/dialog.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Dialog({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction DialogTrigger({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction DialogPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction DialogClose({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: React.ComponentProps & {\n showCloseButton?: boolean\n}) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n \n Close\n \n )}\n \n \n )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n" }, { "path": "apps/www/components/ui/dropdown-menu.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction DropdownMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction DropdownMenuPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction DropdownMenuSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n}\n" }, { "path": "apps/www/components/ui/form.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n FormProvider,\n useFormContext,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/components/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath = FieldPath,\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext(\n {} as FormFieldContextValue\n)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath = FieldPath,\n>({\n ...props\n}: ControllerProps) => {\n return (\n \n \n \n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState, formState } = useFormContext()\n\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within \")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext(\n {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => {\n const id = React.useId()\n\n return (\n \n
\n \n )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField()\n\n return (\n \n )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n \n )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField()\n\n return (\n \n )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message ?? \"\") : children\n\n if (!body) {\n return null\n }\n\n return (\n \n {body}\n

\n )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n useFormField,\n}\n" }, { "path": "apps/www/components/ui/input.tsx", "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Input = React.forwardRef>(\n ({ className, type, ...props }, ref) => {\n return (\n \n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n" }, { "path": "apps/www/components/ui/label.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, ...props }, ref) => (\n \n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n" }, { "path": "apps/www/components/ui/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\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n \n \n \n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n" }, { "path": "apps/www/components/ui/scroll-area.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" }, { "path": "apps/www/components/ui/select.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n span]:line-clamp-1\",\n className\n )}\n {...props}\n >\n {children}\n \n \n \n \n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n \n {children}\n \n \n \n \n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n" }, { "path": "apps/www/components/ui/separator.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(\n (\n { className, orientation = \"horizontal\", decorative = true, ...props },\n ref\n ) => (\n \n )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n" }, { "path": "apps/www/components/ui/sheet.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends\n React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n \n \n Close\n \n {children}\n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" }, { "path": "apps/www/components/ui/sidebar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, VariantProps } from \"class-variance-authority\"\nimport { PanelLeftIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useIsMobile } from \"@/hooks/use-mobile\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from \"@/components/ui/sheet\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n state: \"expanded\" | \"collapsed\"\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext(null)\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n }\n\n return context\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n}) {\n const isMobile = useIsMobile()\n const [openMobile, setOpenMobile] = React.useState(false)\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [setOpenProp, open]\n )\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n }, [isMobile, setOpen, setOpenMobile])\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener(\"keydown\", handleKeyDown)\n return () => window.removeEventListener(\"keydown\", handleKeyDown)\n }, [toggleSidebar])\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? \"expanded\" : \"collapsed\"\n\n const contextValue = React.useMemo(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n )\n\n return (\n \n \n \n {children}\n
\n \n \n )\n}\n\nfunction Sidebar({\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\"\n variant?: \"sidebar\" | \"floating\" | \"inset\"\n collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n if (collapsible === \"none\") {\n return (\n \n {children}\n
\n )\n }\n\n if (isMobile) {\n return (\n \n button]:hidden\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n \n Sidebar\n Displays the mobile sidebar.\n \n
{children}
\n \n \n )\n }\n\n return (\n
\n
\n \n )\n}\n\nfunction SidebarTrigger({\n className,\n onClick,\n ...props\n}: React.ComponentProps) {\n const { toggleSidebar } = useSidebar()\n\n return (\n {\n onClick?.(event)\n toggleSidebar()\n }}\n {...props}\n >\n \n Toggle Sidebar\n \n )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n const { toggleSidebar } = useSidebar()\n\n return (\n