[
  {
    "path": ".cursorrules",
    "content": "# Cursor Rules\n\n## General\n\n- Always use pnpm"
  },
  {
    "path": ".github/workflows/sync-components.yml",
    "content": "name: Component Sync Check\n\non:\n  pull_request:\n    paths:\n      - 'packages/components/src/**'\n      - 'packages/components/scripts/**'\n      - 'packages/components/package.json'\n  push:\n    branches:\n      - main\n\njobs:\n  pr-check:\n    if: github.event_name == 'pull_request'\n    runs-on: ubuntu-latest\n    name: Check Registry Drift\n    \n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n          \n      - name: Install pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          version: 10.12.1\n        \n      - name: Setup Node.js\n        uses: actions/setup-node@v4\n        with:\n          node-version: '20'\n          cache: 'pnpm'\n          \n      - name: Install dependencies\n        run: pnpm install\n        \n      - name: Build registry dependency first\n        run: pnpm --filter @baselayer/registry build\n        \n      - name: Build components and generate registry\n        run: pnpm --filter @baselayer/components build\n        \n      - name: Check for registry drift\n        run: |\n          # Check registry.json and generated shadcn registry files\n          if git diff --quiet packages/components/registry.json web/public/r/; then\n            echo \"✅ Registry is in sync\"\n          else\n            echo \"❌ Registry out of sync! Generated files differ from committed files.\"\n            echo \"\"\n            echo \"Please run the following locally and commit the changes:\"\n            echo \"  pnpm --filter @baselayer/components build\"\n            echo \"\"\n            echo \"Changed files:\"\n            git diff --name-only packages/components/registry.json web/public/r/\n            echo \"\"\n            echo \"Diff:\"\n            git diff packages/components/registry.json web/public/r/\n            exit 1\n          fi\n\n  build-and-test:\n    if: github.event_name == 'push' && github.ref == 'refs/heads/main'\n    runs-on: ubuntu-latest\n    name: Build and Test\n    \n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n          \n      - name: Install pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          version: 10.12.1\n        \n      - name: Setup Node.js\n        uses: actions/setup-node@v4\n        with:\n          node-version: '20'\n          cache: 'pnpm'\n          \n      - name: Install dependencies\n        run: pnpm install\n        \n      - name: Build all packages\n        run: pnpm build\n\n "
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_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/dist\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n\n# local env files\n.env.local\n.env\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n# turbo\n.turbo\n\n# pnpm\n.pnpm-store/\n.pnpm-debug.log*\n\n# build outputs\n**/dist/\n**/build/\n**/.next/\n**/.turbo/\n\n# IDE and editor files\n.vscode/\n.idea/\n*.swp\n*.swo\n*~\n.project\n.classpath\n.settings/\n\n# OS generated files\n.DS_Store\n.DS_Store?\n._*\n.Spotlight-V100\n.Trashes\nehthumbs.db\nThumbs.db\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional stylelint cache\n.stylelintcache\n\n*.vsix\n\n# Go workspace file\ngo.work"
  },
  {
    "path": ".prototools",
    "content": "pnpm = \"10.12.2\"\n"
  },
  {
    "path": "LICENSE.md",
    "content": "MIT License\n\nCopyright (c) 2025 Zach Wagner\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."
  },
  {
    "path": "README.md",
    "content": "# BaseLayer\n\n## Overview\n\nBaseLayer is a comprehensive React component library built for modern development workflows and AI-powered tooling. It combines the accessibility and power of React Aria Components with the styling flexibility of Tailwind CSS, creating a robust foundation for building incredible user interfaces.\n\n## Docs\n\n[https://baselayer.dev](https://baselayer.dev)\n\n## Contributing\n\nComing soon, but in the meantime, feel free to open an issue or [reach out!](https://x.com/zwagnr)\n"
  },
  {
    "path": "biome.json",
    "content": "{\n  \"$schema\": \"./node_modules/@biomejs/biome/configuration_schema.json\",\n  \"formatter\": {\n    \"enabled\": true\n  },\n  \"linter\": {\n    \"enabled\": true,\n    \"domains\": {\n      \"next\": \"recommended\"\n    },\n    \"rules\": {\n      \"recommended\": true,\n      \"nursery\": {\n        \"useSortedClasses\": {\n          \"level\": \"warn\",\n          \"fix\": \"safe\",\n          \"options\": {\n            \"attributes\": [\"className\"],\n            \"functions\": [\"cx\", \"tv\"]\n          }\n        }\n      }\n    }\n  },\n  \"assist\": {\n    \"actions\": {\n      \"source\": {\n        \"organizeImports\": {\n          \"level\": \"on\",\n          \"options\": {\n            \"groups\": [\n              [\"react\", \"react/**\"],\n              \":BLANK_LINE:\",\n              \"next/**\",\n              \":BLANK_LINE:\",\n              \"react-aria-components\",\n              \"tailwind-variants\",\n              \":BLANK_LINE:\",\n              \":PACKAGE:\",\n              \":BLANK_LINE:\",\n              \"@/hooks/**\",\n              \":BLANK_LINE:\",\n              [\"@/lib/**\", \"@/utils/**\"],\n              \":BLANK_LINE:\",\n              \"@/components/**\",\n              \":BLANK_LINE:\",\n              \"~/**\",\n              \":BLANK_LINE:\",\n              \":PATH:\"\n            ]\n          }\n        }\n      }\n    }\n  }\n}"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"baselayer\",\n  \"private\": true,\n  \"version\": \"2.1.1\",\n  \"description\": \"Beautiful, accessible, and AI optimized React components for the web.\",\n  \"scripts\": {\n    \"build\": \"turbo build\",\n    \"dev\": \"turbo dev\",\n    \"lint\": \"turbo lint\",\n    \"clean\": \"turbo clean\",\n    \"type-check\": \"turbo type-check\"\n  },\n  \"devDependencies\": {\n    \"@biomejs/biome\": \"2.2.5\",\n    \"shadcn\": \"3.4.0\",\n    \"turbo\": \"^2.5.8\"\n  },\n  \"packageManager\": \"pnpm@10.12.1\",\n  \"engines\": {\n    \"node\": \"22.17.0\"\n  }\n}"
  },
  {
    "path": "packages/components/CHANGELOG.md",
    "content": "# @baselayer/components\n\n## 2.0.3\n\n### Patch Changes\n\n- f594c82: update RAC + tw\n\n## 2.0.2\n\n### Patch Changes\n\n- 6f88f68: mobile optimizations\n\n## 2.0.1\n\n### Patch Changes\n\n- 6f94762: fix secondary button border\n\n## 2.0.0\n\n### Major Changes\n\n- 7204382: v2\n\n### Patch Changes\n\n- Updated dependencies [7204382]\n  - @baselayer/registry@2.0.0\n"
  },
  {
    "path": "packages/components/package.json",
    "content": "{\n\t\"name\": \"@baselayer/components\",\n\t\"version\": \"2.1.1\",\n\t\"private\": true,\n\t\"type\": \"module\",\n\t\"main\": \"./src/index.ts\",\n\t\"types\": \"./src/index.ts\",\n\t\"files\": [\n\t\t\"src\"\n\t],\n\t\"scripts\": {\n\t\t\"build\": \"tsc && pnpm generate:registry && pnpm registry:build\",\n\t\t\"dev\": \"tsc --watch\",\n\t\t\"generate:registry\": \"tsx scripts/gen-registry-json.ts\",\n\t\t\"registry:build\": \"shadcn build --cwd . --output ../../web/public/r\"\n\t},\n\t\"dependencies\": {\n\t\t\"@baselayer/registry\": \"workspace:*\",\n\t\t\"lucide-react\": \"^0.525.0\",\n\t\t\"react\": \"^19.2.3\",\n\t\t\"react-aria-components\": \"catalog:\",\n\t\t\"tailwind-variants\": \"catalog:\",\n\t\t\"zod\": \"^3.25.67\"\n\t},\n\t\"devDependencies\": {\n\t\t\"@types/node\": \"catalog:\",\n\t\t\"@types/react\": \"^19.2.7\",\n\t\t\"fast-glob\": \"^3.3.2\",\n\t\t\"ts-morph\": \"^26.0.0\",\n\t\t\"tsx\": \"^4.20.3\",\n\t\t\"tw-animate-css\": \"^1.3.6\",\n\t\t\"typescript\": \"catalog:\"\n\t},\n\t\"peerDependencies\": {\n\t\t\"react\": \">=19.0.0\",\n\t\t\"tailwindcss\": \">=4.0.0\"\n\t}\n}\n"
  },
  {
    "path": "packages/components/registry.json",
    "content": "{\n  \"name\": \"@baselayer\",\n  \"$schema\": \"https://ui.shadcn.com/schema/registry.json\",\n  \"homepage\": \"https://baselayer.dev\",\n  \"items\": [\n    {\n      \"name\": \"accordion\",\n      \"type\": \"registry:ui\",\n      \"title\": \"accordion\",\n      \"description\": \"An accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a title and content area.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"layout\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/accordion/accordion.tsx\",\n          \"target\": \"components/ui/accordion.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"disclosure\",\n          \"collapsible\",\n          \"expandable\",\n          \"content\"\n        ]\n      }\n    },\n    {\n      \"name\": \"badge\",\n      \"type\": \"registry:ui\",\n      \"title\": \"badge\",\n      \"description\": \"A badge is a small label that can be used to display information or status.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"display\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/badge/badge.tsx\",\n          \"target\": \"components/ui/badge.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"status\"\n        ]\n      }\n    },\n    {\n      \"name\": \"breadcrumbs\",\n      \"type\": \"registry:ui\",\n      \"title\": \"breadcrumbs\",\n      \"description\": \"Breadcrumbs display a heirarchy of links to the current page or resource in an application.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"navigation\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/breadcrumbs/breadcrumbs.tsx\",\n          \"target\": \"components/ui/breadcrumbs.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"navigation\"\n        ]\n      }\n    },\n    {\n      \"name\": \"button\",\n      \"type\": \"registry:ui\",\n      \"title\": \"button\",\n      \"description\": \"A button allows a user to perform an action, with mouse, touch, and keyboard interactions.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/button/button.tsx\",\n          \"target\": \"components/ui/button.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\"\n        ]\n      }\n    },\n    {\n      \"name\": \"calendar\",\n      \"type\": \"registry:ui\",\n      \"title\": \"calendar\",\n      \"description\": \"A calendar displays one or more date grids and allows users to select either a single date or a contiguous range of dates.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"data-entry\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/calendar/calendar.tsx\",\n          \"target\": \"components/ui/calendar.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"date-time\"\n        ]\n      }\n    },\n    {\n      \"name\": \"card\",\n      \"type\": \"registry:ui\",\n      \"title\": \"card\",\n      \"description\": \"Displays a card with header, content, and footer.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"layout\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/card/card.tsx\",\n          \"target\": \"components/ui/card.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"layout\",\n          \"container\",\n          \"display\"\n        ]\n      }\n    },\n    {\n      \"name\": \"checkbox\",\n      \"type\": \"registry:ui\",\n      \"title\": \"checkbox\",\n      \"description\": \"A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/checkbox/checkbox.tsx\",\n          \"target\": \"components/ui/checkbox.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\"\n        ]\n      }\n    },\n    {\n      \"name\": \"combobox\",\n      \"type\": \"registry:ui\",\n      \"title\": \"combobox\",\n      \"description\": \"A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/combobox/combobox.tsx\",\n          \"target\": \"components/ui/combobox.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"picker\"\n        ]\n      }\n    },\n    {\n      \"name\": \"command\",\n      \"type\": \"registry:ui\",\n      \"title\": \"command\",\n      \"description\": \"A command palette that allows users to quickly search and execute commands using keyboard shortcuts.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"navigation\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/command/command.tsx\",\n          \"target\": \"components/ui/command.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"beta\",\n        \"tags\": [\n          \"search\",\n          \"navigation\",\n          \"keyboard\",\n          \"palette\"\n        ]\n      }\n    },\n    {\n      \"name\": \"date-field\",\n      \"type\": \"registry:ui\",\n      \"title\": \"date-field\",\n      \"description\": \"A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/date-field/date-field.tsx\",\n          \"target\": \"components/ui/date-field.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"date\"\n        ]\n      }\n    },\n    {\n      \"name\": \"date-picker\",\n      \"type\": \"registry:ui\",\n      \"title\": \"date-picker\",\n      \"description\": \"A date picker combines one or more DateFields with a calendar popover, allowing users to enter or select a single date/time or a range.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/date-picker/date-picker.tsx\",\n          \"target\": \"components/ui/date-picker.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"registryDependencies\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"date-time\"\n        ]\n      }\n    },\n    {\n      \"name\": \"input\",\n      \"type\": \"registry:ui\",\n      \"title\": \"input\",\n      \"description\": \"Allows a user to enter a plain text value with a keyboard.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/input/input.tsx\",\n          \"target\": \"components/ui/input.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\"\n        ]\n      }\n    },\n    {\n      \"name\": \"menu\",\n      \"type\": \"registry:ui\",\n      \"title\": \"menu\",\n      \"description\": \"A menu displays a list of actions or options that a user can choose.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"pickers\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/menu/menu.tsx\",\n          \"target\": \"components/ui/menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"interactive\",\n          \"navigation\"\n        ]\n      }\n    },\n    {\n      \"name\": \"meter\",\n      \"type\": \"registry:ui\",\n      \"title\": \"meter\",\n      \"description\": \"A meter represents a quantity within a known range, or a fractional value.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"data-display\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/meter/meter.tsx\",\n          \"target\": \"components/ui/meter.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"data-display\",\n          \"progress\"\n        ]\n      }\n    },\n    {\n      \"name\": \"modal\",\n      \"type\": \"registry:ui\",\n      \"title\": \"modal\",\n      \"description\": \"A modal is an overlay element which blocks interaction with elements outside it.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"overlays\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/modal/modal.tsx\",\n          \"target\": \"components/ui/modal.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"overlay\"\n        ]\n      }\n    },\n    {\n      \"name\": \"popover\",\n      \"type\": \"registry:ui\",\n      \"title\": \"popover\",\n      \"description\": \"A popover is an overlay element positioned relative to a trigger.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"overlays\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/popover/popover.tsx\",\n          \"target\": \"components/ui/popover.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"overlay\",\n          \"interactive\"\n        ]\n      }\n    },\n    {\n      \"name\": \"radio-group\",\n      \"type\": \"registry:ui\",\n      \"title\": \"radio-group\",\n      \"description\": \"A radio group allows a user to select a single option from a list of mutually exclusive options.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/radio-group/radio-group.tsx\",\n          \"target\": \"components/ui/radio-group.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"selection\"\n        ]\n      }\n    },\n    {\n      \"name\": \"select\",\n      \"type\": \"registry:ui\",\n      \"title\": \"select\",\n      \"description\": \"A select displays a collapsible list of options and allows a user to select one of them.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/select/select.tsx\",\n          \"target\": \"components/ui/select.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"picker\"\n        ]\n      }\n    },\n    {\n      \"name\": \"slider\",\n      \"type\": \"registry:ui\",\n      \"title\": \"slider\",\n      \"description\": \"A slider allows a user to select one or more values within a range.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/slider/slider.tsx\",\n          \"target\": \"components/ui/slider.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"range\"\n        ]\n      }\n    },\n    {\n      \"name\": \"switch\",\n      \"type\": \"registry:ui\",\n      \"title\": \"switch\",\n      \"description\": \"A switch allows a user to turn a setting on or off.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/switch/switch.tsx\",\n          \"target\": \"components/ui/switch.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"toggle\"\n        ]\n      }\n    },\n    {\n      \"name\": \"table\",\n      \"type\": \"registry:ui\",\n      \"title\": \"table\",\n      \"description\": \"A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"data-display\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/table/table.tsx\",\n          \"target\": \"components/ui/table.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"registryDependencies\": [\n        \"button\",\n        \"checkbox\"\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"data-display\",\n          \"interactive\"\n        ]\n      }\n    },\n    {\n      \"name\": \"tabs\",\n      \"type\": \"registry:ui\",\n      \"title\": \"tabs\",\n      \"description\": \"Tabs organize content into multiple sections and allow users to navigate between them.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"navigation\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/tabs/tabs.tsx\",\n          \"target\": \"components/ui/tabs.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"navigation\",\n          \"interactive\",\n          \"layout\"\n        ]\n      }\n    },\n    {\n      \"name\": \"tag-group\",\n      \"type\": \"registry:ui\",\n      \"title\": \"tag-group\",\n      \"description\": \"A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/tag-group/tag-group.tsx\",\n          \"target\": \"components/ui/tag-group.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"selection\",\n          \"filtering\"\n        ]\n      }\n    },\n    {\n      \"name\": \"time-field\",\n      \"type\": \"registry:ui\",\n      \"title\": \"time-field\",\n      \"description\": \"A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/time-field/time-field.tsx\",\n          \"target\": \"components/ui/time-field.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"time\"\n        ]\n      }\n    },\n    {\n      \"name\": \"toggle\",\n      \"type\": \"registry:ui\",\n      \"title\": \"toggle\",\n      \"description\": \"A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/toggle/toggle.tsx\",\n          \"target\": \"components/ui/toggle.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"toggle\"\n        ]\n      }\n    },\n    {\n      \"name\": \"tooltip\",\n      \"type\": \"registry:ui\",\n      \"title\": \"tooltip\",\n      \"description\": \"A tooltip displays a description of an element on hover or focus.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"overlays\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/tooltip/tooltip.tsx\",\n          \"target\": \"components/ui/tooltip.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"overlay\",\n          \"interactive\",\n          \"help\"\n        ]\n      }\n    }\n  ]\n}"
  },
  {
    "path": "packages/components/scripts/gen-registry-json.ts",
    "content": "/** biome-ignore-all lint/suspicious/noAssignInExpressions: skip */\nimport type { Registry, RegistryItem } from \"@baselayer/registry\";\nimport glob from \"fast-glob\";\n\nimport { existsSync, readFileSync, writeFileSync } from \"node:fs\";\n\nconst COMPONENTS_DIR = \"src/core\";\nconst OUTPUT_FILE = \"registry.json\";\n\nasync function generateRegistryJson() {\n\tconsole.log(\"Discovering components...\");\n\n\t// Find all component directories with meta.json files\n\tconst metaFiles = await glob(`${COMPONENTS_DIR}/*/meta.json`);\n\n\tconsole.log(`Found ${metaFiles.length} components`);\n\n\tconst registryItems: RegistryItem[] = [];\n\n\tfor (const metaFilePath of metaFiles) {\n\t\ttry {\n\t\t\tconst component = await processComponent(metaFilePath);\n\t\t\tif (component) {\n\t\t\t\tregistryItems.push(component);\n\t\t\t\tconsole.log(`Processed ${component.name}`);\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error(`Failed to process ${metaFilePath}:`, error);\n\t\t}\n\t}\n\n\t// Sort components by name for consistent output\n\tregistryItems.sort((a, b) => a.name.localeCompare(b.name));\n\n\tconst registry: Registry = {\n\t\tname: \"@baselayer\",\n\t\t$schema: \"https://ui.shadcn.com/schema/registry.json\",\n\t\thomepage: \"https://baselayer.dev\",\n\t\titems: registryItems,\n\t};\n\n\tconst jsonContent = JSON.stringify(registry, null, 2);\n\twriteFileSync(OUTPUT_FILE, jsonContent);\n\tconsole.log(\n\t\t`Generated registry.json with ${registryItems.length} components`,\n\t);\n\tconsole.log(`\\nNext step: Run 'pnpm registry:build' to generate final files`);\n}\n\nasync function processComponent(\n\tmetaFilePath: string,\n): Promise<RegistryItem | null> {\n\t// Extract component id from path (e.g., src/core/button/meta.json -> button)\n\tconst componentId = metaFilePath.split(\"/\").slice(-2, -1)[0];\n\n\t// Read component metadata\n\tconst metaContent = readFileSync(metaFilePath, \"utf8\");\n\tconst meta = JSON.parse(metaContent);\n\n\t// Read component source file\n\tconst sourceFile = `${COMPONENTS_DIR}/${componentId}/${componentId}.tsx`;\n\tif (!existsSync(sourceFile)) {\n\t\tconsole.warn(`Source file not found: ${sourceFile}`);\n\t\treturn null;\n\t}\n\n\tconst sourceContent = readFileSync(sourceFile, \"utf8\");\n\n\t// Detect registry dependencies (imports from other components in registry)\n\tconst registryDependencies: string[] = [];\n\t// Match both relative imports and alias imports\n\tconst relativeImportRegex = /from\\s+[\"']\\.\\.\\/([^/\"']+)\\/\\1[\"']/g;\n\tconst aliasImportRegex = /from\\s+[\"']@\\/components\\/ui\\/([^/\"']+)\\/\\1[\"']/g;\n\t\n\tlet match: RegExpExecArray | null;\n\n\t// Check relative imports\n\twhile ((match = relativeImportRegex.exec(sourceContent)) !== null) {\n\t\tconst depComponentId = match[1];\n\t\tif (depComponentId !== componentId) {\n\t\t\tregistryDependencies.push(depComponentId);\n\t\t}\n\t}\n\t\n\t// Check alias imports\n\twhile ((match = aliasImportRegex.exec(sourceContent)) !== null) {\n\t\tconst depComponentId = match[1];\n\t\tif (depComponentId !== componentId) {\n\t\t\tregistryDependencies.push(depComponentId);\n\t\t}\n\t}\n\n\treturn {\n\t\tname: componentId,\n\t\ttype: \"registry:ui\",\n\t\ttitle: meta.name,\n\t\tdescription: meta.description,\n\t\tauthor: \"BaseLayer\",\n\t\tcategories: [meta.category],\n\t\tfiles: [\n\t\t\t{\n\t\t\t\tpath: `src/core/${componentId}/${componentId}.tsx`,\n\t\t\t\ttarget: `components/ui/${componentId}.tsx`,\n\t\t\t\ttype: \"registry:component\",\n\t\t\t},\n\t\t],\n\t\t// Add registry dependencies (other components this depends on in registry)\n\t\t...(registryDependencies.length > 0 && { registryDependencies }),\n\t\t// Add dependencies\n\t\tdependencies: [\n\t\t\t\"react-aria-components\",\n\t\t\t\"tailwind-variants\",\n\t\t\t\"lucide-react\",\n\t\t\t\"tw-animate-css\",\n\t\t],\n\t\ttailwind: {\n\t\t\tconfig: {\n\t\t\t\tcontent: [\"./components/**/*.{ts,tsx}\"],\n\t\t\t\ttheme: {\n\t\t\t\t\textend: {},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t// CSS variables\n\t\tcssVars: {\n\t\t\ttheme: {\n\t\t\t\t\"--color-surface\": \"var(--surface)\",\n\t\t\t\t\"--color-surface-2\": \"var(--surface-2)\",\n\t\t\t\t\"--color-fg\": \"var(--fg)\",\n\t\t\t\t\"--color-fg-muted\": \"var(--fg-muted)\",\n\t\t\t\t\"--color-fg-disabled\": \"var(--fg-disabled)\",\n\t\t\t\t\"--color-fg-inverse\": \"var(--fg-inverse)\",\n\t\t\t\t\"--color-border\": \"var(--border)\",\n\t\t\t\t\"--color-focus\": \"var(--focus)\",\n\t\t\t\t\"--color-primary\": \"var(--primary)\",\n\t\t\t\t\"--color-primary-fg\": \"var(--primary-fg)\",\n\t\t\t\t\"--color-secondary\": \"var(--secondary)\",\n\t\t\t\t\"--color-secondary-fg\": \"var(--secondary-fg)\",\n\t\t\t\t\"--color-danger\": \"var(--danger)\",\n\t\t\t\t\"--color-danger-fg\": \"var(--danger-fg)\",\n\t\t\t},\n\t\t\tlight: {\n\t\t\t\t\"--surface\": \"oklch(98.5% 0 0)\",\n\t\t\t\t\"--surface-2\": \"oklch(97% 0 0)\",\n\t\t\t\t\"--fg\": \"oklch(14.5% 0 0)\",\n\t\t\t\t\"--fg-muted\": \"oklch(55.6% 0 0)\",\n\t\t\t\t\"--fg-inverse\": \"oklch(98.5% 0 0)\",\n\t\t\t\t\"--fg-disabled\": \"oklch(70.8% 0 0)\",\n\t\t\t\t\"--border\": \"oklch(87% 0 0)\",\n\t\t\t\t\"--focus\": \"oklch(68.5% 0.169 237.323)\",\n\t\t\t\t\"--primary\": \"oklch(14.5% 0 0)\",\n\t\t\t\t\"--primary-fg\": \"oklch(98.5% 0 0)\",\n\t\t\t\t\"--secondary\": \"oklch(92.2% 0 0)\",\n\t\t\t\t\"--secondary-fg\": \"oklch(14.5% 0 0)\",\n\t\t\t\t\"--danger\": \"oklch(63.7% 0.237 25.331)\",\n\t\t\t\t\"--danger-fg\": \"#ffffff\",\n\t\t\t},\n\t\t\tdark: {\n\t\t\t\t\"--surface\": \"oklch(14.5% 0 0)\",\n\t\t\t\t\"--surface-2\": \"oklch(20.5% 0 0)\",\n\t\t\t\t\"--fg\": \"oklch(98.5% 0.001 106.423)\",\n\t\t\t\t\"--fg-muted\": \"oklch(55.6% 0 0)\",\n\t\t\t\t\"--fg-inverse\": \"oklch(98.5% 0 0)\",\n\t\t\t\t\"--fg-disabled\": \"oklch(37.1% 0 0)\",\n\t\t\t\t\"--border\": \"oklch(37.1% 0 0)\",\n\t\t\t\t\"--focus\": \"oklch(68.5% 0.169 237.323)\",\n\t\t\t\t\"--primary\": \"oklch(98.5% 0 0)\",\n\t\t\t\t\"--primary-fg\": \"oklch(14.5% 0 0)\",\n\t\t\t\t\"--secondary\": \"oklch(26.9% 0 0)\",\n\t\t\t\t\"--secondary-fg\": \"oklch(98.5% 0 0)\",\n\t\t\t\t\"--danger\": \"oklch(63.7% 0.237 25.331)\",\n\t\t\t\t\"--danger-fg\": \"oklch(98.5% 0 0)\",\n\t\t\t},\n\t\t},\n\t\t// CSS imports and custom CSS\n\t\tcss: {\n\t\t\t\"@import \\\"tw-animate-css\\\"\": {},\n\t\t},\n\t\tmeta: {\n\t\t\tstatus: meta.status,\n\t\t\ttags: meta.tags,\n\t\t},\n\t};\n}\n\ngenerateRegistryJson().catch(console.error);\n"
  },
  {
    "path": "packages/components/src/core/accordion/accordion.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tButton,\n\tDisclosure,\n\tDisclosureGroup,\n\ttype DisclosureGroupProps,\n\tDisclosurePanel,\n\ttype DisclosureProps,\n\tHeading,\n} from \"react-aria-components\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { Minus, Plus } from \"lucide-react\";\n\nconst accordion = tv({\n\tslots: {\n\t\troot: \"group w-full\",\n\t\tgroup: \"flex flex-col gap-3\",\n\t\tbutton:\n\t\t\t\"flex w-full items-center justify-between gap-6 rounded-2xl border border-border bg-surface-2 p-4 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-focus data-[focus-visible]:ring-offset-2 data-[focus-visible]:ring-offset-surface group-data-[expanded]:rounded-b-none group-data-[expanded]:border-b-0\",\n\t\ticon: \"size-4 shrink-0 fill-none transition-transform duration-200\",\n\t\tpanel:\n\t\t\t\"rounded-b-2xl border-border bg-surface-2 px-4 text-muted-foreground text-sm group-data-[expanded]:border-x group-data-[expanded]:border-b group-data-[expanded]:pb-4\",\n\t},\n});\n\nconst styles = accordion();\n\ntype AccordionVariantProps = VariantProps<typeof accordion>;\n\ninterface AccordionProps\n\textends AccordionVariantProps,\n\t\tOmit<DisclosureProps, \"children\"> {\n\tclassName?: string;\n\ttitle?: string;\n\tchildren?: ReactNode;\n}\n\nconst Accordion = ({\n\tclassName,\n\ttitle,\n\tchildren,\n\t...props\n}: AccordionProps) => {\n\treturn (\n\t\t<Disclosure className={styles.root({ className })} {...props}>\n\t\t\t{({ isExpanded }) => (\n\t\t\t\t<>\n\t\t\t\t\t<Heading>\n\t\t\t\t\t\t<Button slot=\"trigger\" className={styles.button()}>\n\t\t\t\t\t\t\t<span className=\"font-bold\">{title}</span>\n\t\t\t\t\t\t\t{isExpanded ? (\n\t\t\t\t\t\t\t\t<Minus className={styles.icon()} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Plus className={styles.icon()} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<DisclosurePanel className={styles.panel()}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</DisclosurePanel>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</Disclosure>\n\t);\n};\n\ninterface AccordionGroupProps extends DisclosureGroupProps {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nconst AccordionGroup = ({\n\tclassName,\n\tchildren,\n\t...props\n}: AccordionGroupProps) => (\n\t<DisclosureGroup {...props} className={styles.group({ className })}>\n\t\t{children}\n\t</DisclosureGroup>\n);\n\nexport { Accordion, AccordionGroup };\nexport type { AccordionProps, AccordionGroupProps };\n"
  },
  {
    "path": "packages/components/src/core/accordion/meta.json",
    "content": "{\n  \"name\": \"accordion\",\n  \"category\": \"layout\",\n  \"status\": \"stable\",\n  \"description\": \"An accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a title and content area.\",\n  \"tags\": [\n    \"disclosure\",\n    \"collapsible\",\n    \"expandable\",\n    \"content\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/badge/badge.tsx",
    "content": "import type { HTMLAttributes } from \"react\";\n\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const badge = tv({\n\tbase: \"flex items-center justify-center rounded-4xl px-3 py-2 font-semibold text-xs\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tattention: \"bg-gradient-to-r from-pink-500 to-purple-500 text-white\",\n\t\t\tneutral: \"bg-secondary text-secondary-fg\",\n\t\t\tdanger: \"bg-danger text-danger-fg\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"attention\",\n\t},\n});\n\ntype BadgeProps = VariantProps<typeof badge> & HTMLAttributes<HTMLSpanElement>;\n\nconst Badge = ({ className, variant, ...props }: BadgeProps) => (\n\t<span className={badge({ variant, className })} {...props} />\n);\n\nexport { Badge };\nexport type { BadgeProps };\n"
  },
  {
    "path": "packages/components/src/core/badge/meta.json",
    "content": "{\n  \"name\": \"badge\",\n  \"category\": \"display\",\n  \"status\": \"stable\",\n  \"description\": \"A badge is a small label that can be used to display information or status.\",\n  \"tags\": [\n    \"status\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/breadcrumbs/breadcrumbs.tsx",
    "content": "\"use client\";\n\nimport {\n\tBreadcrumbs as AriaBreadcrumbs,\n\ttype BreadcrumbsProps as AriaBreadcrumbsProps,\n\tBreadcrumb,\n\ttype BreadcrumbProps,\n\tLink,\n\ttype LinkProps,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst breadcrumbs = tv({\n\tslots: {\n\t\troot: \"m-0 flex list-none items-center gap-2 p-0 font-md\",\n\t\tlink: \"relative cursor-pointer rounded-md text-fg outline-none ring-focus data-[hovered]:underline data-[focus-visible]:ring-2 [&[aria-current]]:font-extrabold [&[aria-current]]:text-fg\",\n\t\titem: \"flex items-center gap-2\",\n\t},\n});\n\nconst styles = breadcrumbs();\n\nconst Breadcrumbs = <T extends object>({\n\tchildren,\n\tclassName,\n\t...props\n}: AriaBreadcrumbsProps<T> & { className?: string }) => (\n\t<AriaBreadcrumbs className={styles.root({ className })} {...props}>\n\t\t{children}\n\t</AriaBreadcrumbs>\n);\n\nconst BreadcrumbsLink = ({\n\tchildren,\n\tclassName,\n\t...props\n}: LinkProps & { className?: string }) => (\n\t<Link className={styles.link({ className })} {...props}>\n\t\t{children}\n\t</Link>\n);\n\nconst BreadcrumbsItem = ({\n\tchildren,\n\tclassName,\n\t...props\n}: BreadcrumbProps & { className?: string }) => (\n\t<Breadcrumb className={styles.item({ className })} {...props}>\n\t\t{children}\n\t</Breadcrumb>\n);\n\nexport { BreadcrumbsItem, BreadcrumbsLink, Breadcrumbs };"
  },
  {
    "path": "packages/components/src/core/breadcrumbs/meta.json",
    "content": "{\n  \"name\": \"breadcrumbs\",\n  \"category\": \"navigation\",\n  \"status\": \"stable\",\n  \"description\": \"Breadcrumbs display a heirarchy of links to the current page or resource in an application.\",\n  \"tags\": [\n    \"navigation\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/button/button.tsx",
    "content": "\"use client\";\n\nimport {\n\tButton as AriaButton,\n\ttype ButtonProps as AriaButtonProps,\n} from \"react-aria-components\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst button = tv({\n\tbase: \"inline-flex appearance-none items-center justify-center rounded-full font-semibold outline-none ring-focus ring-offset-3 ring-offset-surface transition-transform duration-100 disabled:pointer-events-none disabled:opacity-50 data-[focus-visible]:ring-2\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary:\n\t\t\t\t\"bg-primary text-primary-fg data-[hovered]:bg-primary/80\",\n\t\t\tsecondary:\n\t\t\t\t\"border border-border text-fg data-[hovered]:border-secondary data-[hovered]:bg-secondary\",\n\t\t\tghost:\n\t\t\t\t\"bg-transparent text-fg data-[hovered]:bg-secondary data-[hovered]:text-secondary-fg\",\n\t\t\tdanger:\n\t\t\t\t\"border border-transparent bg-danger text-danger-fg data-[hovered]:bg-danger/80\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"px-2 py-1.5 text-sm\",\n\t\t\tmd: \"px-4 py-2.5 text-base\",\n\t\t\tlg: \"px-6 py-3.5 font-bold text-lg\",\n\t\t\ticon: \"size-9\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"primary\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype ButtonVariantProps = VariantProps<typeof button>;\n\ninterface ButtonProps\n\textends Omit<AriaButtonProps, \"className\">,\n\t\tButtonVariantProps {\n\tclassName?: string;\n}\n\nconst Button = ({\n\tclassName,\n\tsize,\n\tvariant,\n\tchildren,\n\t...props\n}: ButtonProps) => (\n\t<AriaButton className={button({ className, size, variant })} {...props}>\n\t\t{children}\n\t</AriaButton>\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\nexport type { ButtonProps };\n"
  },
  {
    "path": "packages/components/src/core/button/meta.json",
    "content": "{\n  \"name\": \"button\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A button allows a user to perform an action, with mouse, touch, and keyboard interactions.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/calendar/calendar.tsx",
    "content": "\"use client\";\n\nimport {\n\tCalendar as AriaCalendar,\n\ttype CalendarProps as AriaCalendarProps,\n\tRangeCalendar as AriaRangeCalendar,\n\ttype RangeCalendarProps as AriaRangeCalendarProps,\n\tButton,\n\tCalendarCell,\n\tCalendarGrid,\n\tCalendarGridBody,\n\tCalendarGridHeader,\n\tCalendarHeaderCell,\n\ttype DateValue,\n\tHeading,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nconst baseStyles = tv({\n\tslots: {\n\t\troot: \"w-fit max-w-full rounded-2xl border border-border bg-surface p-4 text-fg\",\n\t\theader: \"flex w-full items-center gap-1 pb-4\",\n\t\theading: \"flex-1 text-center font-bold\",\n\t\theaderCell: \"pb-2 text-fg-muted text-sm\",\n\t\tmonthButton:\n\t\t\t\"flex appearance-none items-center justify-center rounded-full p-2 text-center outline-none ring-focus data-[hovered]:bg-secondary data-[focus-visible]:ring-2\",\n\t},\n});\n\nconst calendar = tv({\n\textend: baseStyles,\n\tslots: {\n\t\tcell: \"flex size-9 cursor-default items-center justify-center rounded-full border-border text-center text-sm outline-focus outline-offset-2 data-[hovered]:bg-secondary data-[pressed]:bg-secondary data-[selected]:bg-primary data-[selected]:text-primary-fg data-[unavailable]:text-fg-muted data-[unavailable]:line-through data-[focus-visible]:outline-2 data-[focus-visible]:outline-focus [&[data-outside-month]]:hidden\",\n\t},\n});\n\nconst rangeCalendar = tv({\n\textend: baseStyles,\n\tslots: {\n\t\tcell: \"flex size-9 cursor-default items-center justify-center rounded-full text-center text-sm outline-none outline-offset-2 data-[selected]:rounded-none data-[hovered]:bg-secondary data-[pressed]:bg-secondary data-[selected]:bg-primary data-[selected]:text-primary-fg data-[unavailable]:text-fg-muted data-[unavailable]:line-through data-[focus-visible]:ring-2 data-[focus-visible]:ring-focus data-[focus-visible]:ring-offset-2 [&[data-outside-month]]:hidden [&[data-selection-end]]:rounded-r-full [&[data-selection-start]]:rounded-l-full\",\n\t},\n});\n\nconst styles = calendar();\nconst rangeStyles = rangeCalendar();\n\ninterface CalendarProps<T extends DateValue>\n\textends Omit<AriaCalendarProps<T>, \"className\"> {\n\terrorMessage?: string;\n\tclassName?: string;\n}\n\nconst Calendar = ({\n\tclassName,\n\terrorMessage,\n\t...props\n}: CalendarProps<DateValue>) => (\n\t<AriaCalendar {...props} className={styles.root({ className })}>\n\t\t<header className={styles.header()}>\n\t\t\t<Button className={styles.monthButton()} slot=\"previous\">\n\t\t\t\t<ChevronLeft className=\"h-5 w-5 self-center\" />\n\t\t\t</Button>\n\t\t\t<Heading className={styles.heading()} slot=\"label\" />\n\t\t\t<Button className={styles.monthButton()} slot=\"next\">\n\t\t\t\t<ChevronRight className=\"h-5 w-5 self-center\" />\n\t\t\t</Button>\n\t\t</header>\n\t\t<CalendarGrid>\n\t\t\t<CalendarGridHeader>\n\t\t\t\t{(day) => (\n\t\t\t\t\t<CalendarHeaderCell className={styles.headerCell()}>\n\t\t\t\t\t\t{day}\n\t\t\t\t\t</CalendarHeaderCell>\n\t\t\t\t)}\n\t\t\t</CalendarGridHeader>\n\t\t\t<CalendarGridBody>\n\t\t\t\t{(date) => <CalendarCell className={styles.cell()} date={date} />}\n\t\t\t</CalendarGridBody>\n\t\t</CalendarGrid>\n\t\t{errorMessage && (\n\t\t\t<Text className=\"text-danger text-sm\" slot=\"errorMessage\">\n\t\t\t\t{errorMessage}\n\t\t\t</Text>\n\t\t)}\n\t</AriaCalendar>\n);\n\ninterface RangeCalendarProps<T extends DateValue>\n\textends Omit<AriaRangeCalendarProps<T>, \"className\"> {\n\terrorMessage?: string;\n\tclassName?: string;\n}\n\nconst RangeCalendar = ({\n\tclassName,\n\terrorMessage,\n\t...props\n}: RangeCalendarProps<DateValue>) => (\n\t<AriaRangeCalendar {...props} className={rangeStyles.root({ className })}>\n\t\t<header className={rangeStyles.header()}>\n\t\t\t<Button className={rangeStyles.monthButton()} slot=\"previous\">\n\t\t\t\t<ChevronLeft className=\"h-5 w-5 self-center\" />\n\t\t\t</Button>\n\t\t\t<Heading className={rangeStyles.heading()} slot=\"label\" />\n\t\t\t<Button className={rangeStyles.monthButton()} slot=\"next\">\n\t\t\t\t<ChevronRight className=\"h-5 w-5 self-center\" />\n\t\t\t</Button>\n\t\t</header>\n\t\t<CalendarGrid>\n\t\t\t<CalendarGridHeader>\n\t\t\t\t{(day) => (\n\t\t\t\t\t<CalendarHeaderCell className={rangeStyles.headerCell()}>\n\t\t\t\t\t\t{day}\n\t\t\t\t\t</CalendarHeaderCell>\n\t\t\t\t)}\n\t\t\t</CalendarGridHeader>\n\t\t\t<CalendarGridBody>\n\t\t\t\t{(date) => <CalendarCell className={rangeStyles.cell()} date={date} />}\n\t\t\t</CalendarGridBody>\n\t\t</CalendarGrid>\n\t\t{errorMessage && (\n\t\t\t<Text className=\"text-danger text-sm\" slot=\"errorMessage\">\n\t\t\t\t{errorMessage}\n\t\t\t</Text>\n\t\t)}\n\t</AriaRangeCalendar>\n);\n\nexport { Calendar, RangeCalendar };\nexport type { CalendarProps, RangeCalendarProps };\n"
  },
  {
    "path": "packages/components/src/core/calendar/meta.json",
    "content": "{\n  \"name\": \"calendar\",\n  \"category\": \"data-entry\",\n  \"status\": \"stable\",\n  \"description\": \"A calendar displays one or more date grids and allows users to select either a single date or a contiguous range of dates.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"date-time\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/card/card.tsx",
    "content": "\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst card = tv({\n\tslots: {\n\t\troot: \"rounded-2xl border-2 bg-surface text-fg\",\n\t\theader: \"flex flex-col space-y-1.5 p-6\",\n\t\ttitle: \"font-semibold text-2xl leading-none tracking-tight\",\n\t\tdescription: \"text-fg-muted text-sm\",\n\t\tcontent: \"p-6 pt-0\",\n\t\tfooter: \"flex items-center p-6 pt-0\",\n\t},\n\tvariants: {\n\t\tvariant: {\n\t\t\toutlined: {\n\t\t\t\troot: \"border border-border/50\",\n\t\t\t},\n\t\t\tfilled: {\n\t\t\t\troot: \"border-surface-2 bg-surface-2\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"outlined\",\n\t},\n});\n\nconst styles = card();\n\ntype CardVariantProps = VariantProps<typeof card>;\n\ninterface CardProps extends HTMLAttributes<HTMLDivElement>, CardVariantProps {\n\tclassName?: string;\n\ttitle?: string;\n\tdescription?: string;\n}\n\ninterface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n\tclassName?: string;\n}\n\ninterface CardContentProps extends HTMLAttributes<HTMLDivElement> {\n\tclassName?: string;\n}\n\ninterface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n\tclassName?: string;\n}\n\nconst Card = ({\n\tclassName,\n\tvariant,\n\ttitle,\n\tdescription,\n\tchildren,\n\t...props\n}: CardProps) => (\n\t<div className={styles.root({ variant, className })} {...props}>\n\t\t{(title || description) && (\n\t\t\t<div className={styles.header()}>\n\t\t\t\t{title && <h3 className={styles.title()}>{title}</h3>}\n\t\t\t\t{description && <p className={styles.description()}>{description}</p>}\n\t\t\t</div>\n\t\t)}\n\t\t{children}\n\t</div>\n);\n\nconst CardHeader = ({ className, ...props }: CardHeaderProps) => (\n\t<div className={styles.header({ className })} {...props} />\n);\n\nconst CardContent = ({ className, ...props }: CardContentProps) => (\n\t<div className={styles.content({ className })} {...props} />\n);\n\nconst CardFooter = ({ className, ...props }: CardFooterProps) => (\n\t<div className={styles.footer({ className })} {...props} />\n);\n\nexport { Card, CardHeader, CardContent, CardFooter };\nexport type { CardProps, CardHeaderProps, CardContentProps, CardFooterProps };\n"
  },
  {
    "path": "packages/components/src/core/card/meta.json",
    "content": "{\n  \"name\": \"card\",\n  \"category\": \"layout\",\n  \"status\": \"stable\",\n  \"description\": \"Displays a card with header, content, and footer.\",\n  \"tags\": [\n    \"layout\",\n    \"container\",\n    \"display\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/checkbox/checkbox.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\ttype CheckboxProps as AriaCheckBoxProps,\n\tCheckbox as AriaCheckbox,\n\tCheckboxGroup as AriaCheckboxGroup,\n\ttype CheckboxGroupProps as AriaCheckboxGroupProps,\n\tFieldError,\n\tText,\n\ttype ValidationResult,\n} from \"react-aria-components\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { Check } from \"lucide-react\";\n\nconst checkbox = tv({\n\tbase: \"group flex items-center justify-center gap-2 py-1 text-fg\",\n});\n\nconst checkboxGroup = tv({\n\tbase: \"flex flex-col gap-2\",\n});\n\ntype CheckboxVariantProps = VariantProps<typeof checkbox>;\n\ninterface CheckboxProps extends CheckboxVariantProps, AriaCheckBoxProps {\n\tclassName?: string;\n\tchildren: ReactNode;\n\tdescription?: string;\n\terrorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nconst Checkbox = ({\n\tclassName,\n\terrorMessage,\n\tchildren,\n\tdescription,\n\t...props\n}: CheckboxProps) => {\n\treturn (\n\t\t<AriaCheckbox className={checkbox({ className })} {...props}>\n\t\t\t{({ isSelected }) => (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"flex size-6 shrink-0 items-center justify-center rounded-lg border border-border transition-all group-data-[selected]:border-primary group-data-[selected]:bg-primary group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-focus group-data-[focus-visible]:ring-offset-2 group-data-[focus-visible]:ring-offset-surface\">\n\t\t\t\t\t\t{isSelected && <Check className=\"size-4 text-primary-fg\" />}\n\t\t\t\t\t</div>\n\t\t\t\t\t{children}\n\t\t\t\t\t{description && (\n\t\t\t\t\t\t<Text className=\"text-sm\" slot=\"description\">\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t)}\n\t\t\t\t\t<FieldError className=\"text-danger text-sm\">\n\t\t\t\t\t\t{errorMessage}\n\t\t\t\t\t</FieldError>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaCheckbox>\n\t);\n};\n\ninterface CheckboxGroupProps extends AriaCheckboxGroupProps {\n\tclassName?: string;\n\tlabel?: string;\n\tchildren: ReactNode;\n\tdescription?: string;\n\terrorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nconst CheckboxGroup = ({\n\tclassName,\n\tlabel,\n\tdescription,\n\terrorMessage,\n\tchildren,\n\t...props\n}: CheckboxGroupProps) => (\n\t<AriaCheckboxGroup {...props} className={checkboxGroup({ className })}>\n\t\t{label && (\n\t\t\t<Text className=\"text-md\" slot=\"label\">\n\t\t\t\t{label}\n\t\t\t</Text>\n\t\t)}\n\t\t{children}\n\t\t{description && (\n\t\t\t<Text className=\"text-md\" slot=\"description\">\n\t\t\t\t{description}\n\t\t\t</Text>\n\t\t)}\n\t\t<FieldError className=\"text-danger text-sm\">{errorMessage}</FieldError>\n\t</AriaCheckboxGroup>\n);\n\nexport { Checkbox, CheckboxGroup };\nexport type { CheckboxProps, CheckboxGroupProps };\n"
  },
  {
    "path": "packages/components/src/core/checkbox/meta.json",
    "content": "{\n  \"name\": \"checkbox\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/combobox/combobox.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tComboBox as AriaComboBox,\n\ttype ComboBoxProps as AriaComboBoxProps,\n\tButton,\n\tFieldError,\n\tInput,\n\tLabel,\n\tListBox,\n\tListBoxItem,\n\ttype ListBoxItemProps,\n\tPopover,\n\tText,\n\ttype ValidationResult,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CheckIcon, ChevronsUpDown } from \"lucide-react\";\n\nconst combobox = tv({\n\tslots: {\n\t\troot: \"group max-h-inherit w-full overflow-auto p-1 outline-none\",\n\t\tinput:\n\t\t\t\"w-full rounded-lg border border-border bg-surface px-4 py-1.5 align-middle font-semibold text-fg outline-none ring-fg transition-all group-data-[focused]:border-transparent group-data-[focused]:bg-surface group-data-[focused]:ring-2\",\n\t\tbutton:\n\t\t\t\"absolute right-2 flex appearance-none items-center justify-center rounded-full border-0 outline-none ring-focus ring-offset-2 ring-offset-surface data-[focus-visible]:ring-2\",\n\t\tpopover:\n\t\t\t\"w-[var(--trigger-width)] rounded-xl border border-border/25 bg-surface p-1 text-fg shadow-lg outline-none\",\n\t\titem: \"relative m-1 flex cursor-default flex-col rounded-lg p-2 font-semibold outline-none data-[disabled]:cursor-not-allowed data-[focused]:bg-secondary data-[disabled]:text-fg-disabled\",\n\t},\n});\n\nconst styles = combobox();\n\ninterface ComboBoxProps<T extends ListBoxItemProps>\n\textends Omit<AriaComboBoxProps<T>, \"className\"> {\n\tclassName?: string;\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nconst ComboBox = <T extends ListBoxItemProps>({\n\tlabel,\n\tclassName,\n\tdescription,\n\terrorMessage,\n\tchildren,\n\t...props\n}: ComboBoxProps<T>) => (\n\t<AriaComboBox\n\t\t{...props}\n\t\tclassName={styles.root({ className })}\n\t>\n\t\t{label && <Label className=\"text-sm\">{label}</Label>}\n\t\t<div className=\"relative flex w-full items-center rounded-2xl bg-surface\">\n\t\t\t<Input className={styles.input()} />\n\t\t\t<Button className={styles.button()}>\n\t\t\t\t<ChevronsUpDown className=\"size-5 text-fg-muted group-data-[focused]:text-fg\" />\n\t\t\t</Button>\n\t\t</div>\n\t\t{description && (\n\t\t\t<Text className=\"text-fg-muted text-sm\" slot=\"description\">\n\t\t\t\t{description}\n\t\t\t</Text>\n\t\t)}\n\t\t<FieldError className=\"text-danger text-sm\">{errorMessage}</FieldError>\n\t\t<Popover className={styles.popover()}>\n\t\t\t<ListBox className=\"max-h-56 overflow-y-auto\">{children}</ListBox>\n\t\t</Popover>\n\t</AriaComboBox>\n);\n\ninterface ComboBoxItemProps\n\textends Omit<ListBoxItemProps, \"className\" | \"children\"> {\n\tchildren: ReactNode;\n\tclassName?: string;\n}\n\nconst ComboBoxItem = ({ className, ...props }: ComboBoxItemProps) => (\n\t<ListBoxItem {...props} className={styles.item({ className })}>\n\t\t{({ isSelected }) => (\n\t\t\t<div className=\"flex items-center justify-between gap-2\">\n\t\t\t\t<span>{props.children}</span>\n\t\t\t\t{isSelected && <CheckIcon className=\"size-4\" />}\n\t\t\t</div>\n\t\t)}\n\t</ListBoxItem>\n);\n\nexport { ComboBox, ComboBoxItem };\nexport type { ComboBoxProps, ListBoxItemProps as ComboBoxItemProps };"
  },
  {
    "path": "packages/components/src/core/combobox/meta.json",
    "content": "{\n  \"name\": \"combobox\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"picker\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/command/command.tsx",
    "content": "\"use client\";\n\nimport type { ComponentType, ReactNode } from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport {\n\tButton as AriaButton,\n\tDialog as AriaDialog,\n\tDialogTrigger as AriaDialogTrigger,\n\tModal as AriaModal,\n\tAutocomplete,\n\tInput,\n\tMenu,\n\tMenuItem,\n\ttype MenuItemProps,\n\tModalOverlay,\n\ttype ModalOverlayProps,\n\tTextField,\n\tuseFilter,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Search } from \"lucide-react\";\n\nconst command = tv({\n\tslots: {\n\t\ttrigger:\n\t\t\t\"flex w-full items-center justify-between rounded-full bg-secondary px-4 py-2 font-semibold text-fg outline-none ring-primary ring-offset-2 ring-offset-surface transition-colors data-[hovered]:bg-secondary/75 data-[focus-visible]:ring-2\",\n\t\toverlay:\n\t\t\t\"data-[entering]:fade-in data-[exiting]:fade-out fixed inset-0 z-50 flex min-h-full items-start justify-center bg-zinc-500/25 p-4 text-center data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:duration-300 data-[exiting]:duration-200 sm:items-center\",\n\t\tmodal:\n\t\t\t\"data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:duration-300 data-[exiting]:duration-200\",\n\t\tdialog:\n\t\t\t\"flex min-h-96 min-w-80 max-w-full flex-col gap-1 rounded-2xl bg-surface p-2 shadow-lg outline-none md:w-lg\",\n\t\tinput:\n\t\t\t\"rounded-lg border-b-2 border-none bg-transparent px-3 py-2 text-base text-fg leading-5 outline-none placeholder:text-fg-muted\",\n\t\tmenu: \"mt-2 h-80 overflow-auto\",\n\t\titem: \"group flex min-h-12 w-full cursor-default items-center rounded-lg px-3 py-2 text-fg outline-none data-[focused]:bg-secondary data-[pressed]:bg-surface-3 data-[focused]:text-focus-fg\",\n\t\tkbd: \"ml-auto rounded border border-border bg-surface-2 px-2 py-1 font-semibold text-fg-muted text-xs\",\n\t},\n});\n\nconst styles = command();\n\ninterface CommandItem {\n\tid: string;\n\tlabel: string;\n\tshortcut?: string;\n\ticon?: ComponentType<{ className?: string }>;\n\tonSelect?: () => void;\n}\n\ninterface CommandProps extends Omit<ModalOverlayProps, \"className\"> {\n\tclassName?: string;\n\ttrigger?: ReactNode;\n\tcommands: CommandItem[];\n\tplaceholder?: string;\n\ttriggerKey?: string;\n\tonCommandSelect?: (command: CommandItem) => void;\n\tonSearchChange?: (search: string) => void;\n}\n\nconst Command = ({\n\tclassName,\n\ttrigger,\n\tcommands,\n\tplaceholder = \"Search commands…\",\n\ttriggerKey = \"k\",\n\tonCommandSelect,\n\tonSearchChange,\n\t...props\n}: CommandProps) => {\n\tconst [isOpen, setOpen] = useState(false);\n\tconst [isMac, setIsMac] = useState(true);\n\tconst { contains } = useFilter({ sensitivity: \"base\" });\n\n\tuseEffect(() => {\n\t\tsetIsMac(/Mac/.test(navigator?.platform || \"\"));\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (\n\t\t\t\te.key.toLowerCase() === triggerKey.toLowerCase() &&\n\t\t\t\t(isMac ? e.metaKey : e.ctrlKey)\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetOpen((prev) => !prev);\n\t\t\t} else if (e.key === \"Escape\") {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetOpen(false);\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => document.removeEventListener(\"keydown\", handleKeyDown);\n\t}, [isMac, triggerKey]);\n\n\tconst handleCommandSelect = (command: CommandItem) => {\n\t\tcommand.onSelect?.();\n\t\tonCommandSelect?.(command);\n\t\tsetOpen(false);\n\t};\n\n\treturn (\n\t\t<AriaDialogTrigger isOpen={isOpen} onOpenChange={setOpen}>\n\t\t\t{trigger || (\n\t\t\t\t<AriaButton className={styles.trigger({ className })}>\n\t\t\t\t\t<div className=\"flex items-center gap-2 text-fg-muted\">\n\t\t\t\t\t\t<Search className=\"size-4 text-fg-muted\" />\n\t\t\t\t\t\tSearch\n\t\t\t\t\t</div>\n\t\t\t\t\t<kbd className=\"rounded-md border border-border px-2 py-1 font-semibold text-fg-muted text-xs\">\n\t\t\t\t\t\t{isMac ? \"⌘\" : \"Ctrl\"} {triggerKey.toUpperCase()}\n\t\t\t\t\t</kbd>\n\t\t\t\t</AriaButton>\n\t\t\t)}\n\t\t\t<ModalOverlay {...props} isDismissable className={styles.overlay()}>\n\t\t\t\t<AriaModal className={styles.modal()}>\n\t\t\t\t\t<AriaDialog className={styles.dialog()}>\n\t\t\t\t\t\t<Autocomplete filter={onSearchChange ? () => true : contains}>\n\t\t\t\t\t\t\t<TextField\n\t\t\t\t\t\t\t\taria-label=\"Search commands\"\n\t\t\t\t\t\t\t\tclassName=\"flex flex-col border-border border-b px-3 py-2 outline-none\"\n\t\t\t\t\t\t\t\tonChange={onSearchChange}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\t\t\tclassName={styles.input()}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TextField>\n\t\t\t\t\t\t\t<Menu\n\t\t\t\t\t\t\t\titems={commands}\n\t\t\t\t\t\t\t\tclassName={styles.menu()}\n\t\t\t\t\t\t\t\tselectionMode=\"none\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{({ label, shortcut, icon: Icon, ...command }) => (\n\t\t\t\t\t\t\t\t\t<CommandMenuItem\n\t\t\t\t\t\t\t\t\t\t{...command}\n\t\t\t\t\t\t\t\t\t\ttextValue={label}\n\t\t\t\t\t\t\t\t\t\tonAction={() =>\n\t\t\t\t\t\t\t\t\t\t\thandleCommandSelect({\n\t\t\t\t\t\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\t\t\t\t\t\tshortcut,\n\t\t\t\t\t\t\t\t\t\t\t\ticon: Icon,\n\t\t\t\t\t\t\t\t\t\t\t\t...command,\n\t\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex min-w-0 items-center gap-3\">\n\t\t\t\t\t\t\t\t\t\t\t{Icon && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon className=\"size-4 shrink-0 text-fg-muted\" />\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"truncate font-medium text-sm leading-tight\">\n\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{shortcut && (\n\t\t\t\t\t\t\t\t\t\t\t<span className={styles.kbd()}>{shortcut}</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</CommandMenuItem>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Menu>\n\t\t\t\t\t\t</Autocomplete>\n\t\t\t\t\t</AriaDialog>\n\t\t\t\t</AriaModal>\n\t\t\t</ModalOverlay>\n\t\t</AriaDialogTrigger>\n\t);\n};\n\ninterface CommandMenuItemProps extends Omit<MenuItemProps, \"className\"> {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nconst CommandMenuItem = ({\n\tclassName,\n\tchildren,\n\t...props\n}: CommandMenuItemProps) => (\n\t<MenuItem {...props} className={styles.item({ className })}>\n\t\t{children}\n\t</MenuItem>\n);\n\nconst CommandTrigger = AriaDialogTrigger;\n\nexport { Command, CommandMenuItem, CommandTrigger };\nexport type { CommandProps, CommandMenuItemProps, CommandItem };\n"
  },
  {
    "path": "packages/components/src/core/command/meta.json",
    "content": "{\n  \"name\": \"command\",\n  \"category\": \"navigation\",\n  \"status\": \"beta\",\n  \"description\": \"A command palette that allows users to quickly search and execute commands using keyboard shortcuts.\",\n  \"tags\": [\n    \"search\",\n    \"navigation\",\n    \"keyboard\",\n    \"palette\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/date-field/date-field.tsx",
    "content": "\"use client\";\n\nimport type {\n\tDateFieldProps as AriaDateFieldProps,\n\tDateValue,\n} from \"react-aria-components\";\nimport {\n\tDateField as AriaDateField,\n\tDateInput,\n\tDateSegment,\n\tFieldError,\n\tLabel,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst dateField = tv({\n\tslots: {\n\t\tinput:\n\t\t\t\"flex min-h-11 min-w-48 appearance-none items-center rounded-lg border border-border bg-surface px-3 py-0.5 outline-none ring-primary transition-all data-[disabled]:cursor-not-allowed data-[focus-within]:border-transparent data-[disabled]:border-none data-[disabled]:bg-primary/10 data-[focus-within]:bg-surface data-[disabled]:text-fg-disabled data-[focus-within]:ring-2 [&::placeholder]:text-sm\",\n\t\tsegmentStyles:\n\t\t\t\"rounded-md p-1 text-end outline-none focus:text-primary-fg data-[focused]:bg-primary data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg\",\n\t},\n});\n\nconst styles = dateField();\n\ninterface DateFieldProps<T extends DateValue> extends AriaDateFieldProps<T> {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n}\n\nconst DateField = <T extends DateValue>({\n\tlabel,\n\tdescription,\n\terrorMessage,\n\t...props\n}: DateFieldProps<T>) => (\n\t<AriaDateField className=\"flex flex-col gap-1\" {...props}>\n\t\t{label && <Label className=\"text-sm\">{label}</Label>}\n\t\t<DateInput className={styles.input()}>\n\t\t\t{(segment) => (\n\t\t\t\t<DateSegment className={styles.segmentStyles()} segment={segment} />\n\t\t\t)}\n\t\t</DateInput>\n\t\t{description && <Text slot=\"description\">{description}</Text>}\n\t\t<FieldError className=\"text-danger text-sm\">{errorMessage}</FieldError>\n\t</AriaDateField>\n);\n\nexport { DateField };\nexport type { DateFieldProps };\n"
  },
  {
    "path": "packages/components/src/core/date-field/meta.json",
    "content": "{\n  \"name\": \"date-field\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"date\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/date-picker/date-picker.tsx",
    "content": "\"use client\";\n\nimport type {\n\tDatePickerProps as AriaDatePickerProps,\n\tDateRangePickerProps as AriaDateRangePickerProps,\n} from \"react-aria-components\";\nimport {\n\tDatePicker as AriaDatePicker,\n\tDateRangePicker as AriaDateRangePicker,\n\tButton,\n\tDateInput,\n\tDateSegment,\n\ttype DateValue,\n\tDialog,\n\tFieldError,\n\tGroup,\n\tLabel,\n\tPopover,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronDown } from \"lucide-react\";\n\nimport { Calendar, RangeCalendar } from \"@/components/ui/calendar/calendar\";\n\nconst baseStyles = tv({\n\tslots: {\n\t\tinput:\n\t\t\t\"appearance-none rounded-lg px-3 py-1.5 outline-none ring-primary transition-all\",\n\t\tpopover:\n\t\t\t\"overflow-auto rounded-2xl data-[entering]:animate-fade data-[exiting]:animate-fadeOut\",\n\t},\n});\n\nconst datePicker = tv({\n\textend: baseStyles,\n\tslots: {\n\t\tgroup:\n\t\t\t\"relative flex min-h-11 w-auto min-w-48 items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface\",\n\t\tdateSegment:\n\t\t\t\"min-w-16 rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg\",\n\t},\n});\n\nconst dateRangePicker = tv({\n\textend: baseStyles,\n\tslots: {\n\t\tgroup:\n\t\t\t\"relative flex min-h-11 w-full flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface\",\n\t\tdateSegment:\n\t\t\t\"rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg\",\n\t\tseparator: \"px-2 text-fg-muted\",\n\t},\n});\n\nconst styles = datePicker();\nconst rangeStyles = dateRangePicker();\n\ninterface DatePickerProps<T extends DateValue> extends AriaDatePickerProps<T> {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n}\n\nconst DatePicker = <T extends DateValue>({\n\tclassName,\n\tlabel,\n\tdescription,\n\terrorMessage,\n\tchildren,\n\t...props\n}: DatePickerProps<T>) => (\n\t<AriaDatePicker className=\"flex flex-col gap-1\" {...props}>\n\t\t{label && <Label className=\"text-sm\">{label}</Label>}\n\t\t<Group className={styles.group()}>\n\t\t\t<DateInput className={styles.input()}>\n\t\t\t\t{(segment) => (\n\t\t\t\t\t<DateSegment className={styles.dateSegment()} segment={segment} />\n\t\t\t\t)}\n\t\t\t</DateInput>\n\t\t\t<Button className=\"absolute right-2 w-6 rounded-xs outline-offset-0\">\n\t\t\t\t<ChevronDown className=\"size-4 text-fg-muted\" />\n\t\t\t</Button>\n\t\t</Group>\n\t\t{description && (\n\t\t\t<Text className=\"text-fg-muted text-sm\" slot=\"description\">\n\t\t\t\t{description}\n\t\t\t</Text>\n\t\t)}\n\t\t<FieldError className=\"text-danger text-sm\">{errorMessage}</FieldError>\n\t\t<Popover className={styles.popover()}>\n\t\t\t<Dialog>\n\t\t\t\t<Calendar />\n\t\t\t</Dialog>\n\t\t</Popover>\n\t</AriaDatePicker>\n);\n\ninterface DateRangePickerProps<T extends DateValue>\n\textends AriaDateRangePickerProps<T> {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n\tclassName?: string;\n}\n\nconst DateRangePicker = <T extends DateValue>({\n\tclassName,\n\tlabel,\n\tdescription,\n\terrorMessage,\n\tchildren,\n\t...props\n}: DateRangePickerProps<T>) => (\n\t<AriaDateRangePicker className=\"flex w-full flex-col gap-1\" {...props}>\n\t\t{label && <Label className=\"text-sm\">{label}</Label>}\n\t\t<Group className={rangeStyles.group({ className })}>\n\t\t\t<DateInput slot=\"start\" className={rangeStyles.input()}>\n\t\t\t\t{(segment) => (\n\t\t\t\t\t<DateSegment\n\t\t\t\t\t\tclassName={rangeStyles.dateSegment()}\n\t\t\t\t\t\tsegment={segment}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</DateInput>\n\t\t\t<span className={rangeStyles.separator()} aria-hidden=\"true\">\n\t\t\t\t–\n\t\t\t</span>\n\t\t\t<DateInput slot=\"end\" className={rangeStyles.input()}>\n\t\t\t\t{(segment) => (\n\t\t\t\t\t<DateSegment\n\t\t\t\t\t\tclassName={rangeStyles.dateSegment()}\n\t\t\t\t\t\tsegment={segment}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</DateInput>\n\t\t\t<Button className=\"absolute right-2 w-6 rounded-xs outline-offset-0\">\n\t\t\t\t<ChevronDown className=\"size-4 text-fg-muted\" />\n\t\t\t</Button>\n\t\t</Group>\n\t\t{description && (\n\t\t\t<Text className=\"text-fg-muted text-sm\" slot=\"description\">\n\t\t\t\t{description}\n\t\t\t</Text>\n\t\t)}\n\t\t<FieldError className=\"text-danger text-sm\">{errorMessage}</FieldError>\n\t\t<Popover className={rangeStyles.popover()}>\n\t\t\t<Dialog>\n\t\t\t\t<RangeCalendar />\n\t\t\t</Dialog>\n\t\t</Popover>\n\t</AriaDateRangePicker>\n);\n\nexport { DatePicker, DateRangePicker };\nexport type { DatePickerProps, DateRangePickerProps };\n"
  },
  {
    "path": "packages/components/src/core/date-picker/meta.json",
    "content": "{\n  \"name\": \"date-picker\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A date picker combines one or more DateFields with a calendar popover, allowing users to enter or select a single date/time or a range.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"date-time\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/index.ts",
    "content": "export * from \"./accordion/accordion\";\nexport * from \"./badge/badge\";\nexport * from \"./breadcrumbs/breadcrumbs\";\nexport * from \"./button/button\";\nexport * from \"./calendar/calendar\";\nexport * from \"./card/card\";\nexport * from \"./checkbox/checkbox\";\nexport * from \"./combobox/combobox\";\nexport * from \"./command/command\";\nexport * from \"./date-field/date-field\";\nexport * from \"./date-picker/date-picker\";\nexport * from \"./input/input\";\nexport * from \"./menu/menu\";\nexport * from \"./meter/meter\";\nexport * from \"./modal/modal\";\nexport * from \"./popover/popover\";\nexport * from \"./radio-group/radio-group\";\nexport * from \"./select/select\";\nexport * from \"./slider/slider\";\nexport * from \"./switch/switch\";\nexport * from \"./table/table\";\nexport * from \"./tabs/tabs\";\nexport * from \"./tag-group/tag-group\";\nexport * from \"./time-field/time-field\";\nexport * from \"./toggle/toggle\";\nexport * from \"./tooltip/tooltip\";"
  },
  {
    "path": "packages/components/src/core/input/input.tsx",
    "content": "\"use client\";\n\nimport type {\n\tTextFieldProps as AriaTextFieldProps,\n\tValidationResult,\n} from \"react-aria-components\";\nimport {\n\tInput as AriaInput,\n\tTextField as AriaTextField,\n\tFieldError,\n\tLabel,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst input = tv({\n\tbase: \"min-h-11 appearance-none rounded-lg border border-border bg-surface px-3 py-1 text-fg outline-none ring-primary transition-all data-[disabled]:cursor-not-allowed data-[focused]:border-transparent data-[disabled]:bg-primary/10 data-[disabled]:text-fg-disabled data-[focused]:ring-2 [&::placeholder]:text-fg-muted [&::placeholder]:text-sm\",\n});\n\ninterface InputProps extends Omit<AriaTextFieldProps, \"className\"> {\n\tclassName?: string;\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string | ((validation: ValidationResult) => string);\n\tplaceholder?: string;\n}\n\nconst Input = ({\n\tlabel,\n\tdescription,\n\terrorMessage,\n\tplaceholder,\n\tclassName,\n\t...props\n}: InputProps) => (\n\t<AriaTextField className=\"flex w-full flex-col gap-1\" {...props}>\n\t\t{label && <Label className=\"text-sm\">{label}</Label>}\n\t\t<AriaInput className={input({ className })} placeholder={placeholder} />\n\t\t{description && (\n\t\t\t<Text className=\"text-fg-muted text-sm\" slot=\"description\">\n\t\t\t\t{description}\n\t\t\t</Text>\n\t\t)}\n\t\t<FieldError className=\"text-danger text-sm\">{errorMessage}</FieldError>\n\t</AriaTextField>\n);\n\nexport { Input };\nexport type { InputProps };\n"
  },
  {
    "path": "packages/components/src/core/input/meta.json",
    "content": "{\n  \"name\": \"input\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"Allows a user to enter a plain text value with a keyboard.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/menu/menu.tsx",
    "content": "\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nimport {\n\tHeader as AriaHeader,\n\tMenu as AriaMenu,\n\tMenuItem as AriaMenuItem,\n\tMenuSection as AriaMenuSection,\n\tMenuTrigger as AriaMenuTrigger,\n\ttype MenuItemProps,\n\ttype MenuProps,\n\tPopover,\n\tSeparator,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nexport const menu = tv({\n\tslots: {\n\t\tmenuPopover:\n\t\t\t\"data-[entering]:fade-in data-[exiting]:fade-out overflow-auto rounded-2xl border border-border/25 bg-surface shadow-xl data-[entering]:animate-in data-[exiting]:animate-out\",\n\t\theader: \"p-2 font-semibold\",\n\t\tcontent: \"flex h-fit min-w-56 flex-col gap-2 p-3 outline-none\",\n\t\titem: \"relative flex cursor-default justify-between rounded-lg p-3 font-semibold outline-none data-[disabled]:cursor-not-allowed data-[focused]:bg-secondary data-[disabled]:text-fg-disabled\",\n\t\tseparator: \"h-[1px] bg-border\",\n\t},\n});\n\nconst { menuPopover, content, header, item, separator } = menu();\n\nconst MenuTrigger = AriaMenuTrigger;\nconst MenuSection = AriaMenuSection;\n\nconst MenuContent = <T extends object>({\n\tchildren,\n\tclassName,\n\t...props\n}: MenuProps<T> & { className?: string }) => (\n\t<Popover className={menuPopover()}>\n\t\t<AriaMenu {...props} className={content({ className })}>\n\t\t\t{children}\n\t\t</AriaMenu>\n\t</Popover>\n);\n\nconst MenuItem = ({\n\tchildren,\n\tclassName,\n\t...props\n}: MenuItemProps & { className?: string }) => (\n\t<AriaMenuItem {...props} className={item({ className })}>\n\t\t{children}\n\t</AriaMenuItem>\n);\n\nconst MenuHeader = ({\n\tchildren,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLElement> & { className?: string }) => (\n\t<AriaHeader {...props} className={header({ className })}>\n\t\t{children}\n\t</AriaHeader>\n);\n\nconst MenuSeperator = ({\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLElement> & { className?: string }) => (\n\t<Separator {...props} className={separator({ className })} />\n);\n\nexport {\n\tMenuContent,\n\tMenuHeader,\n\tMenuItem,\n\tMenuSeperator,\n\tMenuTrigger,\n\tMenuSection,\n};\n"
  },
  {
    "path": "packages/components/src/core/menu/meta.json",
    "content": "{\n  \"name\": \"menu\",\n  \"category\": \"pickers\",\n  \"status\": \"stable\",\n  \"description\": \"A menu displays a list of actions or options that a user can choose.\",\n  \"tags\": [\n    \"interactive\",\n    \"navigation\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/meter/meta.json",
    "content": "{\n  \"name\": \"meter\",\n  \"category\": \"data-display\",\n  \"status\": \"stable\",\n  \"description\": \"A meter represents a quantity within a known range, or a fractional value.\",\n  \"tags\": [\n    \"data-display\",\n    \"progress\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/meter/meter.tsx",
    "content": "\"use client\";\n\nimport {\n\tMeter as AriaMeter,\n\ttype MeterProps as AriaMeterProps,\n\tLabel,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst bar = tv({\n\tbase: \"h-4 overflow-hidden rounded-2xl bg-surface-2\",\n});\n\ninterface MeterProps extends Omit<AriaMeterProps, \"className\"> {\n\tlabel?: string;\n\tclassName?: string;\n}\n\nconst Meter = ({ label, className, ...props }: MeterProps) => (\n\t<AriaMeter className=\"flex w-56 flex-col gap-2\" {...props}>\n\t\t{({ percentage, valueText }) => (\n\t\t\t<>\n\t\t\t\t<div className=\"flex justify-between\">\n\t\t\t\t\t{label && <Label className=\"text-primary text-sm\">{label}</Label>}\n\t\t\t\t\t<span className=\"value text-primary text-sm\">{valueText}</span>\n\t\t\t\t</div>\n\t\t\t\t<div className={bar({ className })}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"h-full bg-primary\"\n\t\t\t\t\t\tstyle={{ width: `${percentage}%` }}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</>\n\t\t)}\n\t</AriaMeter>\n);\n\nexport { Meter };\nexport type { MeterProps };\n"
  },
  {
    "path": "packages/components/src/core/modal/meta.json",
    "content": "{\n  \"name\": \"modal\",\n  \"category\": \"overlays\",\n  \"status\": \"stable\",\n  \"description\": \"A modal is an overlay element which blocks interaction with elements outside it.\",\n  \"tags\": [\n    \"overlay\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/modal/modal.tsx",
    "content": "\"use client\";\n\nimport {\n\tDialog as AriaDialog,\n\tDialogTrigger as AriaDialogTrigger,\n\tModal as AriaModal,\n\ttype DialogProps,\n\tModalOverlay,\n\ttype ModalOverlayProps,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nexport const modal = tv({\n\tslots: {\n\t\tdialog: \"flex w-full flex-col gap-6 outline-none\",\n\t\tmodalStyles:\n\t\t\t\"fade-in w-full rounded-2xl bg-surface p-6 text-fg outline-none data-[entering]:animate-in md:w-md\",\n\t},\n});\n\nconst styles = modal();\n\ninterface ModalProps extends Omit<ModalOverlayProps, \"className\"> {\n\tclassName?: string;\n}\n\nconst Modal = ({ children, className, ...props }: ModalProps) => (\n\t<ModalOverlay\n\t\t{...props}\n\t\tclassName=\"fade-in fade-out fixed top-0 left-0 z-50 flex h-[var(--visual-viewport-height)] w-screen items-center justify-center bg-zinc-500/50 data-[entering]:animate-in data-[exiting]:animate-out\"\n\t>\n\t\t<AriaModal className={styles.modalStyles({ className })}>\n\t\t\t{children}\n\t\t</AriaModal>\n\t</ModalOverlay>\n);\n\nconst Dialog = ({ children, className, ...props }: DialogProps) => (\n\t<AriaDialog {...props} className={styles.dialog({ className })}>\n\t\t{children}\n\t</AriaDialog>\n);\n\nconst ModalTrigger = AriaDialogTrigger;\n\nexport { Modal, Dialog, ModalTrigger };\nexport type { ModalProps, DialogProps };"
  },
  {
    "path": "packages/components/src/core/popover/meta.json",
    "content": "{\n  \"name\": \"popover\",\n  \"category\": \"overlays\",\n  \"status\": \"stable\",\n  \"description\": \"A popover is an overlay element positioned relative to a trigger.\",\n  \"tags\": [\n    \"overlay\",\n    \"interactive\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/popover/popover.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tDialogTrigger as AriaDialogTrigger,\n\tPopover as AriaPopover,\n\ttype PopoverProps as AriaPopoverProps,\n\tDialog,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nexport const popover = tv({\n\tbase: \"data-[entering]:fade-in data-[exiting]:fade-out m-1 max-w-lg rounded-2xl border border-border/25 bg-surface p-2 text-fg shadow-lg outline-none data-[entering]:animate-in data-[exiting]:animate-out\",\n});\n\ninterface DialogProps extends Omit<AriaPopoverProps, \"className\" | \"children\"> {\n\tchildren: ReactNode;\n\tclassName?: string;\n}\n\nconst PopoverTrigger = AriaDialogTrigger;\n\nconst Popover = ({ children, className, ...props }: DialogProps) => (\n\t<AriaPopover className={popover({ className })} {...props}>\n\t\t<Dialog className=\"outline-none\">{children}</Dialog>\n\t</AriaPopover>\n);\n\nexport { Popover, PopoverTrigger };\n"
  },
  {
    "path": "packages/components/src/core/radio-group/meta.json",
    "content": "{\n  \"name\": \"radio-group\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A radio group allows a user to select a single option from a list of mutually exclusive options.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"selection\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/radio-group/radio-group.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport type {\n  RadioGroupProps as AriaRadioGroupProps,\n  RadioProps,\n  ValidationResult,\n} from \"react-aria-components\";\nimport {\n  Radio as AriaRadio,\n  RadioGroup as AriaRadioGroup,\n  FieldError,\n  Text,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst radioGroup = tv({\n  slots: {\n    radio:\n      \"flex items-center gap-4 text-fg before:block before:h-5 before:w-5 before:rounded-full before:border before:border-border before:ring-focus before:ring-offset-2 before:ring-offset-surface before:transition-all data-[selected]:before:border-4 data-[selected]:before:border-primary data-[focus-visible]:before:ring-2\",\n    group: \"flex flex-col gap-4 text-fg\",\n  },\n});\n\nconst { group, radio } = radioGroup();\n\ninterface RadioGroupProps extends Omit<AriaRadioGroupProps, \"children\" | \"className\"> {\n  className?: string;\n  children?: ReactNode;\n  label?: string;\n  description?: string;\n  errorMessage?: string | ((validation: ValidationResult) => string)\n}\n\nconst RadioGroup = ({\n  className,\n  label,\n  description,\n  errorMessage,\n  children,\n  ...props\n}: RadioGroupProps) => (\n  <AriaRadioGroup className={group({ className })} {...props}>\n    {label}\n    {children}\n    {description && <Text slot=\"description\">{description}</Text>}\n    <FieldError className=\"text-danger text-sm\">{errorMessage}</FieldError>\n  </AriaRadioGroup>\n);\n\nconst Radio = ({\n  children,\n  className,\n  ...props\n}: RadioProps & {\n  className?: string;\n}) => (\n  <AriaRadio className={radio({ className })} {...props}>\n    {children}\n  </AriaRadio>\n);\n\nexport { RadioGroup, Radio }; "
  },
  {
    "path": "packages/components/src/core/select/meta.json",
    "content": "{\n  \"name\": \"select\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A select displays a collapsible list of options and allows a user to select one of them.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"picker\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/select/select.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport type {\n\tSelectProps as AriaSelectProps,\n\tListBoxItemProps,\n\tValidationResult,\n} from \"react-aria-components\";\nimport {\n\tSelect as AriaSelect,\n\tAutocomplete,\n\tButton,\n\tFieldError,\n\tInput,\n\tLabel,\n\tListBox,\n\tListBoxItem,\n\tPopover,\n\tSearchField,\n\tSelectValue,\n\tText,\n\tuseFilter,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CheckIcon, ChevronDown, Search } from \"lucide-react\";\n\nconst select = tv({\n\tslots: {\n\t\tgroup: \"group flex flex-col gap-1\",\n\t\tbutton:\n\t\t\t\"group flex w-fit items-center justify-between gap-4 rounded-full border border-border bg-surface px-4 py-2.75 align-middle font-semibold text-fg text-sm outline-none ring-fg transition-all data-[hovered]:bg-surface-2 group-data-[focus-visible]:border-transparent group-data-[open]:bg-surface-2 group-data-[focus-visible]:ring-2\",\n\t\titem: \"relative m-1 flex cursor-default flex-col rounded-lg p-2 font-semibold outline-none data-[disabled]:cursor-not-allowed data-[focused]:bg-secondary data-[disabled]:text-fg-disabled\",\n\t\tsearchField:\n\t\t\t\"group m-1 flex items-center rounded-full border border-border bg-surface px-2 py-1.5\",\n\t\tsearchInput:\n\t\t\t\"flex-1 bg-transparent text-fg outline-none placeholder:text-fg-muted\",\n\t\tsearchIcon: \"mr-2 size-4 text-fg-muted\",\n\t\tclearButton:\n\t\t\t\"ml-2 rounded p-0.5 text-fg-muted transition-colors hover:bg-surface-2 hover:text-fg group-empty:invisible\",\n\t\tpopover:\n\t\t\t\"min-w-[var(--trigger-width)] rounded-xl border border-border/25 bg-surface p-1 text-fg shadow-lg outline-none\",\n\t},\n});\n\nconst styles = select();\n\ninterface SelectProps<T extends ListBoxItemProps>\n\textends Omit<AriaSelectProps<T>, \"className\"> {\n\tclassName?: string;\n\tpopoverClassName?: string;\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nconst Select = <T extends ListBoxItemProps>({\n\tlabel,\n\tclassName,\n\tdescription,\n\terrorMessage,\n\tpopoverClassName,\n\tchildren,\n\t...props\n}: SelectProps<T>) => (\n\t<AriaSelect className={styles.group()} {...props}>\n\t\t{label && <Label className=\"text-sm\">{label}</Label>}\n\t\t<Button className={styles.button({ className })}>\n\t\t\t<SelectValue className=\"data-[placeholder]:text-fg-muted\" />\n\t\t\t<ChevronDown className=\"size-4 text-fg-muted group-data-[open]:rotate-180 group-data-[focused]:text-fg\" />\n\t\t</Button>\n\t\t{description && (\n\t\t\t<Text className=\"text-fg-muted text-sm\" slot=\"description\">\n\t\t\t\t{description}\n\t\t\t</Text>\n\t\t)}\n\t\t<FieldError className=\"text-danger text-sm\">{errorMessage}</FieldError>\n\t\t<Popover className={styles.popover({ className: popoverClassName })}>\n\t\t\t<ListBox className=\"outline-none\">{children}</ListBox>\n\t\t</Popover>\n\t</AriaSelect>\n);\n\ninterface SelectItemProps\n\textends Omit<ListBoxItemProps, \"className\" | \"children\"> {\n\tchildren: ReactNode;\n\tclassName?: string;\n}\n\nconst SelectItem = ({ className, ...props }: SelectItemProps) => (\n\t<ListBoxItem {...props} className={styles.item({ className })}>\n\t\t{({ isSelected }) => (\n\t\t\t<div className=\"flex items-center justify-between gap-2\">\n\t\t\t\t<span>{props.children}</span>\n\t\t\t\t{isSelected && <CheckIcon className=\"size-4\" />}\n\t\t\t</div>\n\t\t)}\n\t</ListBoxItem>\n);\n\ninterface SearchableSelectProps<T extends ListBoxItemProps>\n\textends SelectProps<T> {\n\tsearchPlaceholder?: string;\n}\n\nconst SearchableSelect = <T extends ListBoxItemProps>({\n\tlabel,\n\tclassName,\n\tdescription,\n\terrorMessage,\n\tsearchPlaceholder = \"Search...\",\n\tchildren,\n\tpopoverClassName,\n\t...props\n}: SearchableSelectProps<T>) => {\n\tconst { contains } = useFilter({ sensitivity: \"base\" });\n\n\treturn (\n\t\t<AriaSelect className={styles.group()} {...props}>\n\t\t\t{label && <Label className=\"text-sm\">{label}</Label>}\n\t\t\t<Button className={styles.button({ className })}>\n\t\t\t\t<SelectValue className=\"data-[placeholder]:text-fg-muted\" />\n\t\t\t\t<ChevronDown className=\"size-4 text-fg-muted group-data-[open]:rotate-180 group-data-[focused]:text-fg\" />\n\t\t\t</Button>\n\t\t\t{description && (\n\t\t\t\t<Text className=\"text-fg-muted text-sm\" slot=\"description\">\n\t\t\t\t\t{description}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t\t<FieldError className=\"text-danger text-sm\">{errorMessage}</FieldError>\n\t\t\t<Popover className={styles.popover({ className: popoverClassName })}>\n\t\t\t\t<Autocomplete filter={contains}>\n\t\t\t\t\t<SearchField\n\t\t\t\t\t\taria-label=\"Search\"\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tclassName={styles.searchField()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Search className={styles.searchIcon()} />\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\t\tclassName={styles.searchInput()}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SearchField>\n\t\t\t\t\t<ListBox className=\"max-h-48 overflow-auto outline-none\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</ListBox>\n\t\t\t\t</Autocomplete>\n\t\t\t</Popover>\n\t\t</AriaSelect>\n\t);\n};\n\nexport { Select, SelectItem, SearchableSelect };\nexport type { SelectProps, SelectItemProps, SearchableSelectProps };\n"
  },
  {
    "path": "packages/components/src/core/slider/meta.json",
    "content": "{\n  \"name\": \"slider\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A slider allows a user to select one or more values within a range.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"range\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/slider/slider.tsx",
    "content": "\"use client\";\n\nimport {\n\tSlider as AriaSlider,\n\tSliderThumb as AriaSliderThumb,\n\tSliderTrack as AriaSliderTrack,\n\tLabel,\n\ttype LabelProps,\n\tSliderOutput,\n\ttype SliderProps,\n\ttype SliderThumbProps,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst slider = tv({\n\tslots: {\n\t\troot: \"grid w-64 auto-cols-fr grid-cols-1 text-fg-muted\",\n\t\tthumb:\n\t\t\t\"h-5 w-5 rounded-full bg-primary ring-focus ring-offset-2 ring-offset-surface data-[dragging]:outline-2 data-[focus-visible]:ring-2\",\n\t\ttrack:\n\t\t\t\"before:-translate-y-1/2 relative col-span-2 col-start-1 w-full before:absolute before:top-1/2 before:h-0.5 before:w-full before:transform before:bg-secondary\",\n\t},\n});\n\nconst { root, thumb, track } = slider();\n\nconst SliderRoot = ({\n\tchildren,\n\tclassName,\n\t...props\n}: SliderProps & { className?: string }) => (\n\t<AriaSlider {...props} className={root({ className })}>\n\t\t{children}\n\t</AriaSlider>\n);\n\nconst SliderThumb = ({\n\tchildren,\n\tclassName,\n\t...props\n}: SliderThumbProps & { className?: string }) => (\n\t<AriaSliderTrack className={track()}>\n\t\t<AriaSliderThumb className={thumb({ className })} {...props} />\n\t</AriaSliderTrack>\n);\n\nconst SliderLabel = ({\n\tchildren,\n\tclassName,\n\t...props\n}: LabelProps & { className?: string }) => (\n\t<div className=\"col-span-2 my-4 flex w-full justify-between\">\n\t\t<Label className=\"text-fg text-sm\" {...props}>\n\t\t\t{children}\n\t\t</Label>\n\t\t<SliderOutput className=\"text-fg text-sm\" />\n\t</div>\n);\n\nexport { SliderRoot, SliderThumb, SliderLabel };\n"
  },
  {
    "path": "packages/components/src/core/switch/meta.json",
    "content": "{\n  \"name\": \"switch\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A switch allows a user to turn a setting on or off.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"toggle\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/switch/switch.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tSwitch as AriaSwitch,\n\ttype SwitchProps as AriaSwitchProps,\n\tLabel,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst switchStyles = tv({\n\tslots: {\n\t\troot: \"group flex items-center gap-2 transition-none duration-200\",\n\t\tindicator:\n\t\t\t\"h-6 w-10 cursor-pointer rounded-xl bg-secondary duration-200 before:mx-[3px] before:mt-[3px] before:block before:size-4.5 before:rounded-2xl before:bg-surface before:transition-all data-[selected]:bg-primary group-data-[selected]:bg-primary group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-focus group-data-[focus-visible]:ring-offset-2 group-data-[focus-visible]:ring-offset-surface group-data-[selected]:before:translate-x-4\",\n\t\tlabel: \"font-semibold text-fg text-sm\",\n\t},\t\n});\n\nconst styles = switchStyles();\n\ninterface SwitchProps extends AriaSwitchProps {\n\tchildren?: ReactNode;\n\tclassName?: string;\n}\n\n const Switch = ({ className, children, ...restProps }: SwitchProps) => (\n\t<AriaSwitch className={styles.root({ className })} {...restProps}>\n\t\t<div className={styles.indicator()} />\n\t\t<Label className={styles.label()}> {children}</Label>\n\t</AriaSwitch>\n);\n\nexport { Switch };\nexport type { SwitchProps };"
  },
  {
    "path": "packages/components/src/core/table/meta.json",
    "content": "{\n  \"name\": \"table\",\n  \"category\": \"data-display\",\n  \"status\": \"stable\",\n  \"description\": \"A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.\",\n  \"tags\": [\n    \"data-display\",\n    \"interactive\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/table/table.tsx",
    "content": "\"use client\";\n\nimport {\n\tColumn as AriaColumn,\n\tTable as AriaTable,\n\tTableBody as AriaTableBody,\n\tTableHeader as AriaTableheader,\n\tCell,\n\ttype CellProps,\n\tCollection,\n\ttype ColumnProps,\n\tRow,\n\ttype RowProps,\n\ttype TableHeaderProps,\n\ttype TableProps,\n\tuseTableOptions,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Menu } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button/button\";\nimport { Checkbox } from \"@/components/ui/checkbox/checkbox\";\n\nconst table = tv({\n\tslots: {\n\t\troot: \"table min-h-[100px] border-separate border-spacing-0 rounded-xl border border-border p-4 outline-none\",\n\t\tcolumn: \"border-border border-b-2 px-4 py-1 text-left outline-none\",\n\t\theader: \"text-fg after:table-row after:h-[2px]\",\n\t\tlabel: \"text-fg-3\",\n\t\trow: \"relative cursor-default rounded-xl text-fg outline-none ring-focus data-[focus-visible]:ring-2\",\n\t\tcell: \"px-4 py-2 outline-none ring-focus data-[focus-visible]:ring-2\",\n\t},\n});\n\nconst styles = table();\n\nconst TableBody = AriaTableBody;\n\nconst Table = ({\n\tchildren,\n\tclassName,\n\t...props\n}: TableProps & { className?: string }) => (\n\t<AriaTable {...props} className={styles.root({ className })}>\n\t\t{children}\n\t</AriaTable>\n);\n\nconst TableCell = ({\n\tchildren,\n\tclassName,\n\t...props\n}: CellProps & { className?: string }) => (\n\t<Cell {...props} className={styles.cell({ className })}>\n\t\t{children}\n\t</Cell>\n);\n\nconst TableColumn = ({\n\tchildren,\n\tclassName,\n\t...props\n}: ColumnProps & { className?: string }) => (\n\t<AriaColumn {...props} className={styles.column({ className })}>\n\t\t{children}\n\t</AriaColumn>\n);\n\nconst TableHeader = <T extends object>({\n\tchildren,\n\tclassName,\n\tcolumns,\n\t...props\n}: TableHeaderProps<T> & { className?: string }) => {\n\tconst { selectionBehavior, selectionMode, allowsDragging } =\n\t\tuseTableOptions();\n\treturn (\n\t\t<AriaTableheader {...props} className={styles.header({ className })}>\n\t\t\t{/* Add extra columns for drag and drop and selection. */}\n\t\t\t{allowsDragging && <TableColumn />}\n\t\t\t{selectionBehavior === \"toggle\" && (\n\t\t\t\t<TableColumn>\n\t\t\t\t\t{selectionMode === \"multiple\" && (\n\t\t\t\t\t\t<Checkbox slot=\"selection\"> </Checkbox>\n\t\t\t\t\t)}\n\t\t\t\t</TableColumn>\n\t\t\t)}\n\t\t\t<Collection items={columns}>{children}</Collection>\n\t\t</AriaTableheader>\n\t);\n};\n\nconst TableRow = <T extends object>({\n\tchildren,\n\tclassName,\n\tcolumns,\n\tid,\n\t...props\n}: RowProps<T> & { className?: string }) => {\n\tconst { selectionBehavior, allowsDragging } = useTableOptions();\n\treturn (\n\t\t<Row id={id} {...props} className={styles.row({ className })}>\n\t\t\t{allowsDragging && (\n\t\t\t\t<Cell className=\"ring-focus data-[focus-visible]:ring-2\">\n\t\t\t\t\t<Button className=\"bg-transparent\" slot=\"drag\">\n\t\t\t\t\t\t<Menu className=\"h-4 w-4 text-fg\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</Cell>\n\t\t\t)}\n\t\t\t{selectionBehavior === \"toggle\" && (\n\t\t\t\t<Cell className=\"\">\n\t\t\t\t\t<Checkbox slot=\"selection\"> </Checkbox>\n\t\t\t\t</Cell>\n\t\t\t)}\n\t\t\t<Collection items={columns}>{children}</Collection>\n\t\t</Row>\n\t);\n};\n\nexport { TableColumn, Table, TableBody, TableCell, TableHeader, TableRow };\n"
  },
  {
    "path": "packages/components/src/core/tabs/meta.json",
    "content": "{\n  \"name\": \"tabs\",\n  \"category\": \"navigation\",\n  \"status\": \"stable\",\n  \"description\": \"Tabs organize content into multiple sections and allow users to navigate between them.\",\n  \"tags\": [\n    \"navigation\",\n    \"interactive\",\n    \"layout\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/tabs/tabs.tsx",
    "content": "\"use client\";\n\nimport {\n\tTab as AriaTab,\n\tTabList as AriaTabList,\n\ttype TabListProps as AriaTabListProps,\n\tTabPanel as AriaTabPanel,\n\ttype TabPanelProps as AriaTabPanelProps,\n\ttype TabProps as AriaTabProps,\n\ttype TabsProps as AriaTabsProps,\n\tTabs as AriaTabsRoot,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst tabs = tv({\n\tslots: {\n\t\troot: \"flex w-full flex-col items-start\",\n\t\tlist: \"relative inline-flex items-center justify-between gap-6 rounded-md p-1\",\n\t\ttab: \"relative flex w-fit cursor-pointer justify-center rounded-2xl border-primary pb-0.5 font-semibold text-fg-muted outline-none ring-focus ring-offset-2 ring-offset-surface transition-colors duration-200 aria-selected:cursor-default aria-selected:rounded-none aria-selected:border-b-2 aria-selected:pb-0 aria-selected:text-primary aria-selected:hover:bg-transparent data-[hovered]:text-primary data-[focus-visible]:ring-2\",\n\t\tpanel:\n\t\t\t\"mt-4 w-96 rounded-xl p-4 outline-none ring-focus data-[focus-visible]:ring-2\",\n\t},\n});\n\nconst styles = tabs();\n\ninterface TabsProps extends Omit<AriaTabsProps, \"className\"> {\n\tclassName?: string;\n}\n\nconst TabsRoot = ({ children, className, ...props }: TabsProps) => (\n\t<AriaTabsRoot {...props} className={styles.root({ className })}>\n\t\t{children}\n\t</AriaTabsRoot>\n);\n\ninterface TabListProps<T> extends Omit<AriaTabListProps<T>, \"className\"> {\n\tclassName?: string;\n}\n\nconst TabList = <T extends object>({\n\tchildren,\n\tclassName,\n\t...props\n}: TabListProps<T>) => (\n\t<AriaTabList {...props} className={styles.list({ className })}>\n\t\t{children}\n\t</AriaTabList>\n);\n\ninterface TabProps extends Omit<AriaTabProps, \"className\"> {\n\tclassName?: string;\n}\n\nconst Tab = ({ children, className, ...props }: TabProps) => (\n\t<AriaTab {...props} className={styles.tab({ className })}>\n\t\t{children}\n\t</AriaTab>\n);\n\ninterface TabPanelProps extends Omit<AriaTabPanelProps, \"className\"> {\n\tclassName?: string;\n}\n\nconst TabPanel = ({ children, className, ...props }: TabPanelProps) => (\n\t<AriaTabPanel {...props} className={styles.panel({ className })}>\n\t\t{children}\n\t</AriaTabPanel>\n);\n\nexport { Tab, TabList, TabPanel, TabsRoot };\nexport type { TabsProps, TabListProps, TabProps, TabPanelProps }; "
  },
  {
    "path": "packages/components/src/core/tag-group/meta.json",
    "content": "{\n  \"name\": \"tag-group\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"selection\",\n    \"filtering\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/tag-group/tag-group.tsx",
    "content": "\"use client\";\n\nimport {\n\tTag as AriaTag,\n\tTagGroup as AriaTagGroup,\n\ttype TagGroupProps as AriaTagGroupProps,\n\ttype TagProps as AriaTagProps,\n\tLabel,\n\tTagList,\n\ttype TagListProps,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst tagGroup = tv({\n\tslots: {\n\t\troot: \"flex flex-col gap-2 text-sm\",\n\t\tlist: \"flex flex-wrap gap-2\",\n\t\ttag: \"flex cursor-default items-center rounded-full border border-border px-2 py-1 outline-none ring-focus ring-offset-2 ring-offset-surface aria-selected:border-primary aria-selected:bg-primary aria-selected:text-primary-fg data-[focus-visible]:ring-2\",\n\t},\n});\n\nconst styles = tagGroup();\n\ninterface TagGroupProps<T>\n\textends Omit<AriaTagGroupProps, \"children\">,\n\t\tPick<TagListProps<T>, \"items\" | \"children\" | \"renderEmptyState\"> {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n}\n\nconst TagGroup = <T extends object>({\n\tlabel,\n\tclassName,\n\tdescription,\n\terrorMessage,\n\titems,\n\tchildren,\n\trenderEmptyState,\n\t...props\n}: TagGroupProps<T>) => (\n\t<AriaTagGroup className={styles.root({ className })} {...props}>\n\t\t{label && <Label className=\"text-primary text-sm\">{label}</Label>}\n\t\t<TagList\n\t\t\tclassName={styles.list()}\n\t\t\titems={items}\n\t\t\trenderEmptyState={renderEmptyState}\n\t\t>\n\t\t\t{children}\n\t\t</TagList>\n\t\t{description && (\n\t\t\t<Text className=\"text-sm\" slot=\"description\">\n\t\t\t\t{description}\n\t\t\t</Text>\n\t\t)}\n\t\t{errorMessage && (\n\t\t\t<Text className=\"text-danger text-sm\" slot=\"errorMessage\">\n\t\t\t\t{errorMessage}\n\t\t\t</Text>\n\t\t)}\n\t</AriaTagGroup>\n);\n\nconst Tag = ({\n\tchildren,\n\tclassName,\n\t...props\n}: AriaTagProps & { className?: string }) => {\n\tconst textValue = typeof children === \"string\" ? children : undefined;\n\treturn (\n\t\t<AriaTag\n\t\t\tclassName={styles.tag({ className })}\n\t\t\ttextValue={textValue}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AriaTag>\n\t);\n};\n\nexport { Tag, TagGroup };\n"
  },
  {
    "path": "packages/components/src/core/time-field/meta.json",
    "content": "{\n  \"name\": \"time-field\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"time\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/time-field/time-field.tsx",
    "content": "\"use client\";\n\nimport type {\n\tTimeFieldProps as AriaTimeFieldProps,\n\tTimeValue,\n} from \"react-aria-components\";\nimport {\n\tTimeField as AriaTimeField,\n\tDateInput,\n\tDateSegment,\n\tFieldError,\n\tLabel,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst timeField = tv({\n\tslots: {\n\t\tinput:\n\t\t\t\"appearance-none rounded-lg border border-border bg-surface px-3 py-1.75 outline-none ring-primary transition-all data-[disabled]:cursor-not-allowed data-[focus-within]:border-transparent data-[disabled]:bg-primary/10 data-[focus-within]:bg-surface data-[disabled]:text-fg-disabled data-[focus-within]:ring-2 [&::placeholder]:text-sm [&::placeholder]:focus:text-primary-fg\",\n\t\tsegmentStyles:\n\t\t\t\"rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted\",\n\t},\n});\n\nconst styles = timeField();\n\ninterface TimeFieldProps<T extends TimeValue> extends AriaTimeFieldProps<T> {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n}\n\nconst TimeField = <T extends TimeValue>({\n\tlabel,\n\tdescription,\n\terrorMessage,\n\t...props\n}: TimeFieldProps<T>) => (\n\t<AriaTimeField className=\"flex w-fit min-w-36 flex-col gap-1\" {...props}>\n\t\t{label && <Label className=\"text-sm\">{label}</Label>}\n\t\t<DateInput className={styles.input()}>\n\t\t\t{(segment) => (\n\t\t\t\t<DateSegment className={styles.segmentStyles()} segment={segment} />\n\t\t\t)}\n\t\t</DateInput>\n\t\t{description && (\n\t\t\t<Text className=\"text-fg-muted text-sm\" slot=\"description\">\n\t\t\t\t{description}\n\t\t\t</Text>\n\t\t)}\n\t\t<FieldError className=\"text-danger text-sm\">{errorMessage}</FieldError>\n\t</AriaTimeField>\n);\n\nexport { TimeField };\nexport type { TimeFieldProps };\n"
  },
  {
    "path": "packages/components/src/core/toggle/meta.json",
    "content": "{\n  \"name\": \"toggle\",\n  \"category\": \"forms\",\n  \"status\": \"stable\",\n  \"description\": \"A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.\",\n  \"tags\": [\n    \"form\",\n    \"interactive\",\n    \"toggle\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/toggle/toggle.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tToggleButton,\n\tToggleButtonGroup,\n\ttype ToggleButtonGroupProps,\n\ttype ToggleButtonProps,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst toggle = tv({\n\tbase: \"inline-flex appearance-none items-center justify-center rounded-full bg-surface-2 px-4 py-1 font-medium outline-none ring-focus ring-offset-2 ring-offset-surface transition-transform duration-100 disabled:pointer-events-none disabled:opacity-50 data-[selected]:bg-primary data-[selected]:text-primary-fg data-[focus-visible]:ring-2\",\n});\n\nconst toggleGroup = tv({\n\tbase: \"flex min-h-11 gap-1 rounded-full border border-border bg-surface-2 p-1\",\n});\n\ninterface ToggleProps extends Omit<ToggleButtonProps, \"className\"> {\n\tclassName?: string;\n}\n\nconst Toggle = ({ className, children, ...props }: ToggleProps) => (\n\t<ToggleButton className={toggle({ className })} {...props}>\n\t\t{children}\n\t</ToggleButton>\n);\n\ninterface ToggleGroupProps extends ToggleButtonGroupProps {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nconst ToggleGroup = ({ className, children, ...props }: ToggleGroupProps) => (\n\t<ToggleButtonGroup {...props} className={toggleGroup({ className })}>\n\t\t{children}\n\t</ToggleButtonGroup>\n);\n\nexport { Toggle, ToggleGroup };\nexport type { ToggleProps, ToggleGroupProps };\n"
  },
  {
    "path": "packages/components/src/core/tooltip/meta.json",
    "content": "{\n  \"name\": \"tooltip\",\n  \"category\": \"overlays\",\n  \"status\": \"stable\",\n  \"description\": \"A tooltip displays a description of an element on hover or focus.\",\n  \"tags\": [\n    \"overlay\",\n    \"interactive\",\n    \"help\"\n  ]\n}"
  },
  {
    "path": "packages/components/src/core/tooltip/tooltip.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tTooltip as AriaTooltip,\n\ttype TooltipProps as AriaTooltipProps,\n\tTooltipTrigger as AriaTooltipTrigger,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst tooltip = tv({\n\tbase: \"[&[data-entering]]:fade-in [&[data-exiting]]:fade-out m-1 max-w-sm rounded-full border border-border bg-surface px-4 py-2 text-fg shadow-xl outline-none [&[data-entering]]:animate-fade-in [&[data-exiting]]:animate-fade-out\",\n});\n\nconst TooltipTrigger = AriaTooltipTrigger;\n\ninterface TooltipProps extends Omit<AriaTooltipProps, \"children\"> {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nconst Tooltip = ({ children, className, ...props }: TooltipProps) => (\n\t<AriaTooltip className={tooltip({ className })} {...props}>\n\t\t{children}\n\t</AriaTooltip>\n);\n\nexport { Tooltip, TooltipTrigger };\n"
  },
  {
    "path": "packages/components/src/examples/accordion-base.tsx",
    "content": "import { Accordion } from \"../core/accordion/accordion\";\n\nexport const AccordionBase = () => {\n\treturn (\n\t\t<Accordion className=\"size-72 lg:size-80 xl:size-96\" title=\"How do I cancel my subscription?\">\n\t\t\tYou can cancel your subscription at any time by going to your account\n\t\t\tsettings and clicking \"Cancel Subscription\". Your access will continue\n\t\t\tuntil the end of your current billing period, and you won't be charged\n\t\t\tagain. All your data will be safely stored for 30 days in case you decide\n\t\t\tto reactivate.\n\t\t</Accordion>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/accordion-group.tsx",
    "content": "import { Accordion, AccordionGroup } from \"../core/accordion/accordion\";\n\nexport const AccordionGroupExample = () => {\n\treturn (\n\t\t<div className=\"h-[500px]\">\n\t\t\t<AccordionGroup\n\t\t\t\tclassName=\"w-72 lg:w-80\"\n\t\t\t\tdefaultExpandedKeys={[\"getting-started\"]}\n\t\t\t>\n\t\t\t\t<Accordion id=\"getting-started\" title=\"Getting Started\">\n\t\t\t\t\t<div className=\"space-y-3\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>Quick Setup:</strong> Install our SDK with npm install\n\t\t\t\t\t\t\t@company/sdk\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>API Key:</strong> Generate your API key from the dashboard\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>First Request:</strong> Make your first API call in under\n\t\t\t\t\t\t\t5 minutes\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tOur comprehensive documentation includes code examples in Python,\n\t\t\t\t\t\t\tJavaScript, and cURL. Start building in minutes with our\n\t\t\t\t\t\t\tinteractive tutorials.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</Accordion>\n\t\t\t\t<Accordion id=\"authentication\" title=\"Authentication & Security\">\n\t\t\t\t\t<div className=\"space-y-3\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>API Keys:</strong> Secure your requests with bearer token\n\t\t\t\t\t\t\tauthentication\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>Rate Limits:</strong> 1,000 requests per minute on free\n\t\t\t\t\t\t\ttier, unlimited on pro\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>Webhooks:</strong> Real-time notifications with 256-bit\n\t\t\t\t\t\t\tSSL encryption\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tEnterprise-grade security with SOC 2 compliance, end-to-end\n\t\t\t\t\t\t\tencryption, and 99.9% uptime SLA.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</Accordion>\n\t\t\t\t<Accordion id=\"integrations\" title=\"Integrations & SDKs\">\n\t\t\t\t\t<div className=\"space-y-3\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>Official SDKs:</strong> JavaScript, Python, Ruby, Go, PHP\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>Frameworks:</strong> React, Vue, Angular, Next.js\n\t\t\t\t\t\t\tcomponents\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>Platforms:</strong> Slack, Discord, Teams, Notion\n\t\t\t\t\t\t\tintegrations\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tJoin 50,000+ developers using our APIs. Browse community-built\n\t\t\t\t\t\t\tpackages and contribute to our open-source ecosystem.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</Accordion>\n\t\t\t</AccordionGroup>\n\t\t</div>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/badge-base.tsx",
    "content": "import { Badge } from \"../core/badge/badge\";\n\nexport const BadgeBase = () => {\n  return (\n    <Badge>New</Badge>\n  );\n};"
  },
  {
    "path": "packages/components/src/examples/badge-variants.tsx",
    "content": "import { Badge } from \"../core/badge/badge\";\n\nexport const BadgeVariants = () => {\n\treturn (\n\t\t<div className=\"flex items-center justify-center gap-2\">\n\t\t\t<Badge variant=\"attention\">Attention</Badge>\n\t\t\t<Badge variant=\"neutral\">Neutral</Badge>\n\t\t\t<Badge variant=\"danger\">Danger</Badge>\n\t\t</div>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/breadcrumbs-base.tsx",
    "content": "import { ChevronRightIcon } from \"lucide-react\";\n\nimport { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink } from \"../core/breadcrumbs/breadcrumbs\";\n\nexport const BreadcrumbsBase = () => {\n  return (\n    <div className='flex items-center justify-center gap-2'>\n    <Breadcrumbs>\n      <BreadcrumbsItem>\n        <BreadcrumbsLink>Home</BreadcrumbsLink>\n        <ChevronRightIcon className='h-4 w-4' />\n      </BreadcrumbsItem>\n      <BreadcrumbsItem>\n        <BreadcrumbsLink>Documents</BreadcrumbsLink>\n        <ChevronRightIcon className='h-4 w-4' />\n      </BreadcrumbsItem>\n      <BreadcrumbsItem>\n        <BreadcrumbsLink>Recent</BreadcrumbsLink>\n      </BreadcrumbsItem>\n    </Breadcrumbs>\n  </div>\n  );\n};"
  },
  {
    "path": "packages/components/src/examples/breadcrumbs-seperators.tsx",
    "content": "import { SlashIcon } from \"lucide-react\";\n\nimport { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink } from \"../core/breadcrumbs/breadcrumbs\";\n\nexport const BreadcrumbsSeperators = () => {\n  return (\n    <div className='flex items-center justify-center gap-2'>\n    <Breadcrumbs>\n      <BreadcrumbsItem>\n        <BreadcrumbsLink>Home</BreadcrumbsLink>\n        <SlashIcon className='h-4 w-4' />\n      </BreadcrumbsItem>\n      <BreadcrumbsItem>\n        <BreadcrumbsLink>Documents</BreadcrumbsLink>\n        <SlashIcon className='h-4 w-4' />\n      </BreadcrumbsItem>\n      <BreadcrumbsItem>\n        <BreadcrumbsLink>Recent</BreadcrumbsLink>\n      </BreadcrumbsItem>\n    </Breadcrumbs>\n  </div>\n  );\n};"
  },
  {
    "path": "packages/components/src/examples/button-base.tsx",
    "content": "import { Button } from \"../core/button/button\";\n\nexport const ButtonBase = () => {\n  return (\n    <Button>Button</Button>\n  );\n};"
  },
  {
    "path": "packages/components/src/examples/button-helper-icons.tsx",
    "content": "import { PlusIcon, TrashIcon } from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\n\nexport const ButtonHelperIcons = () => {\n  return (\n    <div className=\"flex flex-wrap items-center gap-4\">\n    <Button\n      variant=\"primary\"\n      className=\"flex items-center justify-center gap-2\"\n    >\n      <PlusIcon className=\"h-4 w-4\" />\n      <span>Add Item</span>\n    </Button>\n    <Button variant=\"danger\" className=\"flex items-center justify-center gap-2\">\n      <TrashIcon className=\"h-4 w-4\" />\n      <span>Delete</span>\n    </Button>\n  </div>\n  );\n};"
  },
  {
    "path": "packages/components/src/examples/button-sizes.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\n\nexport const ButtonSizes = () => {\n\treturn (\n\t\t<div className=\"flex items-center gap-4\">\n\t\t\t<Button size=\"sm\">Small</Button>\n\t\t\t<Button size=\"md\">Medium</Button>\n\t\t\t<Button size=\"lg\">Large</Button>\n\t\t\t<Button aria-label=\"Add Item\" size=\"icon\">\n\t\t\t\t<PlusIcon className=\"size-4\" />\n\t\t\t</Button>\n\t\t</div>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/button-variants.tsx",
    "content": "import { Button } from \"../core/button/button\";\n\nexport const ButtonVariants = () => {\n  return (\n    <div className=\"flex flex-wrap items-center gap-4\">\n      <Button variant=\"primary\">Primary</Button>\n      <Button variant=\"secondary\">Secondary</Button>\n      <Button variant=\"danger\">Danger</Button>\n      <Button variant=\"ghost\">Ghost</Button>\n    </div>\n  );\n};"
  },
  {
    "path": "packages/components/src/examples/calendar-base.tsx",
    "content": "import { Calendar } from \"../core/calendar/calendar\";\n\nexport const CalendarExample = () => (\n  <div className=\"flex items-center justify-center p-8\">\n    <Calendar />\n  </div>\n);"
  },
  {
    "path": "packages/components/src/examples/card-base.tsx",
    "content": "import { GithubIcon } from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\nimport { Card, CardContent, CardFooter } from \"../core/card/card\";\nimport { Input } from \"../core/input/input\";\n\nexport const CardBase = () => {\n\treturn (\n\t\t<Card\n\t\t\tclassName=\"w-72 md:w-96\"\n\t\t\ttitle=\"Sign in\"\n\t\t\tdescription=\"Sign in to your account.\"\n\t\t>\n\t\t\t<CardContent>\n\t\t\t\t<form>\n\t\t\t\t\t<div className=\"flex w-full flex-col items-center justify-between gap-4\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tclassName=\"w-full\"\n\t\t\t\t\t\t\tlabel=\"Email\"\n\t\t\t\t\t\t\tplaceholder=\"Email\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tclassName=\"w-full\"\n\t\t\t\t\t\t\tlabel=\"Password\"\n\t\t\t\t\t\t\tplaceholder=\"Password\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"flex w-full flex-col justify-between gap-3\">\n\t\t\t\t<Button className=\"w-full\">Sign in</Button>\n\t\t\t\t<Button className=\"w-full gap-4\" variant=\"secondary\">\n\t\t\t\t\t<GithubIcon className=\"size-4\" />\n\t\t\t\t\tContinue with GitHub\n\t\t\t\t</Button>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/card-variants.tsx",
    "content": "import { Card, CardContent } from \"../core/card/card\";\n\nexport const CardVariants = () => {\n  return (\n    <div className=\"flex flex-wrap gap-4\">\n      <Card \n        className=\"w-[300px]\" \n        variant=\"outlined\"\n        title=\"Outlined Card\"\n        description=\"Default outlined card variant.\"\n      >\n        <CardContent>\n          <p>Content goes here with outlined border.</p>\n        </CardContent>\n      </Card>\n\n      <Card \n        className=\"w-[300px]\" \n        variant=\"filled\"\n        title=\"Filled Card\"\n        description=\"This card has a filled background.\"\n      >\n        <CardContent>\n          <p>Content goes here with surface 2 background.</p>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}; "
  },
  {
    "path": "packages/components/src/examples/checkbox-base.tsx",
    "content": "import { Checkbox } from \"../core/checkbox/checkbox\";\n\nexport const CheckboxBase = () => {\n  return (\n    <Checkbox>Accept terms and conditions</Checkbox>\n  );\n}; "
  },
  {
    "path": "packages/components/src/examples/checkbox-group.tsx",
    "content": "import { Checkbox, CheckboxGroup } from \"../core/checkbox/checkbox\";\n\nexport const CheckboxGroupExample = () => {\n\treturn (\n\t\t<CheckboxGroup>\n\t\t\t<Checkbox value=\"option-1\">Option 1</Checkbox>\n\t\t\t<Checkbox value=\"option-2\">Option 2</Checkbox>\n\t\t\t<Checkbox value=\"option-3\">Option 3</Checkbox>\n\t\t</CheckboxGroup>\n\t);\n};"
  },
  {
    "path": "packages/components/src/examples/combobox-base.tsx",
    "content": "import { ComboBox, ComboBoxItem } from \"../core/combobox/combobox\";\n\nconst countries = [\n\t\"United States\",\n\t\"United Kingdom\",\n\t\"Canada\",\n\t\"Australia\",\n\t\"Germany\",\n\t\"France\",\n\t\"Japan\",\n\t\"Brazil\",\n\t\"India\",\n\t\"China\",\n\t\"Mexico\",\n\t\"Netherlands\",\n\t\"Sweden\",\n\t\"Norway\",\n\t\"Italy\",\n];\n\nexport const ComboboxBase = () => {\n\treturn (\n\t\t<div className=\"flex w-64 items-center justify-center gap-2\">\n\t\t\t<ComboBox label=\"Select Country\">\n\t\t\t\t{countries.map((country) => (\n\t\t\t\t\t<ComboBoxItem key={country} textValue={country}>\n\t\t\t\t\t\t{country}\n\t\t\t\t\t</ComboBoxItem>\n\t\t\t\t))}\n\t\t\t</ComboBox>\n\t\t</div>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/combobox-disabled-option.tsx",
    "content": "import { ComboBox, ComboBoxItem } from \"../core/combobox/combobox\";\n\nexport const ComboboxDisabledOption = () => {\n  return (\n    <div className=\"flex w-64 items-center justify-center gap-2\">\n    <ComboBox label=\"Select a Model\">\n      <ComboBoxItem textValue=\"ChatGPT\">ChatGPT</ComboBoxItem>\n      <ComboBoxItem isDisabled textValue=\"Gemini\">Gemini</ComboBoxItem>\n      <ComboBoxItem textValue=\"Claude\">Claude</ComboBoxItem>\n    </ComboBox>\n  </div>\n  );\n};"
  },
  {
    "path": "packages/components/src/examples/combobox-menu-trigger.tsx",
    "content": "import { ComboBox, ComboBoxItem } from \"../core/combobox/combobox\";\n\nexport const ComboboxMenuTrigger = () => {\n  return (\n    <div className=\"flex w-64 items-center justify-center gap-2\">\n    <ComboBox label=\"Select a Model\" menuTrigger=\"focus\">\n      <ComboBoxItem textValue=\"ChatGPT\">ChatGPT</ComboBoxItem>\n      <ComboBoxItem textValue=\"Gemini\">Gemini</ComboBoxItem>\n      <ComboBoxItem textValue=\"Claude\">Claude</ComboBoxItem>\n    </ComboBox>\n  </div>\n  );\n};"
  },
  {
    "path": "packages/components/src/examples/command-base.tsx",
    "content": "\"use client\";\n\nimport {\n\tCalendar,\n\tFileBarChart,\n\tFlag,\n\tFolderPlus,\n\tMessageSquare,\n\tPlus,\n\tRotateCcw,\n\tTarget,\n\tUserPlus,\n\tUsers,\n} from \"lucide-react\";\n\nimport { Command, type CommandItem } from \"../core/command/command\";\n\nexport const CommandBase = () => {\n\tconst commands = [\n\t\t{ id: \"create-task\", label: \"Create new task\", icon: Plus },\n\t\t{ id: \"create-project\", label: \"Create new project\", icon: FolderPlus },\n\t\t{ id: \"assign-task\", label: \"Assign task to team member\", icon: UserPlus },\n\t\t{ id: \"set-priority\", label: \"Set task priority\", icon: Flag },\n\t\t{ id: \"change-status\", label: \"Change task status\", icon: RotateCcw },\n\t\t{ id: \"add-comment\", label: \"Add comment to task\", icon: MessageSquare },\n\t\t{ id: \"set-deadline\", label: \"Set task deadline\", icon: Calendar },\n\t\t{ id: \"create-milestone\", label: \"Create project milestone\", icon: Target },\n\t\t{\n\t\t\tid: \"generate-report\",\n\t\t\tlabel: \"Generate project report\",\n\t\t\ticon: FileBarChart,\n\t\t},\n\t\t{ id: \"invite-member\", label: \"Invite team member\", icon: Users },\n\t] satisfies CommandItem[];\n\n\treturn (\n\t\t<div className=\"flex w-96 items-center justify-center p-8\">\n\t\t\t<Command\n\t\t\t\tcommands={commands}\n\t\t\t\ttriggerKey=\"x\"\n\t\t\t\tonCommandSelect={(command) => {\n\t\t\t\t\tconsole.log(\"Executed:\", command.label);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/command-custom-trigger.tsx",
    "content": "\"use client\";\n\nimport {\n\tCalendar,\n\tFileBarChart,\n\tFlag,\n\tFolderPlus,\n\tMessageSquare,\n\tPlus,\n\tRotateCcw,\n\tSearch,\n\tTarget,\n\tUserPlus,\n\tUsers,\n} from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\nimport { Command, type CommandItem } from \"../core/command/command\";\n\nexport const CommandCustomTrigger = () => {\n\tconst commands = [\n\t\t{ id: \"create-task\", label: \"Create new task\", icon: Plus },\n\t\t{ id: \"create-project\", label: \"Create new project\", icon: FolderPlus },\n\t\t{ id: \"assign-task\", label: \"Assign task to team member\", icon: UserPlus },\n\t\t{ id: \"set-priority\", label: \"Set task priority\", icon: Flag },\n\t\t{ id: \"change-status\", label: \"Change task status\", icon: RotateCcw },\n\t\t{ id: \"add-comment\", label: \"Add comment to task\", icon: MessageSquare },\n\t\t{ id: \"set-deadline\", label: \"Set task deadline\", icon: Calendar },\n\t\t{ id: \"create-milestone\", label: \"Create project milestone\", icon: Target },\n\t\t{\n\t\t\tid: \"generate-report\",\n\t\t\tlabel: \"Generate project report\",\n\t\t\ticon: FileBarChart,\n\t\t},\n\t\t{ id: \"invite-member\", label: \"Invite team member\", icon: Users },\n\t] satisfies CommandItem[];\n\n\treturn (\n\t\t<div className=\"flex w-96 items-center justify-center p-8\">\n\t\t\t<Command\n\t\t\t\tcommands={commands}\n\t\t\t\ttriggerKey=\"x\"\n\t\t\t\ttrigger={\n\t\t\t\t\t<Button variant=\"secondary\" size=\"lg\">\n\t\t\t\t\t\tSearch commands\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t\tonCommandSelect={(command) => {\n\t\t\t\t\tconsole.log(\"Executed:\", command.label);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/date-field-base.tsx",
    "content": "import { DateField } from \"../core/date-field/date-field\";\n\nexport const DateFieldBase = () => {\n\treturn <DateField label=\"Birthday\" />;\n};\n"
  },
  {
    "path": "packages/components/src/examples/date-picker-base.tsx",
    "content": "import { DatePicker } from \"../core/date-picker/date-picker\";\n\nexport const DatePickerBase = () => <DatePicker label=\"Check In\" />; "
  },
  {
    "path": "packages/components/src/examples/date-range-picker-base.tsx",
    "content": "import { DateRangePicker } from \"../core/date-picker/date-picker\";\n\nexport const DateRangePickerBase = () => (\n\t<div className=\"flex w-64 items-center justify-center lg:w-96\">\n\t\t<DateRangePicker label=\"Trip Dates\" />\n\t</div>\n);\n"
  },
  {
    "path": "packages/components/src/examples/index.ts",
    "content": "export * from \"./accordion-base\";\nexport * from \"./accordion-group\";\nexport * from \"./badge-base\";\nexport * from \"./badge-variants\";\nexport * from \"./breadcrumbs-base\";\nexport * from \"./breadcrumbs-seperators\";\nexport * from \"./button-base\";\nexport * from \"./button-helper-icons\";\nexport * from \"./button-sizes\";\nexport * from \"./button-variants\";\nexport * from \"./calendar-base\";\nexport * from \"./card-base\";\nexport * from \"./card-variants\";\nexport * from \"./checkbox-base\";\nexport * from \"./checkbox-group\";\nexport * from \"./combobox-base\";\nexport * from \"./combobox-disabled-option\";\nexport * from \"./combobox-menu-trigger\";\nexport * from \"./command-base\";\nexport * from \"./command-custom-trigger\";\nexport * from \"./date-field-base\";\nexport * from \"./date-picker-base\";\nexport * from \"./date-range-picker-base\";\nexport * from \"./input-base\";\nexport * from \"./input-disabled\";\nexport * from \"./input-label\";\nexport * from \"./menu-base\";\nexport * from \"./meter-base\";\nexport * from \"./modal-base\";\nexport * from \"./modal-dismissable\";\nexport * from \"./popover-base\";\nexport * from \"./radio-group-base\";\nexport * from \"./range-calendar-base\";\nexport * from \"./select-base\";\nexport * from \"./select-popover-classname\";\nexport * from \"./select-searchable\";\nexport * from \"./slider-base\";\nexport * from \"./switch-base\";\nexport * from \"./table-base\";\nexport * from \"./tabs-base\";\nexport * from \"./tag-group-base\";\nexport * from \"./time-field-base\";\nexport * from \"./toggle-base\";\nexport * from \"./toggle-group-base\";\nexport * from \"./tooltip-base\";\n"
  },
  {
    "path": "packages/components/src/examples/input-base.tsx",
    "content": "import { Input } from \"../core/input/input\";\n\nexport const InputBase = () => {\n\treturn (\n\t\t<div className=\"flex w-56 flex-col gap-2\">\n\t\t\t\t<Input aria-label=\"email\" placeholder=\"Enter your email\" />\n\t\t</div>\n\t);\n};"
  },
  {
    "path": "packages/components/src/examples/input-disabled.tsx",
    "content": "import { Input } from \"../core/input/input\";\n\nexport const InputDisabled = () => {\n\treturn (\n\t\t<div className=\"flex w-56 flex-col gap-2\">\n\t\t\t<Input label=\"Email\" placeholder=\"example@email.com\" isDisabled />\n\t\t</div>\n\t);\n};"
  },
  {
    "path": "packages/components/src/examples/input-label.tsx",
    "content": "import { Input } from \"../core/input/input\";\n\nexport const InputLabel = () => {\n\treturn (\n\t\t<div className=\"flex w-56 flex-col gap-2\">\n\t\t\t<Input label=\"Email\" placeholder=\"example@email.com\" />\n\t\t</div>\n\t);\n};"
  },
  {
    "path": "packages/components/src/examples/menu-base.tsx",
    "content": "import {\n\tHelpCircle,\n\tLogOut,\n\tPlus,\n\tSettings,\n} from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\nimport {\n\tMenuContent,\n\tMenuHeader,\n\tMenuItem,\n\tMenuSection,\n\tMenuSeperator,\n\tMenuTrigger,\n} from \"../core/menu/menu\";\n\nexport const Menu = () => {\n\treturn (\n\t\t<MenuTrigger>\n\t\t\t<Button size=\"icon\" className=\"size-12 rounded-full p-0\">\n\t\t\t\tZ\n\t\t\t</Button>\n\t\t\t<MenuContent className=\"w-72\">\n\t\t\t\t<MenuSection>\n\t\t\t\t\t<MenuHeader>me@hello.com</MenuHeader>\n\t\t\t\t</MenuSection>\n\t\t\t\t<MenuSeperator />\n\t\t\t\t<MenuItem>\n\t\t\t\t\tAccount Settings\n\t\t\t\t\t<Settings />\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuItem>\n\t\t\t\t\tAdd Account\n\t\t\t\t\t<Plus />\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuSeperator />\n\t\t\t\t<MenuItem>\n\t\t\t\t\tSupport\n\t\t\t\t\t<HelpCircle />\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuItem>\n\t\t\t\t\tLogout\n\t\t\t\t\t<LogOut />\n\t\t\t\t</MenuItem>\n\t\t\t</MenuContent>\n\t\t</MenuTrigger>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/meter-base.tsx",
    "content": "import { Meter } from \"../core/meter/meter\";\n\nexport const MeterExample = () => <Meter label=\"Monthly Usage\" value={80} />; "
  },
  {
    "path": "packages/components/src/examples/modal-base.tsx",
    "content": "\"use client\";\n\nimport { Heading } from \"react-aria-components\";\n\nimport { Button } from \"../core/button/button\";\nimport { Input } from \"../core/input/input\";\nimport { Dialog, Modal, ModalTrigger } from \"../core/modal/modal\";\n\nexport const ModalExample = () => {\n\treturn (\n\t\t<ModalTrigger>\n\t\t\t<Button variant=\"secondary\">Edit</Button>\n\t\t\t<Modal>\n\t\t\t\t<Dialog>\n\t\t\t\t\t<Heading slot=\"title\" className=\"font-bold text-lg\">Edit Name</Heading>\n\t\t\t\t\t<div className=\"flex flex-col justify-center gap-6\">\n\t\t\t\t\t\t<Input label=\"Name\" defaultValue=\"John Doe\" />\n\t\t\t\t\t\t<div className=\"flex flex-col gap-3\">\n\t\t\t\t\t\t\t<Button slot=\"close\">\n\t\t\t\t\t\t\tUpdate\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button variant=\"secondary\" slot=\"close\">\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Dialog\t>\n\t\t\t</Modal>\n\t\t</ModalTrigger>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/modal-dismissable.tsx",
    "content": "\"use client\";\n\nimport { Heading } from \"react-aria-components\";\n\nimport { Button } from \"../core/button/button\";\nimport { Input } from \"../core/input/input\";\nimport { Dialog, Modal, ModalTrigger } from \"../core/modal/modal\";\n\nexport const ModalDismissable = () => {\n\treturn (\n\t\t<ModalTrigger>\n\t\t\t<Button>Edit</Button>\n\t\t\t<Modal isDismissable>\n\t\t\t\t<Dialog>\n\t\t\t\t\t<Heading slot=\"title\" className=\"font-bold text-lg\">Edit Name</Heading>\n\t\t\t\t\t<div className=\"flex flex-col justify-center gap-6\">\n\t\t\t\t\t\t<Input label=\"Name\" defaultValue=\"John Doe\" />\n\t\t\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t\t<Button slot=\"close\">\n\t\t\t\t\t\t\tUpdate\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button variant=\"secondary\" slot=\"close\">\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Dialog>\n\t\t\t</Modal>\n\t\t</ModalTrigger>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/popover-base.tsx",
    "content": "import { Calendar, MapPin, MessageCircle, Settings, Star, User } from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\nimport { Popover, PopoverTrigger } from \"../core/popover/popover\";\n\nexport const PopoverExample = () => (\n  <PopoverTrigger>\n    <Button className=\"flex items-center gap-4\">\n      <User className=\"size-4\" />\n      <span className=\"font-medium text-sm\">Alex Morgan</span>\n    </Button>\n    <Popover>\n      <div className=\"w-80 p-4\">\n        <div className=\"mb-4 flex items-start gap-3\">\n          <div className=\"flex-1\">\n            <h3 className=\"font-semibold text-lg\">Alex Morgan</h3>\n            <p className=\"text-fg-muted text-sm\">Senior Product Designer</p>\n            <div className=\"mt-1 flex items-center gap-1 text-fg-muted text-xs\">\n              <MapPin className=\"size-3\" />\n              <span>San Francisco, CA</span>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"mb-4 grid grid-cols-3 gap-4 rounded-lg bg-surface-2 p-3\">\n          <div className=\"text-center\">\n            <div className=\"font-semibold text-lg\">127</div>\n            <div className=\"text-fg-muted text-xs\">Projects</div>\n          </div>\n          <div className=\"text-center\">\n            <div className=\"font-semibold text-lg\">4.9</div>\n            <div className=\"flex items-center justify-center gap-1 text-fg-muted text-xs\">\n              <Star className=\"size-3 fill-current text-yellow-500\" />\n              Rating\n            </div>\n          </div>\n          <div className=\"text-center\">\n            <div className=\"font-semibold text-lg\">2.1k</div>\n            <div className=\"text-fg-muted text-xs\">Followers</div>\n          </div>\n        </div>\n      \n        <p className=\"mb-4 text-fg-muted text-sm\">\n          Passionate about creating intuitive user experiences and building design systems that scale.\n        </p>\n\n        <div className=\"flex gap-2\">\n          <Button size=\"sm\" className=\"flex-1 gap-2\">\n            <MessageCircle className=\"size-4\" />\n            Message\n          </Button>\n          <Button variant=\"secondary\" size=\"sm\" className=\"flex-1 gap-2\">\n            <Calendar className=\"size-4\" />\n            Schedule\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\">\n            <Settings className=\"size-4\" />\n          </Button>\n        </div>\n      </div>\n    </Popover>\n  </PopoverTrigger>\n); "
  },
  {
    "path": "packages/components/src/examples/radio-group-base.tsx",
    "content": "import { Radio, RadioGroup } from \"../core/radio-group/radio-group\";\n\nexport const RadioExample = () => (\n  <RadioGroup label=\"Choose your preferred contact method:\" defaultValue=\"email\">\n    <Radio value=\"email\">Email</Radio>\n    <Radio value=\"phone\">Phone Call</Radio>\n    <Radio value=\"sms\">Text Message</Radio>\n  </RadioGroup>\n); "
  },
  {
    "path": "packages/components/src/examples/range-calendar-base.tsx",
    "content": "import { RangeCalendar } from \"../core/calendar/calendar\";\n\nexport const RangeCalendarBase = () => <RangeCalendar />; "
  },
  {
    "path": "packages/components/src/examples/select-base.tsx",
    "content": "import { Select, SelectItem } from \"../core/select/select\";\n\nexport const SelectExample = () => {\n\treturn (\n\t\t<Select aria-label=\"timeframe\" placeholder=\"Timeframe\" className=\"w-40\">\n\t\t\t<SelectItem>Today</SelectItem>\n\t\t\t<SelectItem>This Week</SelectItem>\n\t\t\t<SelectItem>This Month</SelectItem>\n\t\t\t<SelectItem>This Year</SelectItem>\n\t\t</Select>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/select-popover-classname.tsx",
    "content": "import { Select, SelectItem } from \"../core/select/select\";\n\nexport const SelectPopoverClassname = () => {\n\treturn (\n\t\t<Select\n\t\t\taria-label=\"timeframe\"\n\t\t\tplaceholder=\"Timeframe\"\n\t\t\tclassName=\"w-36\"\n\t\t\tpopoverClassName=\"min-w-48\"\n\t\t>\n\t\t\t<SelectItem>Today</SelectItem>\n\t\t\t<SelectItem>This Week</SelectItem>\n\t\t\t<SelectItem>This Month</SelectItem>\n\t\t\t<SelectItem>This Year</SelectItem>\n\t\t</Select>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/select-searchable.tsx",
    "content": "import { SearchableSelect, SelectItem } from \"../core/select/select\";\n\nexport const SearchableSelectExample = () => {\n\treturn (\n\t\t<div className=\"flex w-full flex-col gap-2\">\n\t\t\t<SearchableSelect\n\t\t\t\tlabel=\"Model\"\n\t\t\t\tsearchPlaceholder=\"Search\"\n\t\t\t\tclassName=\"w-48\"\n\t\t\t>\n\t\t\t\t<SelectItem textValue=\"4o\">4o</SelectItem>\n\t\t\t\t<SelectItem textValue=\"o3\">o3</SelectItem>\n\t\t\t\t<SelectItem textValue=\"Sonnet 4\">Sonnet 4</SelectItem>\n\t\t\t\t<SelectItem textValue=\"Gemini 2.0\">Gemini 2.0</SelectItem>\n\t\t\t</SearchableSelect>\n\t\t</div>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/slider-base.tsx",
    "content": "import { SliderLabel, SliderRoot, SliderThumb } from \"../core/slider/slider\";\n\nexport const Slider = () => {\n\treturn (\n\t\t<SliderRoot defaultValue={30}>\n\t\t\t<SliderLabel>Temperature</SliderLabel>\n\t\t\t<SliderThumb />\n\t\t</SliderRoot>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/switch-base.tsx",
    "content": "import { Switch } from \"../core/switch/switch\";\n\nexport const SwitchBase = () => {\n  return <Switch>On/Off</Switch>;\n}; "
  },
  {
    "path": "packages/components/src/examples/table-base.tsx",
    "content": "\"use client\";\n\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableColumn,\n\tTableHeader,\n\tTableRow,\n} from \"../core/table/table\";\n\ninterface User {\n\tid: number;\n\tname: string;\n\temail: string;\n\trole: string;\n\tstatus: \"Active\" | \"Inactive\" | \"Pending\";\n}\n\nconst users: User[] = [\n\t{\n\t\tid: 1,\n\t\tname: \"Alice Johnson\",\n\t\temail: \"alice@example.com\",\n\t\trole: \"Admin\",\n\t\tstatus: \"Active\",\n\t},\n\t{\n\t\tid: 2,\n\t\tname: \"Bob Smith\",\n\t\temail: \"bob@example.com\",\n\t\trole: \"Developer\",\n\t\tstatus: \"Active\",\n\t},\n\t{\n\t\tid: 3,\n\t\tname: \"Carol Davis\",\n\t\temail: \"carol@example.com\",\n\t\trole: \"Designer\",\n\t\tstatus: \"Pending\",\n\t},\n\t{\n\t\tid: 4,\n\t\tname: \"David Wilson\",\n\t\temail: \"david@example.com\",\n\t\trole: \"Developer\",\n\t\tstatus: \"Inactive\",\n\t},\n\t{\n\t\tid: 5,\n\t\tname: \"Eva Brown\",\n\t\temail: \"eva@example.com\",\n\t\trole: \"Manager\",\n\t\tstatus: \"Active\",\n\t},\n];\n\nexport const TableExample = () => (\n\t<div className=\"ml-56 md:ml-0\">\n\t<Table aria-label=\"User management table\" className=\"shrink-0\">\n\t\t<TableHeader>\n\t\t\t<TableColumn isRowHeader>Name</TableColumn>\n\t\t\t<TableColumn>Email</TableColumn>\n\t\t\t<TableColumn>Role</TableColumn>\n\t\t\t<TableColumn>Status</TableColumn>\n\t\t</TableHeader>\n\t\t<TableBody items={users}>\n\t\t\t{(user) => (\n\t\t\t\t<TableRow key={user.id}>\n\t\t\t\t\t<TableCell>{user.name}</TableCell>\n\t\t\t\t\t<TableCell>{user.email}</TableCell>\n\t\t\t\t\t<TableCell>{user.role}</TableCell>\n\t\t\t\t\t<TableCell>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={`inline-flex rounded-full px-2 py-1 font-semibold text-xs ${\n\t\t\t\t\t\t\t\tuser.status === \"Active\"\n\t\t\t\t\t\t\t\t\t? \"bg-green-100 text-green-800\"\n\t\t\t\t\t\t\t\t\t: user.status === \"Pending\"\n\t\t\t\t\t\t\t\t\t\t? \"bg-yellow-100 text-yellow-800\"\n\t\t\t\t\t\t\t\t\t\t: \"bg-red-100 text-red-800\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{user.status}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</TableCell>\n\t\t\t\t</TableRow>\n\t\t\t)}\n\t\t</TableBody>\n\t</Table>\n\t</div>\n);\n"
  },
  {
    "path": "packages/components/src/examples/tabs-base.tsx",
    "content": "import { ArrowDown, Heart, Plus } from \"lucide-react\";\n\nimport { Tab, TabList, TabPanel, TabsRoot } from \"../core/tabs/tabs\";\n\nexport const TabsExample = () => {\n\treturn (\n\t\t<TabsRoot className=\"h-[450px]\">\n\t\t\t<TabList className=\"px-10\">\n\t\t\t\t<Tab id=\"for-you\">For You</Tab>\n\t\t\t\t<Tab id=\"browse\">Browse</Tab>\n\t\t\t\t<Tab id=\"library\">Library</Tab>\n\t\t\t</TabList>\n\t\t\t<TabPanel className=\"px-10\" id=\"for-you\">\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3 className=\"mb-3 font-semibold\">Made for You</h3>\n\t\t\t\t\t\t<div className=\"space-y-3\">\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<div className=\"size-12 rounded-lg bg-gradient-to-br from-purple-400 to-pink-400\"></div>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<p className=\"font-semibold\">Electric Dreams</p>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">\n\t\t\t\t\t\t\t\t\t\t\tSynthwave Collective\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">3:42</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<div className=\"size-12 rounded-lg bg-gradient-to-br from-blue-400 to-cyan-400\"></div>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<p className=\"font-semibold\">Ocean Breeze</p>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">Coastal Sounds</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">4:15</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<div className=\"size-12 rounded-lg bg-gradient-to-br from-green-400 to-blue-400\"></div>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<p className=\"font-semibold\">Forest Whispers</p>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">Nature's Symphony</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">5:28</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<div className=\"size-12 rounded-lg bg-gradient-to-br from-yellow-400 to-orange-400\"></div>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<p className=\"font-semibold\">Golden Sunrise</p>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">Morning Acoustic</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">3:21</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TabPanel>\n\t\t\t<TabPanel className=\"px-10\" id=\"browse\">\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3 className=\"mb-3 font-semibold\">New Releases</h3>\n\t\t\t\t\t\t<div className=\"grid grid-cols-3 gap-3\">\n\t\t\t\t\t\t\t<div className=\"text-center\">\n\t\t\t\t\t\t\t\t<div className=\"mb-2 aspect-square rounded-lg bg-gradient-to-br from-pink-400 to-orange-400\"></div>\n\t\t\t\t\t\t\t\t<p className=\"font-semibold text-sm\">Neon Dreams</p>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-xs\">Electric Pulse</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"text-center\">\n\t\t\t\t\t\t\t\t<div className=\"mb-2 aspect-square rounded-lg bg-gradient-to-br from-blue-400 to-purple-400\"></div>\n\t\t\t\t\t\t\t\t<p className=\"font-semibold text-sm\">Ocean Waves</p>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-xs\">Ambient Sound</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"text-center\">\n\t\t\t\t\t\t\t\t<div className=\"mb-2 aspect-square rounded-lg bg-gradient-to-br from-green-400 to-blue-400\"></div>\n\t\t\t\t\t\t\t\t<p className=\"font-semibold text-sm\">Forest Walk</p>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-xs\">Nature Sounds</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"text-center\">\n\t\t\t\t\t\t\t\t<div className=\"mb-2 aspect-square rounded-lg bg-gradient-to-br from-yellow-400 to-red-400\"></div>\n\t\t\t\t\t\t\t\t<p className=\"font-semibold text-sm\">Golden Hour</p>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-xs\">Indie Folk</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"text-center\">\n\t\t\t\t\t\t\t\t<div className=\"mb-2 aspect-square rounded-lg bg-gradient-to-br from-purple-400 to-pink-400\"></div>\n\t\t\t\t\t\t\t\t<p className=\"font-semibold text-sm\">Cosmic Dance</p>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-xs\">Electronic</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"text-center\">\n\t\t\t\t\t\t\t\t<div className=\"mb-2 aspect-square rounded-lg bg-gradient-to-br from-indigo-400 to-cyan-400\"></div>\n\t\t\t\t\t\t\t\t<p className=\"font-semibold text-sm\">Midnight Jazz</p>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-xs\">Jazz Collection</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TabPanel>\n\t\t\t<TabPanel className=\"px-10\" id=\"library\">\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3 className=\"mb-3 font-semibold\">Your Music</h3>\n\t\t\t\t\t\t<div className=\"space-y-3\">\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<div className=\"size-10 rounded-full bg-gradient-to-br from-green-400 to-blue-400\"></div>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<p className=\"font-semibold\">Liked Songs</p>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">47 songs</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<Heart className=\"size-4 text-fg-muted\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<div className=\"size-10 rounded-full bg-gradient-to-br from-purple-400 to-pink-400\"></div>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<p className=\"font-semibold\">Downloaded</p>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">23 songs</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<ArrowDown className=\"size-4 text-fg-muted\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<div className=\"size-10 rounded-full bg-gradient-to-br from-yellow-400 to-orange-400\"></div>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<p className=\"font-semibold\">Recently Added</p>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">12 songs</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<Plus className=\"size-4 text-fg-muted\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TabPanel>\n\t\t</TabsRoot>\n\t);\n};\n"
  },
  {
    "path": "packages/components/src/examples/tag-group-base.tsx",
    "content": "import { Tag, TagGroup } from \"../core/tag-group/tag-group\";\n\nexport const TagGroupExample = () => (\n  <div className=\"space-y-6\">\n    <TagGroup label=\"Skills\" selectionMode=\"multiple\">\n      <Tag>React</Tag>\n      <Tag>TypeScript</Tag>\n      <Tag>Node.js</Tag>\n      <Tag>CSS</Tag>\n      <Tag>Design Systems</Tag>\n      <Tag>GraphQL</Tag>\n    </TagGroup>\n\n    <TagGroup label=\"Categories\" selectionMode=\"single\">\n      <Tag>Frontend</Tag>\n      <Tag>Backend</Tag>\n      <Tag>Design</Tag>\n      <Tag>DevOps</Tag>\n    </TagGroup>\n  </div>\n); "
  },
  {
    "path": "packages/components/src/examples/time-field-base.tsx",
    "content": "\"use client\";\n\nimport { TimeField } from \"../core/time-field/time-field\";\n\nexport const TimeFieldExample = () => (\n  <div className=\"space-y-6\">\n    <TimeField label=\"Meeting time\" />\n    \n    <TimeField \n      label=\"Appointment time\" \n    />\n    \n    <TimeField \n      label=\"Reminder time\"\n      description=\"Set a time for your daily reminder\"\n    />\n  </div>\n); "
  },
  {
    "path": "packages/components/src/examples/toggle-base.tsx",
    "content": "import { Toggle } from \"../core/toggle/toggle\";\n\nexport const ToggleExample = () => <Toggle>Mode</Toggle>; "
  },
  {
    "path": "packages/components/src/examples/toggle-group-base.tsx",
    "content": "import { LayoutGrid, List, SquareStack } from \"lucide-react\";\n\nimport { Toggle, ToggleGroup } from \"../core/toggle/toggle\";\n\nexport const ToggleGroupExample = () => (\n\t<ToggleGroup defaultSelectedKeys={['list']}>\n\t\t<Toggle aria-label=\"Grid\" id=\"grid\">\n\t\t\t<LayoutGrid className=\"size-4\" />\n\t\t</Toggle>\n\t\t<Toggle aria-label=\"List\" id=\"list\">\n\t\t\t<List className=\"size-4\" />\n\t\t</Toggle>\n\t\t<Toggle aria-label=\"Card\" id=\"card\">\n\t\t\t<SquareStack className=\"size-4\" />\n\t\t</Toggle>\n\t</ToggleGroup>\n); "
  },
  {
    "path": "packages/components/src/examples/tooltip-base.tsx",
    "content": "import { Settings, Share } from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\nimport { Tooltip, TooltipTrigger } from \"../core/tooltip/tooltip\";\n\nexport const TooltipExample = () => (\n\t<div className=\"flex items-center gap-4\">\n\t\t<TooltipTrigger>\n\t\t\t<Button>Hover me</Button>\n\t\t\t<Tooltip>This is a helpful tooltip message</Tooltip>\n\t\t</TooltipTrigger>\n\n\t\t<TooltipTrigger>\n\t\t\t<Button variant=\"ghost\" size=\"icon\">\n\t\t\t\t<Settings className=\"size-4\" />\n\t\t\t</Button>\n\t\t\t<Tooltip>Settings</Tooltip>\n\t\t</TooltipTrigger>\n\n\t\t<TooltipTrigger>\n\t\t\t<Button variant=\"ghost\" size=\"icon\">\n\t\t\t\t<Share className=\"size-4\" />\n\t\t\t</Button>\n\t\t\t<Tooltip>Share this content with others</Tooltip>\n\t\t</TooltipTrigger>\n\t</div>\n);\n"
  },
  {
    "path": "packages/components/src/index.ts",
    "content": "export * from \"./core\";\nexport * from \"./examples\";\n"
  },
  {
    "path": "packages/components/src/tailwind.css",
    "content": "@variant dark ([data-theme=\"dark\"] &);\n\n:root {\n  /* SURFACES (neutrals & elevation) */\n  --surface: oklch(98.5% 0 0); /* app/page background */\n  --surface-2: oklch(97% 0 0); /* card / raised */\n\n  /* CONTENT (foreground) */\n  --fg: oklch(14.5% 0 0); /* primary reading text */\n  --fg-muted: oklch(55.6% 0 0); /* secondary text, captions */\n  --fg-inverse: oklch(98.5% 0 0); /* text on dark */\n  --fg-disabled: oklch(70.8% 0 0); /* explicit disabled state text */\n\n  /* OUTLINES & DIVIDERS */\n  --border: oklch(87% 0 0); /* generic 1px rules, inputs */\n  --focus: oklch(68.5% 0.169 237.323); /* focus ring / a11y outline */\n\n  /* INTERACTIVE ROLES (paired bg / fg ) */\n  --primary: oklch(14.5% 0 0);\n  --primary-fg: oklch(98.5% 0 0);\n\n  --secondary: oklch(92.2% 0 0);\n  --secondary-fg: oklch(14.5% 0 0);\n\n  /* STATUS / FUNCTIONAL */\n  \n  --danger: oklch(63.7% 0.237 25.331);\n  --danger-fg: #ffffff;\n}\n\n[data-theme='dark'] {\n  /* SURFACES (neutrals & elevation) */\n  --surface: oklch(14.5% 0 0); /* app/page background */\n  --surface-2: oklch(20.5% 0 0); /* card / raised */\n\n  /* CONTENT (foreground) */\n  --fg: oklch(98.5% 0.001 106.423); /* primary reading text */\n  --fg-muted: oklch(55.6% 0 0); /* secondary text, captions */\n  --fg-inverse: oklch(98.5% 0 0); /* text on dark */\n  --fg-disabled: oklch(37.1% 0 0); /* explicit disabled state text */\n\n  /* OUTLINES & DIVIDERS */\n  --border: oklch(37.1% 0 0); /* generic 1px rules, inputs */\n  --focus: oklch(68.5% 0.169 237.323); /* focus ring / a11y outline */\n\n  /* INTERACTIVE ROLES (paired bg / fg ) */\n  --primary: oklch(98.5% 0 0);\n  --primary-fg: oklch(14.5% 0 0);\n\n  --secondary: oklch(26.9% 0 0);\n  --secondary-fg: oklch(98.5% 0 0);\n\n  /* STATUS / FUNCTIONAL */\n  \n  --danger: oklch(63.7% 0.237 25.331);\n  --danger-fg: oklch(98.5% 0 0);\n}\n\n@theme {\n  --color-surface: var(--surface);\n  --color-surface-2: var(--surface-2);\n  --color-fg: var(--fg);\n  --color-fg-muted: var(--fg-muted);\n  --color-fg-disabled: var(--fg-disabled);\n  --color-fg-inverse: var(--fg-inverse);\n  --color-border: var(--border);\n  --color-focus: var(--focus);\n  --color-primary: var(--primary);\n  --color-primary-fg: var(--primary-fg);\n  --color-secondary: var(--secondary);\n  --color-secondary-fg: var(--secondary-fg);\n  --color-danger: var(--danger);\n  --color-danger-fg: var(--danger-fg);\n}\n\n  /* clears the ‘X’ from Internet Explorer */\n  input[type=\"search\"]::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  input[type=\"search\"]::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  /* clears the ‘X’ from Chrome */\n  input[type=\"search\"]::-webkit-search-decoration,\n  input[type=\"search\"]::-webkit-search-cancel-button,\n  input[type=\"search\"]::-webkit-search-results-button,\n  input[type=\"search\"]::-webkit-search-results-decoration {\n    display: none;\n  } \n"
  },
  {
    "path": "packages/components/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"lib\": [\"DOM\", \"DOM.Iterable\", \"ES6\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": false,\n    \"jsx\": \"react-jsx\",\n    \"declaration\": true,\n    \"outDir\": \"./dist\",\n    \"rootDir\": \"./src\",\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/components/ui/*\": [\"src/core/*\"]\n    }\n  },\n  \"include\": [\n    \"src/**/*\"\n  ],\n  \"exclude\": [\n    \"node_modules\",\n    \"dist\",\n    \"**/*.test.*\"\n  ]\n} "
  },
  {
    "path": "packages/registry/CHANGELOG.md",
    "content": "# @baselayer/registry\n\n## 2.0.0\n\n### Major Changes\n\n- 7204382: v2\n"
  },
  {
    "path": "packages/registry/package.json",
    "content": "{\n  \"name\": \"@baselayer/registry\",\n  \"version\": \"2.1.0\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"main\": \"./dist/index.js\",\n  \"types\": \"./dist/index.d.ts\",\n  \"files\": [\n    \"dist\",\n    \"src\"\n  ],\n  \"scripts\": {\n    \"build\": \"tsc\",\n    \"dev\": \"tsc --watch\",\n    \"type-check\": \"tsc --noEmit\"\n  },\n  \"dependencies\": {\n    \"zod\": \"^3.25.67\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"catalog:\",\n    \"typescript\": \"catalog:\"\n  },\n  \"keywords\": [\n    \"baselayer\",\n    \"registry\",\n    \"schema\"\n  ],\n  \"author\": \"zwgnr\",\n  \"license\": \"MIT\"\n}"
  },
  {
    "path": "packages/registry/src/index.ts",
    "content": "// Registry package entry point\n// Exports all schemas and types for component registry\n\nexport * from './schema.js'; "
  },
  {
    "path": "packages/registry/src/schema.ts",
    "content": "// Registry Schema Definition\n// This defines the structure for machine-readable component metadata compatible with shadcn\n\nimport { z } from \"zod\";\n\n// Zod schemas for shadcn registry compatibility\nexport const RegistryItemFileSchema = z.object({\n\tpath: z.string(),\n\tcontent: z.string().optional(),\n\ttype: z.enum([\n\t\t\"registry:block\",\n\t\t\"registry:component\",\n\t\t\"registry:lib\",\n\t\t\"registry:hook\",\n\t\t\"registry:ui\",\n\t\t\"registry:page\",\n\t\t\"registry:file\",\n\t\t\"registry:style\",\n\t\t\"registry:theme\",\n\t\t\"registry:item\",\n\t]),\n\ttarget: z.string().optional(),\n});\n\nexport const RegistryItemSchema = z.object({\n\tname: z.string(),\n\ttype: z.enum([\n\t\t\"registry:block\",      // Complex components with multiple files\n\t\t\"registry:component\",  // Simple components\n\t\t\"registry:lib\",        // Lib and utils\n\t\t\"registry:hook\",       // Hooks\n\t\t\"registry:ui\",         // UI components and single-file primitives\n\t\t\"registry:page\",       // Page or file-based routes\n\t\t\"registry:file\",       // Miscellaneous files\n\t\t\"registry:style\",      // Registry styles (e.g. new-york)\n\t\t\"registry:theme\",      // Themes\n\t\t\"registry:item\",       // Universal registry items\n\t]),\n\ttitle: z.string().optional(),\n\tdescription: z.string().optional(),\n\tauthor: z.string().optional(),\n\tcategories: z.array(z.string()).optional(),\n\tdocs: z.string().optional(),\n\tregistryDependencies: z.array(z.string()).optional(),\n\tdependencies: z.array(z.string()).optional(),\n\tdevDependencies: z.array(z.string()).optional(),\n\tfiles: z.array(RegistryItemFileSchema),\n\ttailwind: z\n\t\t.object({\n\t\t\tconfig: z.record(z.any()).optional(),\n\t\t})\n\t\t.optional(),\n\tcssVars: z.record(z.any()).optional(),\n\tcss: z.record(z.any()).optional(),\n\tmeta: z.record(z.any()).optional(),\n});\n\nexport const RegistrySchema = z.object({\n\tname: z.string(),\n\t$schema: z.string(),\n\thomepage: z.string().url().optional(),\n\titems: z.array(RegistryItemSchema),\n});\n\n// Derived TypeScript types\nexport type RegistryItem = z.infer<typeof RegistryItemSchema>;\nexport type RegistryItemFile = z.infer<typeof RegistryItemFileSchema>;\nexport type Registry = z.infer<typeof RegistrySchema>;\n"
  },
  {
    "path": "packages/registry/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"lib\": [\"ES6\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": false,\n    \"declaration\": true,\n    \"outDir\": \"./dist\",\n    \"rootDir\": \"./src\"\n  },\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n} "
  },
  {
    "path": "pnpm-workspace.yaml",
    "content": "packages:\n  - 'web'\n  - 'packages/*'\n\n# Define a catalog of version ranges.\ncatalog:\n  react-aria-components: 1.11.0\n  tailwind-variants: 2.1.0\n  typescript: ^5.8.3\n  \"@types/node\": ^24.0.3 "
  },
  {
    "path": "turbo.json",
    "content": "{\n  \"$schema\": \"https://turbo.build/schema.json\",\n  \"ui\": \"tui\",\n  \"tasks\": {\n    \"build\": {\n      \"dependsOn\": [\"^build\"],\n      \"outputs\": [\".next/**\", \"!.next/cache/**\", \"dist/**\"]\n    },\n    \"dev\": {\n      \"cache\": false,\n      \"persistent\": true\n    },\n    \"lint\": {\n      \"dependsOn\": [\"^build\"]\n    },\n    \"type-check\": {\n      \"dependsOn\": [\"^build\"]\n    },\n    \"clean\": {\n      \"cache\": false\n    }\n  }\n} "
  },
  {
    "path": "web/.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.*\n.yarn/*\n!.yarn/patches\n!.yarn/plugins\n!.yarn/releases\n!.yarn/versions\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# env files (can opt-in for committing if needed)\n.env*\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n# fumadocs generated files\n.source/\n"
  },
  {
    "path": "web/CHANGELOG.md",
    "content": "# @baselayer/web\n\n## 2.0.3\n\n### Patch Changes\n\n- f594c82: update RAC + tw\n- Updated dependencies [f594c82]\n  - @baselayer/components@2.0.3\n\n## 2.0.2\n\n### Patch Changes\n\n- 6f88f68: mobile optimizations\n- Updated dependencies [6f88f68]\n  - @baselayer/components@2.0.2\n\n## 2.0.1\n\n### Patch Changes\n\n- Updated dependencies [6f94762]\n  - @baselayer/components@2.0.1\n\n## 2.0.0\n\n### Major Changes\n\n- 7204382: v2\n\n### Patch Changes\n\n- Updated dependencies [7204382]\n  - @baselayer/components@2.0.0\n  - @baselayer/registry@2.0.0\n"
  },
  {
    "path": "web/README.md",
    "content": "# baselayer v2\n"
  },
  {
    "path": "web/app/api/examples/[name]/route.ts",
    "content": "import { NextResponse } from \"next/server\";\n\nimport { getExampleSource } from \"@/lib/component-data\";\n\nexport async function GET(\n\t_request: Request,\n\t{ params }: { params: Promise<{ name: string }> },\n) {\n\ttry {\n\t\tconst { name } = await params;\n\t\tconst exampleSource = await getExampleSource(name);\n\n\t\tif (exampleSource && !exampleSource.includes(\"not found\")) {\n\t\t\treturn new NextResponse(exampleSource, {\n\t\t\t\theaders: {\n\t\t\t\t\t\"Content-Type\": \"text/plain\",\n\t\t\t\t\t\"Cache-Control\": \"public, max-age=3600\",\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\n\t\treturn new NextResponse(\"Not found\", { status: 404 });\n\t} catch (error) {\n\t\tconsole.error(\"Error in examples API route:\", error);\n\t\treturn new NextResponse(\"Internal Server Error\", { status: 500 });\n\t}\n}\n"
  },
  {
    "path": "web/app/api/search/route.ts",
    "content": "import { createFromSource } from 'fumadocs-core/search/server';\n\nimport { source } from '@/lib/source';\n\nexport const { GET } = createFromSource(source); "
  },
  {
    "path": "web/app/docs/[...slug]/page.tsx",
    "content": "import { notFound } from \"next/navigation\";\n\nimport type { Metadata } from \"next\";\n\nimport { getPageNavigation } from \"@/lib/navigation\";\nimport { source } from \"@/lib/source\";\n\nimport { ComponentMetadata } from \"@/components/component-metadata\";\nimport { DocsPage } from \"@/components/docs-page\";\nimport { mdxComponents } from \"@/components/mdx-components\";\nimport { OpenInAiMenu } from \"@/components/open-in-ai-menu\";\nimport { RACLink } from \"@/components/rac-link\";\n\n// Ensure strict static-only build\nexport const dynamic = \"error\";\n\ninterface PageProps {\n\tparams: Promise<{\n\t\tslug?: string[];\n\t}>;\n}\n\n// Convert PascalCase title to kebab-case component ID\nfunction titleToComponentId(title: string): string {\n\t//  special cases\n\tif (title === \"ComboBox\") {\n\t\treturn \"combobox\";\n\t}\n\n\treturn (\n\t\ttitle\n\t\t\t// Insert a hyphen before uppercase letters that follow lowercase letters\n\t\t\t.replace(/([a-z])([A-Z])/g, \"$1-$2\")\n\t\t\t.toLowerCase()\n\t);\n}\n\nexport default async function Page({ params }: PageProps) {\n\tconst { slug } = await params;\n\tconst page = source.getPage(slug);\n\n\tif (!page) {\n\t\tnotFound();\n\t}\n\n\tconst toc = page.data.toc || [];\n\tconst MDXContent = page.data.body;\n\tconst navigation = getPageNavigation(page.url);\n\tconst componentId = titleToComponentId(page.data.title);\n\tconst isComponentPage = page.url.includes(\"/docs/components/\");\n\n\treturn (\n\t\t<DocsPage toc={toc} navigation={navigation}>\n\t\t\t<div className=\"prose dark:prose-invert max-w-none px-6 pb-12 md:px-12\">\n\t\t\t\t<h1 className=\"font-bold text-3xl tracking-tigh\">{page.data.title}</h1>\n\n\t\t\t\t{/* Component metadata for component pages only */}\n\t\t\t\t{isComponentPage && <ComponentMetadata componentId={componentId} />}\n\n\t\t\t\t{/* Links section - always show for all docs pages */}\n\t\t\t\t<div className=\"my-4 flex items-center gap-4 \">\n\t\t\t\t\t{page.data.isRAC && <RACLink componentName={page.data.title} />}\n\t\t\t\t\t<OpenInAiMenu pageTitle={page.data.title} pageUrl={page.url} />\n\t\t\t\t</div>\n\n\t\t\t\t<MDXContent components={mdxComponents} />\n\t\t\t</div>\n\t\t</DocsPage>\n\t);\n}\n\nexport async function generateStaticParams() {\n\treturn source.generateParams();\n}\n\nexport async function generateMetadata({\n\tparams,\n}: PageProps): Promise<Metadata> {\n\tconst { slug } = await params;\n\tconst page = source.getPage(slug);\n\n\tif (!page) notFound();\n\n\treturn {\n\t\ttitle: `${page.data.title} - BaseLayer`,\n\t\tdescription: page.data.description,\n\t};\n}\n"
  },
  {
    "path": "web/app/docs/content/components/accordion.mdx",
    "content": "---\ntitle: Accordion\nisRAC: true\n---\n\n<ComponentPreview example=\"accordion-base\" />\n\n## Group\n\n<ComponentPreview example=\"accordion-group\" />\n\n## Source\n\n<ComponentPreview name=\"accordion\" />"
  },
  {
    "path": "web/app/docs/content/components/badge.mdx",
    "content": "---\ntitle: Badge\ndescription: A badge is a small, visual indicator that can be used to label, categorize, or organize content.\n---\n\n<ComponentPreview example=\"badge-base\" />\n\n## Variants\n\n<ComponentPreview example=\"badge-variants\" />\n\n## Source\n\n<ComponentPreview name=\"badge\" />\n"
  },
  {
    "path": "web/app/docs/content/components/breadcrumbs.mdx",
    "content": "---\ntitle: Breadcrumbs\nisRAC: true\n---\n\n<ComponentPreview example='breadcrumbs-base' />\n\n## Separator Icons\n\n<ComponentPreview example='breadcrumbs-seperators' />\n\n## Source\n\n<ComponentPreview name='breadcrumbs' />"
  },
  {
    "path": "web/app/docs/content/components/button.mdx",
    "content": "---\ntitle: Button\nisRAC: true\n---\n\n<ComponentPreview example=\"button-base\" />\n\n## Variants\n\n<ComponentPreview example=\"button-variants\" />\n\n## Sizes\n\n<ComponentPreview example=\"button-sizes\" />\n\n## Helper Icons\n\n<ComponentPreview example=\"button-helper-icons\" />\n\n## Source\n\n<ComponentPreview name=\"button\" />"
  },
  {
    "path": "web/app/docs/content/components/calendar.mdx",
    "content": "---\ntitle: Calendar\nisRAC: true\n---\n\n<ComponentPreview example=\"calendar-base\" />\n\n## Range Calendar\n\n<ComponentPreview example=\"range-calendar-base\" />\n\n## Source\n\n<ComponentPreview name=\"calendar\" />\n"
  },
  {
    "path": "web/app/docs/content/components/card.mdx",
    "content": "---\ntitle: Card\n---\n\n<ComponentPreview example=\"card-base\" />\n\n## Variants\n\n<ComponentPreview example=\"card-variants\" />\n\n## Source\n\n<ComponentPreview name=\"card\" /> "
  },
  {
    "path": "web/app/docs/content/components/checkbox.mdx",
    "content": "---\ntitle: Checkbox\nisRAC: true\n---\n\n<ComponentPreview example=\"checkbox-base\" />\n\n## Group\n\n<ComponentPreview example=\"checkbox-group\" />\n\n\n## Source\n\n<ComponentPreview name=\"checkbox\" /> "
  },
  {
    "path": "web/app/docs/content/components/combobox.mdx",
    "content": "---\ntitle: ComboBox\nisRAC: true\n---\n\n<ComponentPreview example=\"combobox-base\" />\n\nIf this component is not what exactly you're looking for UX wise, you may want to check out the [Searchable Select](/docs/components/select#searchable-select) component.\n\n## Menu trigger behavior\n\n<ComponentPreview example=\"combobox-menu-trigger\" />\n\n## Disabled Options\n\n<ComponentPreview example=\"combobox-disabled-option\" />\n\n## Source\n\n<ComponentPreview name=\"combobox\" />"
  },
  {
    "path": "web/app/docs/content/components/command.mdx",
    "content": "---\ntitle: Command\ndescription: A command palette that allows users to quickly search and execute commands using keyboard shortcuts.\n---\n\n<ComponentPreview example=\"command-base\" />\n\n## Custom Trigger\n\n<ComponentPreview example=\"command-custom-trigger\" />\n\n## Source\n\n<ComponentPreview name=\"command\" /> "
  },
  {
    "path": "web/app/docs/content/components/date-field.mdx",
    "content": "---\ntitle: DateField\nisRAC: true\n---\n\n<ComponentPreview example=\"date-field-base\" />\n\n## Source\n\n<ComponentPreview name=\"date-field\" /> "
  },
  {
    "path": "web/app/docs/content/components/date-picker.mdx",
    "content": "---\ntitle: DatePicker\nisRAC: true\n---\n\n<ComponentPreview example=\"date-picker-base\" />\n\n## Date Range Picker\n\n<ComponentPreview example=\"date-range-picker-base\" />\n\n## Source\n\n<ComponentPreview name=\"date-picker\" /> "
  },
  {
    "path": "web/app/docs/content/components/input.mdx",
    "content": "---\ntitle: Input\ndescription: Allows a user to enter a plain text value with a keyboard.\n---\n\nimport { RACLink } from \"@/components/rac-link\";\n\n<RACLink componentName=\"TextField\" />\n\n<ComponentPreview example=\"input-base\" />\n\n## Label\n\n<ComponentPreview example=\"input-label\" />\n\n## Disabled\n\n<ComponentPreview example=\"input-disabled\" />\n\n## Source\n\n<ComponentPreview name=\"input\" />\n"
  },
  {
    "path": "web/app/docs/content/components/menu.mdx",
    "content": "---\ntitle: Menu\nisRAC: true\n---\n\n<ComponentPreview example=\"menu-base\" />\n\n## Source \n\n<ComponentPreview name=\"menu\" />\n"
  },
  {
    "path": "web/app/docs/content/components/meter.mdx",
    "content": "---\ntitle: Meter\nisRAC: true\n---\n\n<ComponentPreview example=\"meter-base\" />\n\n## Source \n\n<ComponentPreview name=\"meter\" /> "
  },
  {
    "path": "web/app/docs/content/components/modal.mdx",
    "content": "---\ntitle: Modal\nisRAC: true\n---\n\n<ComponentPreview example=\"modal-base\" />\n\n## Dismissable\n\n<ComponentPreview example=\"modal-dismissable\" />\n\n\n\n## Source\n\n<ComponentPreview name=\"modal\" />\n"
  },
  {
    "path": "web/app/docs/content/components/popover.mdx",
    "content": "---\ntitle: Popover\nisRAC: true\n---\n\n<ComponentPreview example=\"popover-base\" />\n\n## Source \n\n<ComponentPreview name=\"popover\" /> "
  },
  {
    "path": "web/app/docs/content/components/radio-group.mdx",
    "content": "---\ntitle: RadioGroup\nisRAC: true\n---\n\n<ComponentPreview example=\"radio-group-base\" />\n\n## Source \n\n<ComponentPreview name=\"radio-group\" /> "
  },
  {
    "path": "web/app/docs/content/components/select.mdx",
    "content": "---\ntitle: Select\nisRAC: true\n---\n\n<ComponentPreview example=\"select-base\" />\n\n## Searchable Select\n\n<ComponentPreview example=\"select-searchable\" />\n\n## Popover Classname\n\n<ComponentPreview example=\"select-popover-classname\" />\n\n## Source\n\n<ComponentPreview name=\"select\" /> "
  },
  {
    "path": "web/app/docs/content/components/slider.mdx",
    "content": "---\ntitle: Slider\nisRAC: true\n---\n\n<ComponentPreview example=\"slider-base\" />\n\n## Source \n\n<ComponentPreview name=\"slider\" /> "
  },
  {
    "path": "web/app/docs/content/components/switch.mdx",
    "content": "---\ntitle: Switch\nisRAC: true\n---\n\n<ComponentPreview example=\"switch-base\" />\n\n## Source\n\n<ComponentPreview name=\"switch\" /> "
  },
  {
    "path": "web/app/docs/content/components/table.mdx",
    "content": "---\ntitle: Table\nisRAC: true\n---\n\n<ComponentPreview example=\"table-base\" />\n\n## Source \n\n<ComponentPreview name=\"table\" /> "
  },
  {
    "path": "web/app/docs/content/components/tabs.mdx",
    "content": "---\ntitle: Tabs\nisRAC: true\n---\n\n<ComponentPreview example=\"tabs-base\" />\n\n## Source\n\n<ComponentPreview name=\"tabs\" /> "
  },
  {
    "path": "web/app/docs/content/components/tag-group.mdx",
    "content": "---\ntitle: TagGroup\nisRAC: true\n---\n\n<ComponentPreview example=\"tag-group-base\" />\n\n## Source \n\n<ComponentPreview name=\"tag-group\" /> "
  },
  {
    "path": "web/app/docs/content/components/time-field.mdx",
    "content": "---\ntitle: TimeField\nisRAC: true\n---\n\n<ComponentPreview example=\"time-field-base\" />\n\n## Source \n\n<ComponentPreview name=\"time-field\" /> "
  },
  {
    "path": "web/app/docs/content/components/toggle.mdx",
    "content": "---\ntitle: Toggle\nisRAC: true\n---\n\n<ComponentPreview example=\"toggle-base\" />\n\n## Group\n\n<ComponentPreview example=\"toggle-group-base\" />\n\n## Source \n\n<ComponentPreview name=\"toggle\" /> "
  },
  {
    "path": "web/app/docs/content/components/tooltip.mdx",
    "content": "---\ntitle: Tooltip\nisRAC: true\n---\n\n<ComponentPreview example=\"tooltip-base\" />\n\n## Source \n\n<ComponentPreview name=\"tooltip\" /> "
  },
  {
    "path": "web/app/docs/content/intro.mdx",
    "content": "---\ntitle: Intro\ndescription: BaseLayer is a collection of beautiful, accessible React components built with React Aria Components and TailwindCSS. Powered by the shadcn registry.\n---\n\n## What is BaseLayer?\n\nBaseLayer is a component collection built for the [shadcn](https://ui.shadcn.com) ecosystem. Like shadcn/ui, components are **copied into your project** and become part of your codebase - not installed as dependencies.\n\nBaseLayer uses [React Aria Components](https://react-spectrum.adobe.com/react-aria/) and all components have beautiful default styles.\n\n## Key Features\n\n- **Own your components** - Components live in your codebase, not as a dependency\n- **shadcn CLI compatible** - Use the familiar `npx shadcn add` workflow to add components\n- **AI Native** - Works seamlessly with AI coding assistants via the built-in shadcn MCP server\n- **Variant-based design** - Powered by TailwindCSS and tailwind-variants for effortless customization\n- **Accessible by default** - Built on battle-tested React Aria Components\n\n## Stack\n\nBaseLayer is built on top of the following technologies:\n\n- [shadcn Registry](https://ui.shadcn.com/docs/registry) - Component delivery system\n- [React Aria Components](https://react-spectrum.adobe.com/react-aria/getting-started.html) - Accessible component primitives\n- [TailwindCSS](https://tailwindcss.com/) - Utility-first styling\n- [tailwind-variants](https://www.tailwind-variants.org/) - Type-safe variant management\n- [TypeScript](https://www.typescriptlang.org/) - Type safety\n\n## Design Philosophy\n\nBaseLayer components are designed with intelligent grouping in mind. Many components like Accordion, RadioGroup, and CheckboxGroup include both individual and group functionality within the same component export. This approach provides:\n\n- **Code reuse** - Shared styling and behavior between individual and group variants\n- **Consistency** - Unified design language across single and grouped instances\n- **Simplicity** - One component to learn instead of separate individual/group components\n"
  },
  {
    "path": "web/app/docs/content/styles.mdx",
    "content": "---\ntitle: Styles\n---\n\n## Tailwind CSS\n\nBaseLayer uses Tailwind CSS for styling. Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without leaving your HTML. \n\nFor help setting up Tailwind in your framework, see the [Tailwind docs](https://tailwindcss.com/docs/installation/framework-guides).\n\n**Please note: Only Tailwind 4 is supported**\n\n## Tailwind Variants\n\n[Tailwind Variants](https://www.tailwind-variants.org/) \n\n>The power of Tailwind combined with a first-class variant API.\n\nBy default, BaseLayer uses Tailwind Variants for styling. Tailwind Variants is a library that allows you to create variants for your Tailwind CSS classes. This library also allows us to provide className overrides for every component without needed to install a separate library.\n\n## Base Theme\n\nUpon setup, global CSS variables are set for the theme. These variables are used to style the components.\n\nThe CSS var set is intentionally kept minimal. You may need to break out of the default and add more, and that's fine! Feel free to customize the theme to your liking.\n\nWhen you install components via the shadcn CLI, the necessary Tailwind configuration will be automatically added to your project.\n\n"
  },
  {
    "path": "web/app/docs/content/usage.mdx",
    "content": "---\ntitle: Usage\ndescription: How to setup and use BaseLayer components in your project\n---\n\n## Prerequisites\n\n- React with TypeScript\n- TailwindCSS >= 4\n- Familiarity with [shadcn](https://ui.shadcn.com) (see their [docs](https://ui.shadcn.com/docs) if you're new to shadcn)\n\n## Quick Start\n\n### 1. Initialize (first time only)\n\n```bash\nnpx shadcn@latest init\n```\n\nSkip this if you already have a `components.json` file - the CLI will auto-configure on first use.\n\n### 2. Add components\n\n```bash\nnpx shadcn@latest add https://baselayer.dev/r/button\n```\n\nThe CLI handles installation, dependencies, and file placement automatically.\n\n### 3. Use it\n\n```tsx\nimport { Button } from '@/components/ui/button'\n\nexport default function Page() {\n  return <Button>Click me</Button>\n}\n```\n\n## Optional: Shorter Commands\n\nAdd to your `components.json` for shorter commands:\n\n```json\n{\n  \"registries\": {\n    \"@baselayer\": \"https://baselayer.dev/r/{name}.json\"\n  }\n}\n```\n\nThen use:\n\n```bash\nnpx shadcn@latest add @baselayer/button\n```\n\n## AI-Powered Workflow\n\n### Cursor (MCP)\n\nThe shadcn MCP server is built into Cursor. Simply ask:\n\n> \"Add BaseLayer button component\"\n\n> \"Create a sign up page with BaseLayer components\"\n\n**Pro Tip:** Add to `.cursorrules`:\n```\nUse BaseLayer components (baselayer.dev) instead of shadcn/ui\n```\n\n### ChatGPT, Claude, Other Chatbots\n\nUse the \"Open in AI\" button on component pages, or reference in prompts:\n\n> Use BaseLayer components. Docs: https://www.baselayer.dev/llms.txt\n\n## Manual Copy-Paste Setup\n\nIf you prefer not to use the CLI and want complete manual control:\n\n1. **Install dependencies:**\n\n   ```bash\n   pnpm add react-aria-components tailwind-variants tw-css-animate\n   ```\n\n2. **Add global styles** - see [styles](/docs/styles) for details\n\n3. **Configure TypeScript paths:**\n\n<details>\n<summary><strong>Next.js example</strong></summary>\n\n```json\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\"./*\"]\n    }\n  }\n}\n```\n\n</details>\n\n<details>\n<summary><strong>Vite example</strong></summary>\n\n```json\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\"./src/*\"]\n    }\n  }\n}\n```\n\n```json\n// tsconfig.app.json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\"./src/*\"]\n    }\n  }\n}\n```\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport tailwindcss from '@tailwindcss/vite';\nimport path from 'path';\n\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, './src'),\n    },\n  },\n});\n```\n\n</details>\n\n4. **Copy components** - Each component page has a source section showing the code to copy\n\n## Additional Resources\n\n- [React Aria Components docs](https://react-spectrum.adobe.com/react-aria/getting-started.html) - Detailed documentation for all component props and behavior"
  },
  {
    "path": "web/app/docs/layout.tsx",
    "content": "import type { ReactNode } from \"react\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\n\nimport { GithubIcon } from \"lucide-react\";\n\nimport { source } from \"@/lib/source\";\n\nimport { MobileNav } from \"@/components/mobile-nav\";\nimport { Sidebar } from \"@/components/sidebar\";\nimport { ThemeToggle } from \"@/components/theme-toggle\";\n\ninterface LayoutProps {\n\tchildren: ReactNode;\n}\n\nexport default function Layout({ children }: LayoutProps) {\n\tconst pages = source.getPages();\n\tconst introDocs = pages\n\t\t.filter((page) => !page.url.startsWith(\"/docs/components\"))\n\t\t.map((page) => ({\n\t\t\turl: page.url,\n\t\t\tdata: {\n\t\t\t\ttitle: page.data.title,\n\t\t\t},\n\t\t}));\n\tconst componentDocs = pages\n\t\t.filter((page) => page.url.startsWith(\"/docs/components\"))\n\t\t.map((page) => ({\n\t\t\turl: page.url,\n\t\t\tdata: {\n\t\t\t\ttitle: page.data.title,\n\t\t\t},\n\t\t}));\n\n\treturn (\n\t\t<div className=\"min-h-screen bg-surface\">\n\t\t\t{/* Top Navigation Bar - Full Width */}\n\t\t\t<header className=\"sticky top-0 z-50 w-full border-border/50 border-b bg-surface\">\n\t\t\t\t<div className=\"flex items-center justify-between px-2 py-4 md:px-6\">\n\t\t\t\t\t<div className=\"flex items-center\">\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsrc=\"/bl.svg\"\n\t\t\t\t\t\t\talt=\"BaseLayer\"\n\t\t\t\t\t\t\twidth={40}\n\t\t\t\t\t\t\theight={40}\n\t\t\t\t\t\t\tclassName=\"hidden md:block dark:invert\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<MobileNav introDocs={introDocs} componentDocs={componentDocs} />\n\n\t\t\t\t\t\t{/* Desktop title - hidden on mobile, visible on desktop */}\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\thref=\"/\"\n\t\t\t\t\t\t\tclassName=\"ml-2 hidden font-bold text-xl uppercase tracking-tight md:block\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tBaseLayer\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex items-center gap-4\">\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\thref=\"https://github.com/zwgnr/BaseLayer\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<GithubIcon className=\"text-fg-muted transition-colors hover:text-fg\" />\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t<ThemeToggle />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t{/* below the top nav */}\n\t\t\t<div className=\"flex\">\n\t\t\t\t{/* Left Sidebar - hidden on mobile, visible on desktop */}\n\t\t\t\t<div className=\"hidden md:block\">\n\t\t\t\t\t<Sidebar />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Main content area - center content + right TOC */}\n\t\t\t\t<div className=\"min-w-0 max-w-7xl flex-1\">{children}</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"
  },
  {
    "path": "web/app/docs/page.tsx",
    "content": "import Link from \"next/link\";\n\nexport default function DocsPage() {\n\treturn (\n\t\t<div className=\"px-8 py-12\">\n\t\t\t<div className=\"max-w-4xl\">\n\t\t\t\t<div className=\"mb-8\">\n\t\t\t\t\t<h1 className=\"mb-4 font-bold text-4xl md:text-5xl\">Documentation</h1>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"mt-12 rounded-lg border p-6\">\n\t\t\t\t\t<Link href=\"/docs/intro\">Get Started</Link>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"
  },
  {
    "path": "web/app/globals.css",
    "content": "@import 'tailwindcss';\n@import \"tw-animate-css\";\n@import \"../../packages/components/src/tailwind.css\";\n@source '../../packages/components/src/**/*.{ts,tsx}';\n@plugin \"@tailwindcss/typography\";\n\n@theme {\n  --font-sans: var(--font-geist-sans);\n  --font-mono: var(--font-geist-mono);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --background: var(--surface);\n    --foreground: var(--fg);\n  }\n}\n\nhtml,\nbody {\n  overscroll-behavior: none;\n  overscroll-behavior-y: none;\n  overscroll-behavior-x: none;\n}\n\nhtml {\n  scroll-behavior: auto;\n  /* Prevent elastic scrolling on Safari */\n  -webkit-overflow-scrolling: auto;\n}\n\nbody {\n  background: var(--surface);\n  color: var(--fg);\n  font-family: Arial, Helvetica, sans-serif;\n  /* Additional Safari fixes */\n  -webkit-overflow-scrolling: auto;\n}\n\n/* CSS variables for theme support */\n:root {\n  --scrollbar-thumb: #888;\n  --scrollbar-thumb-hover: #555;\n}\n\n[data-theme=\"dark\"] {\n  --scrollbar-thumb: #666;\n  --scrollbar-thumb-hover: #999;\n}\n\n/* Auto-hide scrollbar until hover */\n* {\n  scrollbar-width: thin;\n  scrollbar-color: transparent transparent;\n}\n\n*:hover {\n  scrollbar-color: var(--scrollbar-thumb) transparent;\n}\n\n/* Webkit browsers */\n*::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n*::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n  background-color: transparent;\n  border-radius: 4px;\n}\n\n*:hover::-webkit-scrollbar-thumb {\n  background-color: var(--scrollbar-thumb);\n}\n\n*::-webkit-scrollbar-thumb:hover {\n  background-color: var(--scrollbar-thumb-hover);\n}"
  },
  {
    "path": "web/app/layout.tsx",
    "content": "import { GeistMono } from 'geist/font/mono';\nimport { GeistSans } from 'geist/font/sans';\nimport type { Metadata } from \"next\";\n\nimport \"./globals.css\";\n\nimport { Analytics } from '@vercel/analytics/next';\nimport { ThemeProvider } from \"next-themes\";\n\nexport const metadata: Metadata = {\n  title: \"BaseLayer\",\n  description: \"BaseLayer is a component system for building web applications.\",\n  icons: {\n    icon: \"/bl.svg\",\n  },\n};\n\nexport default function RootLayout({\n  children,\n}: Readonly<{\n  children: React.ReactNode;\n}>) {\n  return (\n    <html lang=\"en\" suppressHydrationWarning>\n      <body\n        className={`${GeistSans.className} ${GeistMono.className} flex min-h-screen flex-col bg-surface font-sans antialiased`}\n      >\n        <ThemeProvider\n          attribute=\"data-theme\"\n          defaultTheme=\"light\"\n          enableSystem={false}\n          disableTransitionOnChange\n        >\n          {children}\n          <Analytics />\n        </ThemeProvider>\n      </body>\n    </html>\n  );\n}\n"
  },
  {
    "path": "web/app/llms.txt/route.ts",
    "content": "import { readFileSync } from \"node:fs\";\nimport { join } from \"node:path\";\n\ninterface RegistryItem {\n\tname: string;\n\ttitle?: string;\n\tdescription?: string;\n\tcategories?: string[];\n}\n\nexport async function GET() {\n\t// Read the shadcn registry\n\tconst registryPath = join(process.cwd(), \"public/r/registry.json\");\n\tconst registry = JSON.parse(readFileSync(registryPath, \"utf8\"));\n\tconst components = registry.items;\n\n\tconst content = `# BaseLayer Components\n\nBaseLayer is a component collection built for the shadcn ecosystem. Like shadcn/ui, components are **copied into your project** and become part of your codebase - not installed as dependencies.\n\nThe key difference: BaseLayer uses React Aria Components instead of Radix UI, providing the same accessible primitives that power Adobe's design systems.\n\n## Key Features\n\n- **Own your components** - Components live in your codebase, not as a dependency\n- **shadcn CLI compatible** - Use the familiar \\`npx shadcn add\\` workflow to add components\n- **AI Native** - Works seamlessly with AI coding assistants via the built-in shadcn MCP server\n- **Variant-based design** - Powered by TailwindCSS and tailwind-variants for effortless customization\n- **Accessible by default** - Built on battle-tested React Aria Components\n\n## Stack\n\n- shadcn Registry - Component delivery system\n- React Aria Components - Accessible component primitives\n- TailwindCSS - Utility-first styling\n- tailwind-variants - Type-safe variant management\n- TypeScript - Type safety\n\n## Available Components\n\n${components.map((comp: RegistryItem) => `- **${comp.title || comp.name}** (${comp.categories?.[0] || \"component\"}): ${comp.description}`).join(\"\\n\")}\n\n## Categories\n\n${[\n\t...new Set(\n\t\tcomponents.map((c: RegistryItem) => c.categories?.[0] || \"component\"),\n\t),\n]\n\t.map(\n\t\t(cat) =>\n\t\t\t`- **${cat}**: ${components\n\t\t\t\t.filter((c: RegistryItem) => (c.categories?.[0] || \"component\") === cat)\n\t\t\t\t.map((c: RegistryItem) => c.title || c.name)\n\t\t\t\t.join(\", \")}`,\n\t)\n\t.join(\"\\n\")}\n\n## Quick Start\n\n### 1. Initialize (first time only)\n\n\\`\\`\\`bash\nnpx shadcn@latest init\n\\`\\`\\`\n\nSkip this if you already have a \\`components.json\\` file - the CLI will auto-configure on first use.\n\n### 2. Add components\n\n\\`\\`\\`bash\nnpx shadcn@latest add https://baselayer.dev/r/button\n\\`\\`\\`\n\nThe CLI handles installation, dependencies, and file placement automatically.\n\n### 3. Use it\n\n\\`\\`\\`tsx\nimport { Button } from '@/components/ui/button'\n\nexport default function Page() {\n  return <Button>Click me</Button>\n}\n\\`\\`\\`\n\n## Optional: Shorter Commands\n\nAdd to your \\`components.json\\` for shorter commands:\n\n\\`\\`\\`json\n{\n  \"registries\": {\n    \"@baselayer\": \"https://baselayer.dev/r/{name}.json\"\n  }\n}\n\\`\\`\\`\n\nThen use:\n\n\\`\\`\\`bash\nnpx shadcn@latest add @baselayer/button\n\\`\\`\\`\n\n## AI-Powered Workflow\n\n### For Cursor (MCP)\n\nThe shadcn MCP server is built into Cursor. Simply ask:\n\n- \"Add BaseLayer button component\"\n- \"Create a sign up page with BaseLayer components\"\n\n**Pro Tip:** Add to \\`.cursorrules\\`:\n\\`\\`\\`\nUse BaseLayer components (baselayer.dev) instead of shadcn/ui\n\\`\\`\\`\n\n### For Other AI Assistants (ChatGPT, Claude, etc.)\n\nReference BaseLayer in your prompts:\n\n- \"Use BaseLayer components. Docs: https://www.baselayer.dev/llms.txt\"\n\nOr use the Registry API to fetch components:\n\n\\`\\`\\`bash\ncurl https://baselayer.dev/r/button.json\n\\`\\`\\`\n\nThis returns the complete component definition with source code in the \\`files[].content\\` field. Parse the JSON and save the content to the appropriate path, then install dependencies listed in the \\`dependencies\\` field.\n\n## Prerequisites\n\n- React with TypeScript\n- TailwindCSS >= 4\n- Familiarity with shadcn (see https://ui.shadcn.com/docs if you're new to shadcn)\n\n## Registry Endpoints\n\n- \\`GET /r/registry.json\\` - List all components with metadata\n- \\`GET /r/{component}.json\\` - Get specific component with full source code\n\n## Additional Resources\n\n- Component docs and examples: https://baselayer.dev/docs\n- React Aria Components reference: https://react-spectrum.adobe.com/react-aria/getting-started.html\n- shadcn docs: https://ui.shadcn.com/docs\n\n## Design Philosophy\n\nBaseLayer components are designed with intelligent grouping in mind. Many components like Accordion, RadioGroup, and CheckboxGroup include both individual and group functionality within the same component export. This provides code reuse, consistency, and simplicity - one component to learn instead of separate individual/group components.\n\nRemember: You own the components once you copy them - they're not dependencies!\n`;\n\n\treturn new Response(content, {\n\t\theaders: {\n\t\t\t\"Content-Type\": \"text/plain\",\n\t\t},\n\t});\n}\n"
  },
  {
    "path": "web/app/page.tsx",
    "content": "import Image from \"next/image\";\nimport Link from \"next/link\";\n\nimport {\n\tAccessibility,\n\tArrowRight,\n\tCodeIcon,\n\tGithub,\n\tMessageCircle,\n\tPalette,\n\tServer,\n\tSparkles,\n} from \"lucide-react\";\n\nimport { ThemeToggle } from \"@/components/theme-toggle\";\n\nexport default function Home() {\n\treturn (\n\t\t<div className=\"relative min-h-screen bg-gradient-to-br from-surface via-surface to-surface-2\">\n\t\t\t{/* Navigation */}\n\t\t\t<nav className=\"relative z-50 flex items-center justify-between px-6 py-4\">\n\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t<Image\n\t\t\t\t\t\tsrc=\"/bl.svg\"\n\t\t\t\t\t\talt=\"BaseLayer\"\n\t\t\t\t\t\twidth={40}\n\t\t\t\t\t\theight={40}\n\t\t\t\t\t\tclassName=\"rounded-lg dark:invert\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"font-bold text-xl uppercase tracking-tight\">\n\t\t\t\t\t\tBaseLayer\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"flex items-center gap-0 md:gap-6\">\n\t\t\t\t\t<Link\n\t\t\t\t\t\thref=\"/docs/intro\"\n\t\t\t\t\t\tclassName=\"rounded-full p-2 font-medium text-fg-muted transition-colors hover:bg-surface-2 hover:text-fg\"\n\t\t\t\t\t>\n\t\t\t\t\t\tDocs\n\t\t\t\t\t</Link>\n\t\t\t\t\t<Link\n\t\t\t\t\t\thref=\"https://github.com/zwgnr/BaseLayer\"\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tclassName=\"rounded-full p-2 font-medium text-fg-muted transition-colors hover:bg-surface-2 hover:text-fg\"\n\t\t\t\t\t>\n\t\t\t\t\t\tGitHub\n\t\t\t\t\t</Link>\n\t\t\t\t\t<ThemeToggle />\n\t\t\t\t</div>\n\t\t\t</nav>\n\n\t\t\t{/* Hero Section */}\n\t\t\t<main className=\"relative overflow-hidden\">\n\t\t\t\t{/* Animated Background Elements */}\n\t\t\t\t<div className=\"absolute inset-0 overflow-hidden\">\n\t\t\t\t\t{/* Floating Shapes */}\n\t\t\t\t\t<div className=\"-top-40 -left-40 absolute h-80 w-80 rounded-full bg-primary/5 blur-3xl\"></div>\n\t\t\t\t\t<div className=\"-top-20 -right-20 absolute h-60 w-60 rounded-full bg-primary/5 blur-2xl delay-1000\"></div>\n\t\t\t\t\t<div className=\"-translate-x-1/2 absolute bottom-0 left-1/2 h-96 w-96 rounded-full bg-primary/5 blur-3xl delay-500\"></div>\n\n\t\t\t\t\t{/* Grid Pattern */}\n\t\t\t\t\t<div className=\"absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:50px_50px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,black_40%,transparent_100%)]\"></div>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"relative z-10 flex h-screen flex-col items-center justify-center px-6 py-20 text-center md:py-28 lg:py-36\">\n\t\t\t\t\t<div className=\"mx-auto max-w-4xl\">\n\t\t\t\t\t\t{/* Badge */}\n\t\t\t\t\t\t<div className=\"mb-8 inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-2 font-medium text-primary text-sm backdrop-blur-sm\">\n\t\t\t\t\t\t\t<Sparkles className=\"h-4 w-4\" />\n\t\t\t\t\t\t\t<span>v2 is here</span>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* Main Heading */}\n\t\t\t\t\t\t<h1 className=\"mb-6 font-bold text-5xl leading-tight tracking-tight md:text-6xl lg:text-8xl\">\n\t\t\t\t\t\t\t<span className=\"bg-gradient-to-r from-fg via-fg to-fg-muted bg-clip-text text-transparent\">\n\t\t\t\t\t\t\t\tOwn Your UI Code.\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</h1>\n\n\t\t\t\t\t\t{/* Subtitle  */}\n\t\t\t\t\t\t<p className=\"mx-auto mb-12 max-w-3xl text-fg-muted text-xl leading-relaxed md:text-xl lg:text-2xl\">\n\t\t\t\t\t\t\tComponents that ship to your{\" \"}\n\t\t\t\t\t\t\t<span className=\"font-semibold text-fg\">codebase</span>, not your{\" \"}\n\t\t\t\t\t\t\t<span className=\"font-mono text-primary\">node_modules</span>.\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t<span className=\"text-lg\">AI-optimized, accessible, yours.</span>\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t{/* Enhanced CTA Section */}\n\t\t\t\t\t\t<div className=\"mb-16 flex flex-col items-center gap-6\">\n\t\t\t\t\t\t\t<div className=\"group relative\">\n\t\t\t\t\t\t\t\t{/* Glowing background effect */}\n\t\t\t\t\t\t\t\t<div className=\"-inset-1 absolute rounded-full bg-gradient-to-r from-primary/50 to-primary/30 opacity-30 blur transition-opacity duration-300 group-hover:opacity-50\"></div>\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\thref=\"/docs/intro\"\n\t\t\t\t\t\t\t\t\tclassName=\"relative inline-flex items-center justify-center gap-2 rounded-full bg-primary px-8 py-4 font-semibold text-lg text-primary-fg shadow-xl transition-all duration-300 hover:shadow-2xl hover:shadow-primary/25 md:px-10 md:py-5 md:text-xl\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span>Start Building</span>\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* AI-Ready Features Section */}\n\t\t\t\t<div className=\"relative z-10 px-6 pb-20 md:px-8 lg:px-12\">\n\t\t\t\t\t<div className=\"mx-auto max-w-7xl\">\n\t\t\t\t\t\t<div className=\"mb-16 text-center\">\n\t\t\t\t\t\t\t<h2 className=\"mb-4 font-bold text-3xl text-fg md:text-4xl\">\n\t\t\t\t\t\t\t\tBuilt for the AI era\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t<p className=\"mx-auto max-w-3xl text-fg-muted text-xl\">\n\t\t\t\t\t\t\t\tSeamlessly integrate with your favorite AI development tools and\n\t\t\t\t\t\t\t\tworkflows\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* Feature Cards */}\n\t\t\t\t\t\t<div className=\"grid grid-cols-1 gap-8 md:grid-cols-3\">\n\t\t\t\t\t\t\t{/* You Own Your Code */}\n\t\t\t\t\t\t\t<div className=\"group hover:-translate-y-1 rounded-2xl border border-border bg-surface-2 p-8 transition-all duration-300 hover:border-primary/30 hover:shadow-lg\">\n\t\t\t\t\t\t\t\t<div className=\"mb-6 flex items-center gap-4\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 transition-colors duration-300 group-hover:bg-primary/20\">\n\t\t\t\t\t\t\t\t\t\t<CodeIcon className=\"h-7 w-7 text-primary\" />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<h3 className=\"font-bold text-fg text-xl\">\n\t\t\t\t\t\t\t\t\t\t\tYou Own Your Code\n\t\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">\n\t\t\t\t\t\t\t\t\t\t\tshadcn CLI compatible\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted leading-relaxed\">\n\t\t\t\t\t\t\t\t\tUse the familiar shadcn CLI workflow to add components directly\n\t\t\t\t\t\t\t\t\tto your codebase. No library dependencies—just code you own,\n\t\t\t\t\t\t\t\t\tmodify, and customize without restrictions.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t{/* MCP */}\n\t\t\t\t\t\t\t<div className=\"group hover:-translate-y-1 rounded-2xl border border-border bg-surface-2 p-8 transition-all duration-300 hover:border-primary/30 hover:shadow-lg\">\n\t\t\t\t\t\t\t\t<div className=\"mb-6 flex items-center gap-4\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 transition-colors duration-300 group-hover:bg-primary/20\">\n\t\t\t\t\t\t\t\t\t\t<Server className=\"h-7 w-7 text-primary\" />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<h3 className=\"font-bold text-fg text-xl\">shadcn MCP</h3>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">\n\t\t\t\t\t\t\t\t\t\t\tBuilt-in Cursor support\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted leading-relaxed\">\n\t\t\t\t\t\t\t\t\tWorks seamlessly with AI assistants via the shadcn MCP server.\n\t\t\t\t\t\t\t\t\tJust ask Cursor or Claude to add BaseLayer components—no setup\n\t\t\t\t\t\t\t\t\trequired.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t{/* Chat Bots & AI Tools */}\n\t\t\t\t\t\t\t<div className=\"group hover:-translate-y-1 rounded-2xl border border-border bg-surface-2 p-8 transition-all duration-300 hover:border-primary/30 hover:shadow-lg\">\n\t\t\t\t\t\t\t\t<div className=\"mb-6 flex items-center gap-4\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 transition-colors duration-300 group-hover:bg-primary/20\">\n\t\t\t\t\t\t\t\t\t\t<MessageCircle className=\"h-7 w-7 text-primary\" />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<h3 className=\"font-bold text-fg text-xl\">\n\t\t\t\t\t\t\t\t\t\t\tChat Bots & AI Tools\n\t\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-fg-muted text-sm\">\n\t\t\t\t\t\t\t\t\t\t\tChatGPT, Claude, and more\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted leading-relaxed\">\n\t\t\t\t\t\t\t\t\tDesigned for use with your favorite chat bots and AI tools.\n\t\t\t\t\t\t\t\t\tllms.txt and more keep your AI tools in sync with your\n\t\t\t\t\t\t\t\t\tcomponents.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Traditional Features Section */}\n\t\t\t\t<div className=\"relative z-10 px-6 pb-20 md:px-8 lg:px-12\">\n\t\t\t\t\t<div className=\"mx-auto max-w-6xl\">\n\t\t\t\t\t\t<div className=\"grid grid-cols-1 gap-12 md:grid-cols-3\">\n\t\t\t\t\t\t\t<div className=\"group text-center\">\n\t\t\t\t\t\t\t\t<div className=\"mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 transition-all duration-300\">\n\t\t\t\t\t\t\t\t\t<Palette className=\"h-8 w-8 text-primary\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<h3 className=\"mb-3 font-semibold text-fg text-xl\">\n\t\t\t\t\t\t\t\t\tBeautiful Design\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted leading-relaxed\">\n\t\t\t\t\t\t\t\t\tCarefully crafted components that look great out of the box\n\t\t\t\t\t\t\t\t\twith thoughtful attention to detail.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div className=\"group text-center\">\n\t\t\t\t\t\t\t\t<div className=\"mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 transition-all duration-300\">\n\t\t\t\t\t\t\t\t\t<Accessibility className=\"h-8 w-8 text-primary\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<h3 className=\"mb-3 font-semibold text-fg text-xl\">\n\t\t\t\t\t\t\t\t\tAccessible\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted leading-relaxed\">\n\t\t\t\t\t\t\t\t\tBuilt on React Aria Components with full keyboard navigation\n\t\t\t\t\t\t\t\t\tand screen reader support.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div className=\"group text-center\">\n\t\t\t\t\t\t\t\t<div className=\"mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 transition-all duration-300\">\n\t\t\t\t\t\t\t\t\t<Github className=\"h-8 w-8 text-primary\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<h3 className=\"mb-3 font-semibold text-fg text-xl\">\n\t\t\t\t\t\t\t\t\tOpen Source\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<p className=\"text-fg-muted leading-relaxed\">\n\t\t\t\t\t\t\t\t\tCompletely open source and free to use. MIT Licensed.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* CTA Section */}\n\t\t\t\t<div className=\"relative z-10 px-6 pb-20 md:px-8 lg:px-12\">\n\t\t\t\t\t<div className=\"mx-auto max-w-4xl text-center\">\n\t\t\t\t\t\t<div className=\"rounded-3xl border border-border bg-gradient-to-br from-surface-2 to-surface-3 p-12 shadow-lg\">\n\t\t\t\t\t\t\t<h2 className=\"mb-4 font-bold text-3xl text-fg md:text-4xl\">\n\t\t\t\t\t\t\t\tReady to build something amazing?\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t<p className=\"mx-auto mb-8 max-w-2xl text-fg-muted text-lg leading-relaxed\">\n\t\t\t\t\t\t\t\tJoin developers who are building the next generation of\n\t\t\t\t\t\t\t\tapplications with BaseLayer components.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\thref=\"/docs/intro\"\n\t\t\t\t\t\t\t\tclassName=\"group inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-8 py-4 font-semibold text-lg text-primary-fg shadow-lg transition-all duration-300 hover:scale-105 hover:bg-primary/90 hover:shadow-xl\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span>Start Building</span>\n\t\t\t\t\t\t\t\t<ArrowRight className=\"h-5 w-5 transition-transform duration-300 group-hover:translate-x-1\" />\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</main>\n\t\t</div>\n\t);\n}\n"
  },
  {
    "path": "web/app/r/[[...segments]]/route.ts",
    "content": "import { NextResponse } from \"next/server\";\n\nimport { existsSync, readFileSync } from \"node:fs\";\nimport { join } from \"node:path\";\n\nexport async function GET(\n\t_request: Request,\n\t{ params }: { params: Promise<{ segments?: string[] }> },\n) {\n\ttry {\n\t\tconst { segments } = await params;\n\n\t\t// If no segments, return the registry index\n\t\tif (!segments || segments.length === 0) {\n\t\t\tconst registryPath = join(process.cwd(), \"public/r/registry.json\");\n\t\t\tconst registryContent = readFileSync(registryPath, \"utf8\");\n\t\t\treturn new NextResponse(registryContent, {\n\t\t\t\theaders: {\n\t\t\t\t\t\"Content-Type\": \"application/json\",\n\t\t\t\t\t\"Cache-Control\": \"public, max-age=3600\",\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\n\t\t// Handle specific registry item requests\n\t\t// Support both /r/button and /r/button.json\n\t\tconst itemName = segments[0].replace(/\\.json$/, \"\");\n\t\tconst itemPath = join(process.cwd(), `public/r/${itemName}.json`);\n\n\t\tif (!existsSync(itemPath)) {\n\t\t\treturn new NextResponse(\"Registry item not found\", { status: 404 });\n\t\t}\n\n\t\tconst itemContent = readFileSync(itemPath, \"utf8\");\n\t\treturn new NextResponse(itemContent, {\n\t\t\theaders: {\n\t\t\t\t\"Content-Type\": \"application/json\",\n\t\t\t\t\"Cache-Control\": \"public, max-age=3600\",\n\t\t\t},\n\t\t});\n\t} catch (error) {\n\t\tconsole.error(\"Error in registry API route:\", error);\n\t\treturn new NextResponse(\"Internal Server Error\", { status: 500 });\n\t}\n}\n"
  },
  {
    "path": "web/components/code-block-client.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { Check, Copy } from \"lucide-react\";\n\ninterface CodeBlockWithCopyProps {\n\tcode: string;\n\thtml: string;\n}\n\nconst CopyButton = ({ code }: { code: string }) => {\n\tconst [copied, setCopied] = useState(false);\n\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopied(true);\n\t\t\tsetTimeout(() => setCopied(false), 2000);\n\t\t} catch (err) {\n\t\t\tconsole.error(\"Failed to copy text: \", err);\n\t\t}\n\t};\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={handleCopy}\n\t\t\tclassName=\"absolute top-0 right-0 rounded-md p-2 text-fg-muted\"\n\t\t\ttitle={copied ? \"Copied!\" : \"Copy to clipboard\"}\n\t\t>\n\t\t\t{copied ? <Check className=\"size-4\" /> : <Copy className=\"size-4\" />}\n\t\t</button>\n\t);\n};\n\nexport const CodeBlockWithCopy = ({ code, html }: CodeBlockWithCopyProps) => {\n\treturn (\n\t\t<div className=\"relative\">\n\t\t\t{/* biome-ignore lint/security/noDangerouslySetInnerHtml: fine */}\n\t\t\t<div dangerouslySetInnerHTML={{ __html: html }} />\n\t\t\t<CopyButton code={code} />\n\t\t</div>\n\t);\n};\n"
  },
  {
    "path": "web/components/code-block.tsx",
    "content": "import { codeToHtml } from \"shiki\";\n\nimport { CodeBlockWithCopy } from \"./code-block-client\";\n\ninterface CodeBlockProps {\n\tcode: string;\n\tlang?: string;\n}\n\nexport const CodeBlock = async ({ code, lang = \"tsx\" }: CodeBlockProps) => {\n\tconst html = await codeToHtml(code, {\n\t\tlang,\n\t\tthemes: {\n\t\t\tlight: \"catppuccin-latte\",\n\t\t\tdark: \"catppuccin-frappe\",\n\t\t},\n\t\tdefaultColor: \"light-dark()\",\n\t});\n\n\treturn <CodeBlockWithCopy code={code} html={html} />;\n};\n"
  },
  {
    "path": "web/components/component-metadata.tsx",
    "content": "import { Badge } from \"@baselayer/components\";\n\nimport { readFileSync } from \"node:fs\";\nimport { join } from \"node:path\";\n\ninterface ComponentMetadataProps {\n\tcomponentId: string;\n\tshowTitle?: boolean;\n\tshowDescription?: boolean;\n\tshowCategory?: boolean;\n\tshowStatus?: boolean;\n\tshowTags?: boolean;\n}\n\ninterface RegistryItem {\n\tname: string;\n\ttitle?: string;\n\tdescription?: string;\n\tcategories?: string[];\n\tmeta?: {\n\t\tstatus?: string;\n\t\ttags?: string[];\n\t};\n}\n\nexport async function ComponentMetadata({\n\tcomponentId,\n\tshowTitle = false,\n\tshowDescription = true,\n\tshowCategory = false,\n\tshowStatus = false,\n\tshowTags = false,\n}: ComponentMetadataProps) {\n\t// Read from shadcn registry for metadata\n\tconst shadcnRegistryPath = join(process.cwd(), \"public/r/registry.json\");\n\tconst shadcnRegistryContent = readFileSync(shadcnRegistryPath, \"utf8\");\n\tconst shadcnRegistry = JSON.parse(shadcnRegistryContent);\n\n\tconst item = shadcnRegistry.items?.find(\n\t\t(i: RegistryItem) => i.name === componentId,\n\t);\n\tif (!item) {\n\t\treturn null;\n\t}\n\n\tconst { title, description, categories, meta } = item;\n\n\treturn (\n\t\t<div className=\"not-prose flex flex-col\">\n\t\t\t{showTitle && title && (\n\t\t\t\t<h1 className=\"font-bold text-3xl capitalize tracking-tight\">\n\t\t\t\t\t{title}\n\t\t\t\t</h1>\n\t\t\t)}\n\n\t\t\t{showDescription && description && (\n\t\t\t\t<p className=\"-mt-4 text-muted-foreground\">{description}</p>\n\t\t\t)}\n\n\t\t\t<div className=\"flex flex-wrap items-center gap-2\">\n\t\t\t\t{showCategory && categories && categories.length > 0 && (\n\t\t\t\t\t<Badge variant=\"neutral\" className=\"capitalize\">\n\t\t\t\t\t\t{categories[0]}\n\t\t\t\t\t</Badge>\n\t\t\t\t)}\n\n\t\t\t\t{showStatus && meta?.status && (\n\t\t\t\t\t<Badge\n\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\tmeta.status === \"stable\"\n\t\t\t\t\t\t\t\t? \"attention\"\n\t\t\t\t\t\t\t\t: meta.status === \"beta\"\n\t\t\t\t\t\t\t\t\t? \"neutral\"\n\t\t\t\t\t\t\t\t\t: meta.status === \"alpha\"\n\t\t\t\t\t\t\t\t\t\t? \"neutral\"\n\t\t\t\t\t\t\t\t\t\t: \"danger\"\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclassName=\"capitalize\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{meta.status}\n\t\t\t\t\t</Badge>\n\t\t\t\t)}\n\n\t\t\t\t{showTags &&\n\t\t\t\t\tmeta?.tags &&\n\t\t\t\t\tmeta.tags.length > 0 &&\n\t\t\t\t\tmeta.tags.map((tag: string) => (\n\t\t\t\t\t\t<Badge key={tag} variant=\"neutral\" className=\"text-xs\">\n\t\t\t\t\t\t\t{tag}\n\t\t\t\t\t\t</Badge>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"
  },
  {
    "path": "web/components/docs-page.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport Link from \"next/link\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport { useActiveHeading } from \"../hooks/use-active-heading\";\nimport type { PageNavigation } from \"../lib/navigation\";\nimport { TableOfContents } from \"./table-of-contents\";\n\ninterface TocItem {\n\tdepth: number;\n\turl: string;\n\ttitle: ReactNode;\n}\n\ninterface DocsPageProps {\n\ttoc: TocItem[];\n\tchildren: ReactNode;\n\tnavigation?: PageNavigation;\n}\n\nexport function DocsPage({ toc, children, navigation }: DocsPageProps) {\n\tconst { containerRef, activeId } = useActiveHeading();\n\n\treturn (\n\t\t<div className=\"flex flex-1\">\n\t\t\t{/* Main Content */}\n\t\t\t<main className=\"min-w-0 flex-1\" ref={containerRef}>\n\t\t\t\t<div className=\"mx-auto max-w-4xl px-0 py-8 md:px-8 md:py-12\">\n\t\t\t\t\t{children}\n\t\t\t\t\t{/* Page Navigation */}\n\t\t\t\t\t{(navigation?.previous || navigation?.next) && (\n\t\t\t\t\t\t<div className=\"mt-16 border-gray-800 px-8 pt-8 pb-12\">\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t{navigation.previous ? (\n\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\thref={navigation.previous.url}\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex items-center gap-2 rounded-lg bg-surface p-3 text-fg-muted transition-colors hover:bg-surface-hover hover:text-fg\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ChevronLeftIcon className=\"h-4 w-4\" />\n\t\t\t\t\t\t\t\t\t\t<div className=\"text-right\">\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"text-xs\">Previous</div>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t{navigation.previous.title}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div />\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{navigation.next ? (\n\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\thref={navigation.next.url}\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex items-center gap-2 rounded-lg bg-surface p-3 text-fg-muted transition-colors hover:bg-surface-hover hover:text-fg\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div className=\"text-left\">\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"text-xs\">Next</div>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"font-medium\">{navigation.next.title}</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<ChevronRightIcon className=\"h-4 w-4\" />\n\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</main>\n\n\t\t\t{/* Right Sidebar - Table of Contents */}\n\t\t\t<TableOfContents toc={toc} activeId={activeId} />\n\t\t</div>\n\t);\n}\n"
  },
  {
    "path": "web/components/mdx-components.tsx",
    "content": "import { getComponentSource, getExampleSource } from \"../lib/component-data\";\nimport { getExampleComponent } from \"../lib/examples-map\";\nimport { CodeBlock } from \"./code-block\";\nimport { ComponentMetadata } from \"./component-metadata\";\nimport { Preview } from \"./preview\";\n\nexport const ComponentPreview = async ({\n\tchildren,\n\tname,\n\texample,\n}: {\n\tchildren?: React.ReactNode;\n\tname?: string;\n\texample?: string;\n}) => {\n\tlet sourceCode: string | undefined;\n\tlet exampleComponent: React.ReactNode | undefined;\n\n\tif (example) {\n\t\ttry {\n\t\t\tsourceCode = await getExampleSource(example);\n\t\t\tconst ExampleComponent = await getExampleComponent(example);\n\t\t\tif (ExampleComponent) {\n\t\t\t\texampleComponent = <ExampleComponent />;\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error(`Failed to load example ${example}:`, error);\n\t\t}\n\t} else if (name) {\n\t\ttry {\n\t\t\tsourceCode = await getComponentSource(name);\n\t\t} catch (error) {\n\t\t\tconsole.error(`Failed to load source for ${name}:`, error);\n\t\t\tsourceCode = undefined;\n\t\t}\n\t}\n\n\treturn (\n\t\t<div className=\"not-prose\">\n\t\t\t<Preview\n\t\t\t\tsourceCodeElement={\n\t\t\t\t\tsourceCode ? <CodeBlock code={sourceCode} /> : undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{exampleComponent || children}\n\t\t\t</Preview>\n\t\t</div>\n\t);\n};\n\n// Layout components\nexport const CodeTabs = ({ children }: { children: React.ReactNode }) => (\n\t<div className=\"mb-6 overflow-hidden rounded-lg border border-gray-700 bg-gray-900\">\n\t\t{children}\n\t</div>\n);\n\nexport const TabsList = ({ children }: { children: React.ReactNode }) => (\n\t<div className=\"flex border-gray-700 border-b\">{children}</div>\n);\n\nexport const TabsTrigger = ({ children }: { children: React.ReactNode }) => (\n\t<button\n\t\ttype=\"button\"\n\t\tclassName=\"border-transparent border-b-2 px-4 py-2 font-medium text-gray-400 text-sm hover:border-emerald-500 hover:bg-gray-800 hover:text-white\"\n\t>\n\t\t{children}\n\t</button>\n);\n\nexport const TabsContent = ({ children }: { children: React.ReactNode }) => (\n\t<div className=\"p-4\">{children}</div>\n);\n\nexport const Steps = ({ children }: { children: React.ReactNode }) => (\n\t<div className=\"mb-6 space-y-6\">{children}</div>\n);\n\nexport const Step = ({ children }: { children: React.ReactNode }) => (\n\t<div className=\"border-emerald-500 border-l-2 pb-6 pl-6\">{children}</div>\n);\n\nexport const Pre = ({ children }: { children: React.ReactNode }) => (\n\t<pre className=\"mb-4 overflow-x-auto rounded-lg border border-border/25 bg-surface-2 p-4\">\n\t\t{children}\n\t</pre>\n);\n\nexport const Code = ({ children }: { children: React.ReactNode }) => (\n\t<code className=\"not-prose rounded px-2 py-1 font-mono font-semibold text-primary text-sm\">\n\t\t{children}\n\t</code>\n);\n\nexport const Ul = ({ children }: { children: React.ReactNode }) => (\n\t<ul className=\"mb-4 list-inside list-disc space-y-2\">{children}</ul>\n);\n\nexport const Li = ({ children }: { children: React.ReactNode }) => (\n\t<li>{children}</li>\n);\n\n// MDX Components export\nexport const mdxComponents = {\n\tComponentPreview,\n\tComponentMetadata,\n\tCodeTabs,\n\tTabsList,\n\tTabsTrigger,\n\tTabsContent,\n\tSteps,\n\tStep,\n\tpre: Pre,\n\tcode: Code,\n\tul: Ul,\n\tli: Li,\n};\n"
  },
  {
    "path": "web/components/mobile-nav.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport Image from \"next/image\";\n\nimport { Button, Dialog, Modal, ModalOverlay } from \"react-aria-components\";\n\nimport { MenuIcon } from \"lucide-react\";\n\nimport { SidebarLink } from \"./sidebar-link\";\n\ninterface Page {\n\turl: string;\n\tdata: {\n\t\ttitle: string;\n\t};\n}\n\ninterface MobileNavProps {\n\tintroDocs: Page[];\n\tcomponentDocs: Page[];\n}\n\nexport function MobileNav({ introDocs, componentDocs }: MobileNavProps) {\n\tconst [isOpen, setIsOpen] = useState(false);\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tonPress={() => setIsOpen(true)}\n\t\t\t\tclassName=\"ml-3 rounded-md p-1 transition-colors hover:bg-surface-variant md:hidden\"\n\t\t\t\taria-label=\"Open navigation menu\"\n\t\t\t>\n\t\t\t\t<MenuIcon />\n\t\t\t</Button>\n\t\t\t<ModalOverlay\n\t\t\t\tisDismissable\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tonOpenChange={setIsOpen}\n\t\t\t\tclassName=\"fixed inset-0 z-60 bg-zinc-500/50 md:hidden\"\n\t\t\t>\n\t\t\t\t<Modal className=\"fixed top-0 left-0 z-50 h-full w-80 border-border border-r bg-surface outline-none\">\n\t\t\t\t\t<Dialog className=\"h-full w-full outline-none\">\n\t\t\t\t\t\t<div className=\"flex items-center justify-between border-border border-b p-4.5\">\n\t\t\t\t\t\t\t<div className=\"flex items-center\">\n\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\tsrc=\"/bl.svg\"\n\t\t\t\t\t\t\t\t\talt=\"BaseLayer\"\n\t\t\t\t\t\t\t\t\twidth={32}\n\t\t\t\t\t\t\t\t\theight={32}\n\t\t\t\t\t\t\t\t\tclassName=\"dark:invert\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<span className=\"ml-2 font-bold text-lg uppercase tracking-tight\">\n\t\t\t\t\t\t\t\t\tBaseLayer\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<nav\n\t\t\t\t\t\t\tclassName=\"h-[calc(100vh-73px)] overflow-y-auto\"\n\t\t\t\t\t\t\taria-label=\"Main navigation\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"space-y-6 p-6\">\n\t\t\t\t\t\t\t\t{/* Getting Started */}\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<h3 className=\"mb-3 font-semibold text-fg-muted text-xs uppercase tracking-wide\">\n\t\t\t\t\t\t\t\t\t\tGetting Started\n\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t\t<ul className=\"space-y-1\">\n\t\t\t\t\t\t\t\t\t\t{introDocs.map((page) => (\n\t\t\t\t\t\t\t\t\t\t\t<li key={page.url}>\n\t\t\t\t\t\t\t\t\t\t\t\t<SidebarLink\n\t\t\t\t\t\t\t\t\t\t\t\t\thref={page.url}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => setIsOpen(false)}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{page.data.title}\n\t\t\t\t\t\t\t\t\t\t\t\t</SidebarLink>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{/* Components */}\n\t\t\t\t\t\t\t\t{componentDocs.length > 0 && (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<h3 className=\"mb-3 font-semibold text-fg-muted text-xs uppercase tracking-wide\">\n\t\t\t\t\t\t\t\t\t\t\tComponents\n\t\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t\t\t<ul className=\"space-y-1\">\n\t\t\t\t\t\t\t\t\t\t\t{componentDocs.map((page) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li key={page.url}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SidebarLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thref={page.url}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => setIsOpen(false)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{page.data.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</SidebarLink>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t</Dialog>\n\t\t\t\t</Modal>\n\t\t\t</ModalOverlay>\n\t\t</>\n\t);\n}\n"
  },
  {
    "path": "web/components/open-in-ai-menu.tsx",
    "content": "\"use client\";\n\nimport {\n\tButton,\n\tMenuContent,\n\tMenuItem,\n\tMenuTrigger,\n} from \"@baselayer/components\";\nimport { ArrowUpRight, Share } from \"lucide-react\";\n\ninterface OpenInAiMenuProps {\n\tpageTitle: string;\n\tpageUrl: string;\n}\n\nconst AI_SERVICES = [\n\t{\n\t\tname: \"ChatGPT\",\n\t\tbaseUrl: \"https://chatgpt.com/\",\n\t\turlPattern: \"?hints=search&q=\",\n\t\tmessageTemplate: (url: string) =>\n\t\t\t`Read this BaseLayer documentation: ${url}`,\n\t},\n\t{\n\t\tname: \"Claude\",\n\t\tbaseUrl: \"https://claude.ai/new\",\n\t\turlPattern: \"?q=\",\n\t\tmessageTemplate: (url: string) =>\n\t\t\t`Read this BaseLayer documentation: ${url}`,\n\t},\n\t{\n\t\tname: \"T3 Chat\",\n\t\tbaseUrl: \"https://t3.chat/new\",\n\t\turlPattern: \"?q=\",\n\t\tmessageTemplate: (url: string) =>\n\t\t\t`Read this BaseLayer documentation: ${url}`,\n\t},\n] as const;\n\nexport function OpenInAiMenu({ pageTitle, pageUrl }: OpenInAiMenuProps) {\n\tconst baseUrl = \"https://baselayer.dev\";\n\tconst fullUrl = `${baseUrl}${pageUrl}`;\n\n\tconst openInAI = (service: (typeof AI_SERVICES)[number]) => {\n\t\tconst message = service.messageTemplate(fullUrl);\n\t\tconst finalUrl = `${service.baseUrl}${service.urlPattern}${encodeURIComponent(message)}`;\n\n\t\twindow.open(finalUrl, \"_blank\");\n\t};\n\n\treturn (\n\t\t<MenuTrigger>\n\t\t\t<Button\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tclassName=\"flex items-center gap-2 font-semibold text-fg-muted text-sm hover:text-fg data-[pressed]:bg-secondary\"\n\t\t\t>\n\t\t\t\tOpen in AI <Share size={14} />\n\t\t\t</Button>\n\t\t\t<MenuContent>\n\t\t\t\t{AI_SERVICES.map((service) => (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={service.name}\n\t\t\t\t\t\tonAction={() => openInAI(service)}\n\t\t\t\t\t\tclassName=\"flex items-center gap-2\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"font-medium\">{service.name}</span>\n\t\t\t\t\t\t<span className=\"text-muted-foreground text-sm\">\n\t\t\t\t\t\t\t<ArrowUpRight size={14} />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</MenuItem>\n\t\t\t\t))}\n\t\t\t</MenuContent>\n\t\t</MenuTrigger>\n\t);\n}\n"
  },
  {
    "path": "web/components/preview.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { CodeIcon, ComponentIcon, type LucideIcon } from \"lucide-react\";\n\ninterface TabButtonProps {\n\ttab: \"preview\" | \"source\";\n\tactiveTab: \"preview\" | \"source\";\n\tonClick: () => void;\n\ticon: LucideIcon;\n}\n\nconst TabButton = ({ tab, activeTab, onClick, icon: Icon }: TabButtonProps) => {\n\tconst isActive = activeTab === tab;\n\n\treturn (\n\t\t<button\n\t\t\taria-label={`Switch to ${tab} tab`}\n\t\t\ttype=\"button\"\n\t\t\tonClick={onClick}\n\t\t\tclassName={`relative z-10 flex items-center justify-center gap-2 rounded-full p-2 font-semibold text-sm transition-transform duration-300 ease-out ${\n\t\t\t\tisActive ? \"bg-surface text-surface-fg shadow-xs\" : \" text-fg-muted\"\n\t\t\t}`}\n\t\t>\n\t\t\t<Icon className=\"h-4 w-4\" />\n\t\t</button>\n\t);\n};\n\nexport const Preview = ({\n\tchildren,\n\tsourceCodeElement,\n}: {\n\tchildren?: React.ReactNode;\n\tsourceCodeElement?: React.ReactElement;\n}) => {\n\tconst [activeTab, setActiveTab] = useState<\"preview\" | \"source\">(\"preview\");\n\n\t// If no children and only sourceCodeElement, render just the source code\n\tif (!children && sourceCodeElement) {\n\t\treturn (\n\t\t\t<div className=\"h-96 overflow-hidden overflow-y-auto rounded-2xl border border-border/50\">\n\t\t\t\t<div className=\"overflow-hidden bg-[#eff1f5] p-6 text-sm dark:bg-[#303446] [&_code]:whitespace-pre-wrap [&_code]:break-words [&_pre]:whitespace-pre-wrap [&_pre]:break-words\">\n\t\t\t\t\t{sourceCodeElement}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div>\n\t\t\t{sourceCodeElement && (\n\t\t\t\t<div className=\"flex items-center justify-between py-3\">\n\t\t\t\t\t<div className=\"relative flex rounded-4xl bg-secondary p-1\">\n\t\t\t\t\t\t{/* Active indicator background */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={`absolute top-1 bottom-1 rounded-lg bg-secondary transition-all duration-300 ease-out ${\n\t\t\t\t\t\t\t\tactiveTab === \"preview\"\n\t\t\t\t\t\t\t\t\t? \"left-1 w-[calc(50%-4px)]\"\n\t\t\t\t\t\t\t\t\t: \"left-[calc(50%+2px)] w-[calc(50%-4px)]\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<TabButton\n\t\t\t\t\t\t\ttab=\"preview\"\n\t\t\t\t\t\t\tactiveTab={activeTab}\n\t\t\t\t\t\t\tonClick={() => setActiveTab(\"preview\")}\n\t\t\t\t\t\t\ticon={ComponentIcon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<TabButton\n\t\t\t\t\t\t\ttab=\"source\"\n\t\t\t\t\t\t\tactiveTab={activeTab}\n\t\t\t\t\t\t\tonClick={() => setActiveTab(\"source\")}\n\t\t\t\t\t\t\ticon={CodeIcon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"flex min-h-96 flex-col items-center justify-center overflow-hidden overflow-x-auto rounded-2xl border border-border/50\">\n\t\t\t\t{activeTab === \"preview\" ? (\n\t\t\t\t\t<div className=\"flex h-full items-center justify-center p-6\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"h-96 w-full overflow-hidden overflow-y-auto bg-[#eff1f5] p-6 text-sm dark:bg-[#303446] [&_code]:whitespace-pre-wrap [&_code]:break-words [&_pre]:whitespace-pre-wrap [&_pre]:break-words\">\n\t\t\t\t\t\t{sourceCodeElement || (\n\t\t\t\t\t\t\t<pre className=\"whitespace-pre-wrap break-words\">\n\t\t\t\t\t\t\t\t<code>{\"// Source code not available\"}</code>\n\t\t\t\t\t\t\t</pre>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"
  },
  {
    "path": "web/components/rac-link.tsx",
    "content": "import Link from \"next/link\";\n\nimport { ArrowUpRightIcon } from \"lucide-react\";\n\nexport const RACLink = ({ componentName }: { componentName: string }) => (\n\t<Link\n\t\tclassName=\"flex items-center gap-1 font-semibold text-fg-muted text-sm no-underline hover:text-fg\"\n\t\thref={`https://react-spectrum.adobe.com/react-aria/${componentName}.html`}\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\tRAC Docs\n\t\t<ArrowUpRightIcon className=\"size-4\" />\n\t</Link>\n);\n"
  },
  {
    "path": "web/components/search.tsx",
    "content": "\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\n\nimport { useRouter } from \"next/navigation\";\n\nimport { Command, type CommandItem } from \"@baselayer/components\";\nimport { useDocsSearch } from \"fumadocs-core/search/client\";\nimport { BookOpenIcon, FileTextIcon } from \"lucide-react\";\n\nexport function SearchDialog() {\n\tconst router = useRouter();\n\tconst [searchTerm, setSearchTerm] = useState(\"\");\n\tconst { setSearch, query } = useDocsSearch({\n\t\ttype: \"fetch\",\n\t});\n\n\t// Update search when searchTerm changes\n\tuseEffect(() => {\n\t\tsetSearch(searchTerm);\n\t}, [searchTerm, setSearch]);\n\n\tconst results = Array.isArray(query.data) ? query.data : [];\n\n\t// Convert search results to CommandItem format\n\tconst commands: CommandItem[] = useMemo(() => {\n\t\t// Show default popular pages when no search term\n\t\tif (searchTerm.length === 0) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tid: \"intro\",\n\t\t\t\t\tlabel: \"Introduction\",\n\t\t\t\t\ticon: BookOpenIcon,\n\t\t\t\t\tonSelect: () => router.push(\"/docs/intro\"),\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn results.slice(0, 10).map((result, index) => ({\n\t\t\tid: result.id || `result-${index}`,\n\t\t\tlabel: result.content || \"Untitled\",\n\t\t\ticon: FileTextIcon,\n\t\t\tonSelect: () => {\n\t\t\t\trouter.push(result.url);\n\t\t\t},\n\t\t}));\n\t}, [results, router, searchTerm]);\n\n\treturn (\n\t\t<Command\n\t\t\tcommands={commands}\n\t\t\tplaceholder=\"Search documentation...\"\n\t\t\tonSearchChange={setSearchTerm}\n\t\t\tclassName=\"w-full\"\n\t\t/>\n\t);\n}\n"
  },
  {
    "path": "web/components/sidebar-link.tsx",
    "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\n\nimport { cx } from \"@/lib/cx\";\n\ninterface SidebarLinkProps {\n\thref: string;\n\tchildren: React.ReactNode;\n\tonClick?: () => void;\n}\n\nexport function SidebarLink({ href, children, onClick }: SidebarLinkProps) {\n\tconst pathname = usePathname();\n\tconst isActive = pathname === href;\n\n\treturn (\n\t\t<Link\n\t\t\tonClick={() => {\n\t\t\t\tonClick?.();\n\t\t\t}}\n\t\t\thref={href}\n\t\t\tclassName={cx(\n\t\t\t\t\"block rounded-lg px-3 py-2 font-semibold text-sm transition-colors hover:bg-secondary\",\n\t\t\t\tisActive && \"bg-secondary text-primary hover:bg-secondary\",\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</Link>\n\t);\n}\n"
  },
  {
    "path": "web/components/sidebar.tsx",
    "content": "import { source } from \"@/lib/source\";\n\nimport { SearchDialog } from \"./search\";\nimport { SidebarLink } from \"./sidebar-link\";\n\nexport function Sidebar() {\n\tconst pages = source.getPages();\n\n\t// Separate docs into categories\n\tconst introDocs = pages\n\t\t.filter((page) => !page.url.startsWith(\"/docs/components\"))\n\t\t.sort((a, b) => {\n\t\t\tconst order = [\"/docs/intro\", \"/docs/usage\", \"/docs/styles\"];\n\t\t\tconst aIndex = order.indexOf(a.url);\n\t\t\tconst bIndex = order.indexOf(b.url);\n\n\t\t\tif (aIndex !== -1 && bIndex !== -1) {\n\t\t\t\treturn aIndex - bIndex;\n\t\t\t}\n\t\t\tif (aIndex !== -1) return -1;\n\t\t\tif (bIndex !== -1) return 1;\n\t\t\treturn a.url.localeCompare(b.url);\n\t\t});\n\tconst componentDocs = pages.filter((page) =>\n\t\tpage.url.startsWith(\"/docs/components\"),\n\t);\n\n\treturn (\n\t\t<div className=\"sticky top-[73px] flex h-[calc(100vh-73px)] w-64 flex-col border-border/50 border-r\">\n\t\t\t{/* Fixed Search Section */}\n\t\t\t<div className=\"p-6 pb-0\">\n\t\t\t\t<SearchDialog />\n\t\t\t</div>\n\n\t\t\t{/* Scrollable Navigation Section */}\n\t\t\t<div className=\"flex-1 overflow-y-auto\">\n\t\t\t\t<nav className=\"space-y-4 p-6\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3 className=\"mb-3 font-semibold text-fg-muted text-xs uppercase tracking-wide\">\n\t\t\t\t\t\t\tGetting Started\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t<div className=\"space-y-1\">\n\t\t\t\t\t\t\t{introDocs.map((page) => (\n\t\t\t\t\t\t\t\t<SidebarLink key={page.url} href={page.url}>\n\t\t\t\t\t\t\t\t\t{page.data.title}\n\t\t\t\t\t\t\t\t</SidebarLink>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Components */}\n\t\t\t\t\t{componentDocs.length > 0 && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<h3 className=\"mb-3 font-semibold text-fg-muted text-xs uppercase tracking-wide\">\n\t\t\t\t\t\t\t\tComponents\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<div className=\"space-y-1\">\n\t\t\t\t\t\t\t\t{componentDocs.map((page) => (\n\t\t\t\t\t\t\t\t\t<SidebarLink key={page.url} href={page.url}>\n\t\t\t\t\t\t\t\t\t\t{page.data.title}\n\t\t\t\t\t\t\t\t\t</SidebarLink>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"
  },
  {
    "path": "web/components/table-of-contents.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport { cx } from \"@/lib/cx\";\n\ninterface TocItem {\n\tdepth: number;\n\turl: string;\n\ttitle: ReactNode;\n}\n\ninterface TableOfContentsProps {\n\ttoc: TocItem[];\n\tactiveId: string;\n}\n\nexport function TableOfContents({ toc, activeId }: TableOfContentsProps) {\n\tconst handleTocClick = (url: string, e: React.MouseEvent) => {\n\t\te.preventDefault();\n\t\tconst id = url.replace(\"#\", \"\");\n\n\t\tconst element = document.getElementById(id);\n\t\tif (element) {\n\t\t\tconst headerOffset = 120; // Account for top nav height\n\t\t\tconst elementPosition = element.getBoundingClientRect().top;\n\t\t\tconst offsetPosition =\n\t\t\t\telementPosition + window.pageYOffset - headerOffset;\n\n\t\t\twindow.scrollTo({\n\t\t\t\ttop: offsetPosition,\n\t\t\t\tbehavior: \"auto\",\n\t\t\t});\n\t\t}\n\t};\n\n\tif (toc.length === 0) return null;\n\n\treturn (\n\t\t<aside className=\"sticky top-[73px] hidden h-[calc(100vh-73px)] w-64 overflow-y-auto lg:block\">\n\t\t\t<div className=\"p-6\">\n\t\t\t\t<h2 className=\"mb-4 font-semibold text-fg-muted text-sm uppercase tracking-wide\">\n\t\t\t\t\tOn This Page\n\t\t\t\t</h2>\n\n\t\t\t\t<nav className=\"space-y-2\">\n\t\t\t\t\t{toc.map((item) => {\n\t\t\t\t\t\tconst id = item.url.replace(\"#\", \"\");\n\t\t\t\t\t\tconst isActive = activeId === id;\n\n\t\t\t\t\t\t// Calculate indentation based on depth\n\t\t\t\t\t\t// h1=1, h2=2, h3=3, h4=4, etc.\n\t\t\t\t\t\tconst getIndentClass = (depth: number) => {\n\t\t\t\t\t\t\tswitch (depth) {\n\t\t\t\t\t\t\t\tcase 1:\n\t\t\t\t\t\t\t\t\treturn \"pl-0\"; // No indent for h1\n\t\t\t\t\t\t\t\tcase 2:\n\t\t\t\t\t\t\t\t\treturn \"pl-0\"; // No indent for h2\n\t\t\t\t\t\t\t\tcase 3:\n\t\t\t\t\t\t\t\t\treturn \"pl-3\"; // Small indent for h3\n\t\t\t\t\t\t\t\tcase 4:\n\t\t\t\t\t\t\t\t\treturn \"pl-6\"; // Larger indent for h4 (####)\n\t\t\t\t\t\t\t\tcase 5:\n\t\t\t\t\t\t\t\t\treturn \"pl-9\"; // Even larger for h5\n\t\t\t\t\t\t\t\tcase 6:\n\t\t\t\t\t\t\t\t\treturn \"pl-12\"; // Largest for h6\n\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\treturn \"pl-0\";\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tkey={item.url}\n\t\t\t\t\t\t\t\thref={item.url}\n\t\t\t\t\t\t\t\tonClick={(e) => handleTocClick(item.url, e)}\n\t\t\t\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\t\t\t\"block px-3 py-1 text-fg-muted text-sm transition-all duration-200\",\n\t\t\t\t\t\t\t\t\tgetIndentClass(item.depth),\n\t\t\t\t\t\t\t\t\tisActive && \"text-fg\",\n\t\t\t\t\t\t\t\t\t!isActive && \"text-fg-muted hover:text-fg\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</aside>\n\t);\n}\n"
  },
  {
    "path": "web/components/theme-toggle.tsx",
    "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { Button } from \"@baselayer/components\";\nimport { Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\n\nexport const ThemeToggle = () => {\n\tconst { theme, setTheme } = useTheme();\n\tconst [mounted, setMounted] = useState(false);\n\n\t// Ensure component is mounted on client before rendering theme-dependent content\n\tuseEffect(() => {\n\t\tsetMounted(true);\n\t}, []);\n\n\tconst toggleTheme = () => {\n\t\tsetTheme(theme === \"light\" ? \"dark\" : \"light\");\n\t};\n\n\tconst isDark = theme === \"dark\";\n\n\tif (!mounted) {\n\t\treturn <span className=\"size-9\" />;\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"icon\"\n\t\t\tclassName=\"text-fg-muted data-[hovered]:bg-transparent data-[pressed]:bg-transparent\"\n\t\t\tonPress={toggleTheme}\n\t\t\taria-label={isDark ? \"Switch to light mode\" : \"Switch to dark mode\"}\n\t\t>\n\t\t\t{isDark ? <Sun /> : <Moon />}\n\t\t</Button>\n\t);\n};\n\nexport default ThemeToggle;\n"
  },
  {
    "path": "web/components.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry.json\",\n  \"name\": \"@baselayer\",\n  \"homepage\": \"https://baselayer.dev\",\n  \"baseUrl\": \"https://baselayer.dev\",\n  \"registryUrl\": \"https://baselayer.dev/r\",\n  \"aliases\": {\n    \"components\": \"@/components\",\n    \"utils\": \"@/lib/utils\",\n    \"ui\": \"@/components/ui\"\n  },\n  \"registries\": {\n    \"@baselayer\": \"https://baselayer.dev/r/{name}.json\"\n  },\n  \"rsc\": {\n    \"singleComponent\": false\n  },\n  \"tailwind\": {\n    \"config\": \"tailwind.config.ts\",\n    \"css\": \"app/globals.css\",\n    \"baseColor\": \"slate\",\n    \"cssVariables\": true,\n    \"prefix\": \"\"\n  }\n}\n"
  },
  {
    "path": "web/hooks/use-active-heading.ts",
    "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\nexport function useActiveHeading() {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [activeId, setActiveId] = useState<string>(\"\");\n\n\tuseEffect(() => {\n\t\tconst observer = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tconst intersectingEntries = entries.filter(\n\t\t\t\t\t(entry) => entry.isIntersecting,\n\t\t\t\t);\n\n\t\t\t\tif (intersectingEntries.length > 0) {\n\t\t\t\t\tconst sorted = intersectingEntries.sort((a, b) => {\n\t\t\t\t\t\tconst aRect = a.boundingClientRect;\n\t\t\t\t\t\tconst bRect = b.boundingClientRect;\n\t\t\t\t\t\tconst viewportCenter = window.innerHeight / 2;\n\n\t\t\t\t\t\tconst aDistance = Math.abs(aRect.top - viewportCenter);\n\t\t\t\t\t\tconst bDistance = Math.abs(bRect.top - viewportCenter);\n\n\t\t\t\t\t\treturn aDistance - bDistance;\n\t\t\t\t\t});\n\n\t\t\t\t\tsetActiveId(sorted[0].target.id);\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\trootMargin: \"-10% 0% -60% 0%\",\n\t\t\t\tthreshold: 0,\n\t\t\t},\n\t\t);\n\n\t\tconst headings = containerRef.current?.querySelectorAll(\n\t\t\t\"h1, h2, h3, h4, h5, h6\",\n\t\t);\n\n\t\tif (headings) {\n\t\t\theadings.forEach((heading) => {\n\t\t\t\tif (heading.id) {\n\t\t\t\t\tobserver.observe(heading);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, []);\n\n\treturn { containerRef, activeId };\n}\n"
  },
  {
    "path": "web/lib/component-data.ts",
    "content": "import { readFileSync } from \"node:fs\";\nimport { join } from \"node:path\";\n\nconst examplesDir = join(process.cwd(), \"../packages/components/src/examples\");\nconst componentsSourceDir = join(process.cwd(), \"../packages/components/src/core\");\n\nexport async function getComponentSource(name: string): Promise<string> {\n\ttry {\n\t\tconst sourceFilePath = join(componentsSourceDir, name, `${name}.tsx`);\n\t\treturn readFileSync(sourceFilePath, \"utf8\");\n\t} catch (error) {\n\t\tconsole.error(`Error loading component ${name}:`, error);\n\t\treturn `// Error loading component: ${\n\t\t\terror instanceof Error ? error.message : \"Unknown error\"\n\t\t}`;\n\t}\n}\n\nexport async function getExampleSource(name: string): Promise<string> {\n\ttry {\n\t\t// Read the example file directly from the filesystem\n\t\tconst exampleFilePath = join(examplesDir, `${name}.tsx`);\n\t\tlet content = readFileSync(exampleFilePath, \"utf8\");\n\n\t\t// Transform the import path for display\n\t\tcontent = content.replace(\n\t\t\t/from [\"']\\.\\.\\/core\\/([^/]+)\\/\\1[\"']/g,\n\t\t\t'from \"@/components/ui/$1\"',\n\t\t);\n\n\t\treturn content;\n\t} catch (error) {\n\t\tconsole.error(`Error loading example ${name}:`, error);\n\t\treturn `// Error loading example: ${\n\t\t\terror instanceof Error ? error.message : \"Unknown error\"\n\t\t}`;\n\t}\n}\n"
  },
  {
    "path": "web/lib/cx.ts",
    "content": "import { twJoin, twMerge } from \"tailwind-merge\";\n\n/**\n * re export tailwind-merge\n */\nexport const cx = twMerge;\n\n/**\n * re export tailwind-join\n */\nexport const cn = twJoin;"
  },
  {
    "path": "web/lib/examples-map.ts",
    "content": "// Filesystem-based examples map using dynamic discovery\n\nimport type { ComponentType } from \"react\";\n\nimport { readFileSync } from \"node:fs\";\nimport { join } from \"node:path\";\n\nconst examplesDir = join(process.cwd(), \"../packages/components/src/examples\");\n\nexport async function getExampleComponent(exampleId: string) {\n\ttry {\n\t\t// Read the example file to extract the export name\n\t\tconst exampleFilePath = join(examplesDir, `${exampleId}.tsx`);\n\t\tconst fileContent = readFileSync(exampleFilePath, \"utf8\");\n\n\t\t// Extract the export name using regex\n\t\t// Matches: export const ComponentName = ...\n\t\tconst exportMatch = fileContent.match(/export\\s+const\\s+(\\w+)\\s*=/);\n\n\t\tif (!exportMatch) {\n\t\t\tconsole.error(`Could not find export in ${exampleId}.tsx`);\n\t\t\treturn null;\n\t\t}\n\n\t\tconst componentName = exportMatch[1];\n\n\t\t// Dynamically import the component from the built package\n\t\tconst module = await import(\"@baselayer/components\");\n\t\tconst Component = (module as unknown as Record<string, ComponentType>)[\n\t\t\tcomponentName\n\t\t];\n\n\t\tif (!Component) {\n\t\t\tconsole.error(\n\t\t\t\t`Component ${componentName} not found in @baselayer/components`,\n\t\t\t);\n\t\t\treturn null;\n\t\t}\n\n\t\treturn Component as React.ComponentType;\n\t} catch (error) {\n\t\tconsole.error(`Failed to load example component ${exampleId}:`, error);\n\t\treturn null;\n\t}\n}\n"
  },
  {
    "path": "web/lib/metadata.ts",
    "content": "export const metadataImage = {\n  src: '/bl.svg',\n  width: 1200,\n  height: 630,\n  alt: 'BaseLayer Documentation'\n};\n\nexport const siteConfig = {\n  name: 'BaseLayer',\n  description: 'Modern React components for building beautiful user interfaces',\n  url: 'https://baselayer.dev',\n}; "
  },
  {
    "path": "web/lib/navigation.ts",
    "content": "import { source } from \"./source\";\n\nexport interface NavigationPage {\n\ttitle: string;\n\turl: string;\n}\n\nexport interface PageNavigation {\n\tprevious?: NavigationPage;\n\tnext?: NavigationPage;\n}\n\nexport function getPageNavigation(currentUrl: string): PageNavigation {\n\tconst pages = source.getPages();\n\n\t// Create ordered list following sidebar structure\n\tconst introDocs = pages\n\t\t.filter((page) => !page.url.startsWith(\"/docs/components\"))\n\t\t.sort((a, b) => {\n\t\t\t// Define specific order for intro docs\n\t\t\tconst order = [\"/docs/intro\", \"/docs/usage\", \"/docs/styles\"];\n\t\t\tconst aIndex = order.indexOf(a.url);\n\t\t\tconst bIndex = order.indexOf(b.url);\n\n\t\t\tif (aIndex !== -1 && bIndex !== -1) {\n\t\t\t\treturn aIndex - bIndex;\n\t\t\t}\n\t\t\tif (aIndex !== -1) return -1;\n\t\t\tif (bIndex !== -1) return 1;\n\t\t\treturn a.url.localeCompare(b.url);\n\t\t});\n\n\tconst componentDocs = pages\n\t\t.filter((page) => page.url.startsWith(\"/docs/components\"))\n\t\t.sort((a, b) => a.data.title.localeCompare(b.data.title));\n\n\t// Combine in order: intro docs first, then components\n\tconst orderedPages = [...introDocs, ...componentDocs];\n\n\t// Find current page index\n\tconst currentIndex = orderedPages.findIndex(\n\t\t(page) => page.url === currentUrl,\n\t);\n\n\tif (currentIndex === -1) {\n\t\treturn {};\n\t}\n\n\tconst previous =\n\t\tcurrentIndex > 0\n\t\t\t? {\n\t\t\t\t\ttitle: orderedPages[currentIndex - 1].data.title,\n\t\t\t\t\turl: orderedPages[currentIndex - 1].url,\n\t\t\t\t}\n\t\t\t: undefined;\n\n\tconst next =\n\t\tcurrentIndex < orderedPages.length - 1\n\t\t\t? {\n\t\t\t\t\ttitle: orderedPages[currentIndex + 1].data.title,\n\t\t\t\t\turl: orderedPages[currentIndex + 1].url,\n\t\t\t\t}\n\t\t\t: undefined;\n\n\treturn { previous, next };\n}\n"
  },
  {
    "path": "web/lib/source.ts",
    "content": "import { loader } from 'fumadocs-core/source';\n\nimport { docs } from '@/.source';\n\nexport const source = loader({\n  baseUrl: '/docs',\n  source: docs.toFumadocsSource(),\n});"
  },
  {
    "path": "web/next.config.ts",
    "content": "import { createMDX } from \"fumadocs-mdx/next\";\nimport type { NextConfig } from \"next\";\n\nimport path from \"node:path\";\n\nconst withMDX = createMDX();\n\n/** @type {import('next').NextConfig} */\nconst nextConfig: NextConfig = {\n\treactStrictMode: true,\n\tpageExtensions: [\"js\", \"jsx\", \"md\", \"mdx\", \"ts\", \"tsx\"],\n\twebpack: (config) => {\n\t\tconfig.resolve.alias = {\n\t\t\t...config.resolve.alias,\n\t\t\t\"@/components/ui\": path.resolve(\n\t\t\t\t__dirname,\n\t\t\t\t\"../packages/components/src/core\",\n\t\t\t),\n\t\t};\n\t\treturn config;\n\t},\n};\n\nexport default withMDX(nextConfig);\n"
  },
  {
    "path": "web/package.json",
    "content": "{\n  \"name\": \"@baselayer/web\",\n  \"version\": \"2.1.1\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev --turbopack\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"type-check\": \"tsc --noEmit\",\n    \"clean\": \"rm -rf .next dist\",\n    \"postinstall\": \"fumadocs-mdx\"\n  },\n  \"dependencies\": {\n    \"@baselayer/components\": \"workspace:*\",\n    \"@baselayer/registry\": \"workspace:*\",\n    \"@types/mdx\": \"^2.0.13\",\n    \"@vercel/analytics\": \"^1.5.0\",\n    \"fumadocs-core\": \"^15.5.5\",\n    \"fumadocs-mdx\": \"^11.6.9\",\n    \"geist\": \"^1.5.1\",\n    \"lucide-react\": \"^0.525.0\",\n    \"next\": \"15.5.9\",\n    \"next-themes\": \"^0.4.6\",\n    \"react\": \"^19.2.3\",\n    \"react-aria-components\": \"catalog:\",\n    \"react-dom\": \"^19.2.3\",\n    \"react-element-to-jsx-string\": \"^17.0.1\",\n    \"shiki\": \"3.7.0\",\n    \"tailwind-variants\": \"catalog:\",\n    \"zod\": \"^3.25.67\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/postcss\": \"^4.1.10\",\n    \"@tailwindcss/typography\": \"^0.5.16\",\n    \"@types/node\": \"catalog:\",\n    \"@types/react\": \"^19.2.7\",\n    \"@types/react-dom\": \"^19.2.3\",\n    \"tailwind-merge\": \"^3.3.1\",\n    \"tailwindcss\": \"^4.1.10\",\n    \"tw-animate-css\": \"^1.3.6\",\n    \"typescript\": \"catalog:\"\n  }\n}\n"
  },
  {
    "path": "web/postcss.config.mjs",
    "content": "const config = {\n  plugins: [\"@tailwindcss/postcss\"],\n};\n\nexport default config;\n"
  },
  {
    "path": "web/public/r/accordion.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"accordion\",\n  \"type\": \"registry:ui\",\n  \"title\": \"accordion\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"An accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a title and content area.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/accordion/accordion.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/accordion.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"disclosure\",\n      \"collapsible\",\n      \"expandable\",\n      \"content\"\n    ]\n  },\n  \"categories\": [\n    \"layout\"\n  ]\n}"
  },
  {
    "path": "web/public/r/badge.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"badge\",\n  \"type\": \"registry:ui\",\n  \"title\": \"badge\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A badge is a small label that can be used to display information or status.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/badge/badge.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/badge.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"status\"\n    ]\n  },\n  \"categories\": [\n    \"display\"\n  ]\n}"
  },
  {
    "path": "web/public/r/breadcrumbs.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"breadcrumbs\",\n  \"type\": \"registry:ui\",\n  \"title\": \"breadcrumbs\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"Breadcrumbs display a heirarchy of links to the current page or resource in an application.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/breadcrumbs/breadcrumbs.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/breadcrumbs.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"navigation\"\n    ]\n  },\n  \"categories\": [\n    \"navigation\"\n  ]\n}"
  },
  {
    "path": "web/public/r/button.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"button\",\n  \"type\": \"registry:ui\",\n  \"title\": \"button\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A button allows a user to perform an action, with mouse, touch, and keyboard interactions.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/button/button.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/button.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/calendar.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"calendar\",\n  \"type\": \"registry:ui\",\n  \"title\": \"calendar\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A calendar displays one or more date grids and allows users to select either a single date or a contiguous range of dates.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/calendar/calendar.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/calendar.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"date-time\"\n    ]\n  },\n  \"categories\": [\n    \"data-entry\"\n  ]\n}"
  },
  {
    "path": "web/public/r/card.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"card\",\n  \"type\": \"registry:ui\",\n  \"title\": \"card\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"Displays a card with header, content, and footer.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/card/card.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/card.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"layout\",\n      \"container\",\n      \"display\"\n    ]\n  },\n  \"categories\": [\n    \"layout\"\n  ]\n}"
  },
  {
    "path": "web/public/r/checkbox.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"checkbox\",\n  \"type\": \"registry:ui\",\n  \"title\": \"checkbox\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/checkbox/checkbox.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/checkbox.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/combobox.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"combobox\",\n  \"type\": \"registry:ui\",\n  \"title\": \"combobox\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/combobox/combobox.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/combobox.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"picker\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/command.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"command\",\n  \"type\": \"registry:ui\",\n  \"title\": \"command\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A command palette that allows users to quickly search and execute commands using keyboard shortcuts.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/command/command.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/command.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"beta\",\n    \"tags\": [\n      \"search\",\n      \"navigation\",\n      \"keyboard\",\n      \"palette\"\n    ]\n  },\n  \"categories\": [\n    \"navigation\"\n  ]\n}"
  },
  {
    "path": "web/public/r/date-field.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"date-field\",\n  \"type\": \"registry:ui\",\n  \"title\": \"date-field\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/date-field/date-field.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/date-field.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"date\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/date-picker.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"date-picker\",\n  \"type\": \"registry:ui\",\n  \"title\": \"date-picker\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A date picker combines one or more DateFields with a calendar popover, allowing users to enter or select a single date/time or a range.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"registryDependencies\": [\n    \"calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/date-picker/date-picker.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/date-picker.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"date-time\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/input.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"input\",\n  \"type\": \"registry:ui\",\n  \"title\": \"input\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"Allows a user to enter a plain text value with a keyboard.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/input/input.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/input.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/menu.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"menu\",\n  \"type\": \"registry:ui\",\n  \"title\": \"menu\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A menu displays a list of actions or options that a user can choose.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/menu/menu.tsx\", \n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/menu.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"interactive\",\n      \"navigation\"\n    ]\n  },\n  \"categories\": [\n    \"pickers\"\n  ]\n}"
  },
  {
    "path": "web/public/r/meter.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"meter\",\n  \"type\": \"registry:ui\",\n  \"title\": \"meter\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A meter represents a quantity within a known range, or a fractional value.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/meter/meter.tsx\", \n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/meter.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"data-display\",\n      \"progress\"\n    ]\n  },\n  \"categories\": [\n    \"data-display\"\n  ]\n}"
  },
  {
    "path": "web/public/r/modal.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"modal\",\n  \"type\": \"registry:ui\",\n  \"title\": \"modal\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A modal is an overlay element which blocks interaction with elements outside it.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/modal/modal.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/modal.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"overlay\"\n    ]\n  },\n  \"categories\": [\n    \"overlays\"\n  ]\n}"
  },
  {
    "path": "web/public/r/popover.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"popover\",\n  \"type\": \"registry:ui\",\n  \"title\": \"popover\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A popover is an overlay element positioned relative to a trigger.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/popover/popover.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/popover.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"overlay\",\n      \"interactive\"\n    ]\n  },\n  \"categories\": [\n    \"overlays\"\n  ]\n}"
  },
  {
    "path": "web/public/r/radio-group.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"radio-group\",\n  \"type\": \"registry:ui\",\n  \"title\": \"radio-group\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A radio group allows a user to select a single option from a list of mutually exclusive options.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/radio-group/radio-group.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/radio-group.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"selection\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/registry.json",
    "content": "{\n  \"name\": \"@baselayer\",\n  \"$schema\": \"https://ui.shadcn.com/schema/registry.json\",\n  \"homepage\": \"https://baselayer.dev\",\n  \"items\": [\n    {\n      \"name\": \"accordion\",\n      \"type\": \"registry:ui\",\n      \"title\": \"accordion\",\n      \"description\": \"An accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a title and content area.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"layout\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/accordion/accordion.tsx\",\n          \"target\": \"components/ui/accordion.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"disclosure\",\n          \"collapsible\",\n          \"expandable\",\n          \"content\"\n        ]\n      }\n    },\n    {\n      \"name\": \"badge\",\n      \"type\": \"registry:ui\",\n      \"title\": \"badge\",\n      \"description\": \"A badge is a small label that can be used to display information or status.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"display\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/badge/badge.tsx\",\n          \"target\": \"components/ui/badge.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"status\"\n        ]\n      }\n    },\n    {\n      \"name\": \"breadcrumbs\",\n      \"type\": \"registry:ui\",\n      \"title\": \"breadcrumbs\",\n      \"description\": \"Breadcrumbs display a heirarchy of links to the current page or resource in an application.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"navigation\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/breadcrumbs/breadcrumbs.tsx\",\n          \"target\": \"components/ui/breadcrumbs.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"navigation\"\n        ]\n      }\n    },\n    {\n      \"name\": \"button\",\n      \"type\": \"registry:ui\",\n      \"title\": \"button\",\n      \"description\": \"A button allows a user to perform an action, with mouse, touch, and keyboard interactions.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/button/button.tsx\",\n          \"target\": \"components/ui/button.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\"\n        ]\n      }\n    },\n    {\n      \"name\": \"calendar\",\n      \"type\": \"registry:ui\",\n      \"title\": \"calendar\",\n      \"description\": \"A calendar displays one or more date grids and allows users to select either a single date or a contiguous range of dates.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"data-entry\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/calendar/calendar.tsx\",\n          \"target\": \"components/ui/calendar.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"date-time\"\n        ]\n      }\n    },\n    {\n      \"name\": \"card\",\n      \"type\": \"registry:ui\",\n      \"title\": \"card\",\n      \"description\": \"Displays a card with header, content, and footer.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"layout\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/card/card.tsx\",\n          \"target\": \"components/ui/card.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"layout\",\n          \"container\",\n          \"display\"\n        ]\n      }\n    },\n    {\n      \"name\": \"checkbox\",\n      \"type\": \"registry:ui\",\n      \"title\": \"checkbox\",\n      \"description\": \"A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/checkbox/checkbox.tsx\",\n          \"target\": \"components/ui/checkbox.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\"\n        ]\n      }\n    },\n    {\n      \"name\": \"combobox\",\n      \"type\": \"registry:ui\",\n      \"title\": \"combobox\",\n      \"description\": \"A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/combobox/combobox.tsx\",\n          \"target\": \"components/ui/combobox.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"picker\"\n        ]\n      }\n    },\n    {\n      \"name\": \"command\",\n      \"type\": \"registry:ui\",\n      \"title\": \"command\",\n      \"description\": \"A command palette that allows users to quickly search and execute commands using keyboard shortcuts.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"navigation\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/command/command.tsx\",\n          \"target\": \"components/ui/command.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"beta\",\n        \"tags\": [\n          \"search\",\n          \"navigation\",\n          \"keyboard\",\n          \"palette\"\n        ]\n      }\n    },\n    {\n      \"name\": \"date-field\",\n      \"type\": \"registry:ui\",\n      \"title\": \"date-field\",\n      \"description\": \"A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/date-field/date-field.tsx\",\n          \"target\": \"components/ui/date-field.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"date\"\n        ]\n      }\n    },\n    {\n      \"name\": \"date-picker\",\n      \"type\": \"registry:ui\",\n      \"title\": \"date-picker\",\n      \"description\": \"A date picker combines one or more DateFields with a calendar popover, allowing users to enter or select a single date/time or a range.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/date-picker/date-picker.tsx\",\n          \"target\": \"components/ui/date-picker.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"registryDependencies\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"date-time\"\n        ]\n      }\n    },\n    {\n      \"name\": \"input\",\n      \"type\": \"registry:ui\",\n      \"title\": \"input\",\n      \"description\": \"Allows a user to enter a plain text value with a keyboard.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/input/input.tsx\",\n          \"target\": \"components/ui/input.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\"\n        ]\n      }\n    },\n    {\n      \"name\": \"menu\",\n      \"type\": \"registry:ui\",\n      \"title\": \"menu\",\n      \"description\": \"A menu displays a list of actions or options that a user can choose.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"pickers\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/menu/menu.tsx\",\n          \"target\": \"components/ui/menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"interactive\",\n          \"navigation\"\n        ]\n      }\n    },\n    {\n      \"name\": \"meter\",\n      \"type\": \"registry:ui\",\n      \"title\": \"meter\",\n      \"description\": \"A meter represents a quantity within a known range, or a fractional value.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"data-display\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/meter/meter.tsx\",\n          \"target\": \"components/ui/meter.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"data-display\",\n          \"progress\"\n        ]\n      }\n    },\n    {\n      \"name\": \"modal\",\n      \"type\": \"registry:ui\",\n      \"title\": \"modal\",\n      \"description\": \"A modal is an overlay element which blocks interaction with elements outside it.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"overlays\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/modal/modal.tsx\",\n          \"target\": \"components/ui/modal.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"overlay\"\n        ]\n      }\n    },\n    {\n      \"name\": \"popover\",\n      \"type\": \"registry:ui\",\n      \"title\": \"popover\",\n      \"description\": \"A popover is an overlay element positioned relative to a trigger.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"overlays\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/popover/popover.tsx\",\n          \"target\": \"components/ui/popover.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"overlay\",\n          \"interactive\"\n        ]\n      }\n    },\n    {\n      \"name\": \"radio-group\",\n      \"type\": \"registry:ui\",\n      \"title\": \"radio-group\",\n      \"description\": \"A radio group allows a user to select a single option from a list of mutually exclusive options.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/radio-group/radio-group.tsx\",\n          \"target\": \"components/ui/radio-group.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"selection\"\n        ]\n      }\n    },\n    {\n      \"name\": \"select\",\n      \"type\": \"registry:ui\",\n      \"title\": \"select\",\n      \"description\": \"A select displays a collapsible list of options and allows a user to select one of them.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/select/select.tsx\",\n          \"target\": \"components/ui/select.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"picker\"\n        ]\n      }\n    },\n    {\n      \"name\": \"slider\",\n      \"type\": \"registry:ui\",\n      \"title\": \"slider\",\n      \"description\": \"A slider allows a user to select one or more values within a range.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/slider/slider.tsx\",\n          \"target\": \"components/ui/slider.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"range\"\n        ]\n      }\n    },\n    {\n      \"name\": \"switch\",\n      \"type\": \"registry:ui\",\n      \"title\": \"switch\",\n      \"description\": \"A switch allows a user to turn a setting on or off.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/switch/switch.tsx\",\n          \"target\": \"components/ui/switch.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"toggle\"\n        ]\n      }\n    },\n    {\n      \"name\": \"table\",\n      \"type\": \"registry:ui\",\n      \"title\": \"table\",\n      \"description\": \"A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"data-display\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/table/table.tsx\",\n          \"target\": \"components/ui/table.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"registryDependencies\": [\n        \"button\",\n        \"checkbox\"\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"data-display\",\n          \"interactive\"\n        ]\n      }\n    },\n    {\n      \"name\": \"tabs\",\n      \"type\": \"registry:ui\",\n      \"title\": \"tabs\",\n      \"description\": \"Tabs organize content into multiple sections and allow users to navigate between them.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"navigation\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/tabs/tabs.tsx\",\n          \"target\": \"components/ui/tabs.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"navigation\",\n          \"interactive\",\n          \"layout\"\n        ]\n      }\n    },\n    {\n      \"name\": \"tag-group\",\n      \"type\": \"registry:ui\",\n      \"title\": \"tag-group\",\n      \"description\": \"A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/tag-group/tag-group.tsx\",\n          \"target\": \"components/ui/tag-group.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"selection\",\n          \"filtering\"\n        ]\n      }\n    },\n    {\n      \"name\": \"time-field\",\n      \"type\": \"registry:ui\",\n      \"title\": \"time-field\",\n      \"description\": \"A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/time-field/time-field.tsx\",\n          \"target\": \"components/ui/time-field.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"time\"\n        ]\n      }\n    },\n    {\n      \"name\": \"toggle\",\n      \"type\": \"registry:ui\",\n      \"title\": \"toggle\",\n      \"description\": \"A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"forms\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/toggle/toggle.tsx\",\n          \"target\": \"components/ui/toggle.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"form\",\n          \"interactive\",\n          \"toggle\"\n        ]\n      }\n    },\n    {\n      \"name\": \"tooltip\",\n      \"type\": \"registry:ui\",\n      \"title\": \"tooltip\",\n      \"description\": \"A tooltip displays a description of an element on hover or focus.\",\n      \"author\": \"BaseLayer\",\n      \"categories\": [\n        \"overlays\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"src/core/tooltip/tooltip.tsx\",\n          \"target\": \"components/ui/tooltip.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"tailwind-variants\",\n        \"lucide-react\",\n        \"tw-animate-css\"\n      ],\n      \"tailwind\": {\n        \"config\": {\n          \"content\": [\n            \"./components/**/*.{ts,tsx}\"\n          ],\n          \"theme\": {\n            \"extend\": {}\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--color-surface\": \"var(--surface)\",\n          \"--color-surface-2\": \"var(--surface-2)\",\n          \"--color-fg\": \"var(--fg)\",\n          \"--color-fg-muted\": \"var(--fg-muted)\",\n          \"--color-fg-disabled\": \"var(--fg-disabled)\",\n          \"--color-fg-inverse\": \"var(--fg-inverse)\",\n          \"--color-border\": \"var(--border)\",\n          \"--color-focus\": \"var(--focus)\",\n          \"--color-primary\": \"var(--primary)\",\n          \"--color-primary-fg\": \"var(--primary-fg)\",\n          \"--color-secondary\": \"var(--secondary)\",\n          \"--color-secondary-fg\": \"var(--secondary-fg)\",\n          \"--color-danger\": \"var(--danger)\",\n          \"--color-danger-fg\": \"var(--danger-fg)\"\n        },\n        \"light\": {\n          \"--surface\": \"oklch(98.5% 0 0)\",\n          \"--surface-2\": \"oklch(97% 0 0)\",\n          \"--fg\": \"oklch(14.5% 0 0)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n          \"--border\": \"oklch(87% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(14.5% 0 0)\",\n          \"--primary-fg\": \"oklch(98.5% 0 0)\",\n          \"--secondary\": \"oklch(92.2% 0 0)\",\n          \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"#ffffff\"\n        },\n        \"dark\": {\n          \"--surface\": \"oklch(14.5% 0 0)\",\n          \"--surface-2\": \"oklch(20.5% 0 0)\",\n          \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n          \"--fg-muted\": \"oklch(55.6% 0 0)\",\n          \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n          \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n          \"--border\": \"oklch(37.1% 0 0)\",\n          \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n          \"--primary\": \"oklch(98.5% 0 0)\",\n          \"--primary-fg\": \"oklch(14.5% 0 0)\",\n          \"--secondary\": \"oklch(26.9% 0 0)\",\n          \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n          \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n          \"--danger-fg\": \"oklch(98.5% 0 0)\"\n        }\n      },\n      \"css\": {\n        \"@import \\\"tw-animate-css\\\"\": {}\n      },\n      \"meta\": {\n        \"status\": \"stable\",\n        \"tags\": [\n          \"overlay\",\n          \"interactive\",\n          \"help\"\n        ]\n      }\n    }\n  ]\n}"
  },
  {
    "path": "web/public/r/select.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"select\",\n  \"type\": \"registry:ui\",\n  \"title\": \"select\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A select displays a collapsible list of options and allows a user to select one of them.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/select/select.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/select.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"picker\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/slider.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"slider\",\n  \"type\": \"registry:ui\",\n  \"title\": \"slider\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A slider allows a user to select one or more values within a range.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/slider/slider.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/slider.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"range\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/switch.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"switch\",\n  \"type\": \"registry:ui\",\n  \"title\": \"switch\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A switch allows a user to turn a setting on or off.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/switch/switch.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/switch.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"toggle\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/table.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"table\",\n  \"type\": \"registry:ui\",\n  \"title\": \"table\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"registryDependencies\": [\n    \"button\",\n    \"checkbox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/table/table.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/table.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"data-display\",\n      \"interactive\"\n    ]\n  },\n  \"categories\": [\n    \"data-display\"\n  ]\n}"
  },
  {
    "path": "web/public/r/tabs.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tabs\",\n  \"type\": \"registry:ui\",\n  \"title\": \"tabs\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"Tabs organize content into multiple sections and allow users to navigate between them.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/tabs/tabs.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/tabs.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"navigation\",\n      \"interactive\",\n      \"layout\"\n    ]\n  },\n  \"categories\": [\n    \"navigation\"\n  ]\n}"
  },
  {
    "path": "web/public/r/tag-group.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tag-group\",\n  \"type\": \"registry:ui\",\n  \"title\": \"tag-group\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/tag-group/tag-group.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/tag-group.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"selection\",\n      \"filtering\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/time-field.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"time-field\",\n  \"type\": \"registry:ui\",\n  \"title\": \"time-field\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/time-field/time-field.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/time-field.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"time\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/toggle.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle\",\n  \"type\": \"registry:ui\",\n  \"title\": \"toggle\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/toggle/toggle.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/toggle.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"form\",\n      \"interactive\",\n      \"toggle\"\n    ]\n  },\n  \"categories\": [\n    \"forms\"\n  ]\n}"
  },
  {
    "path": "web/public/r/tooltip.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tooltip\",\n  \"type\": \"registry:ui\",\n  \"title\": \"tooltip\",\n  \"author\": \"BaseLayer\",\n  \"description\": \"A tooltip displays a description of an element on hover or focus.\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"tailwind-variants\",\n    \"lucide-react\",\n    \"tw-animate-css\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"src/core/tooltip/tooltip.tsx\",\n      \"type\": \"registry:component\",\n      \"target\": \"components/ui/tooltip.tsx\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"content\": [\n        \"./components/**/*.{ts,tsx}\"\n      ],\n      \"theme\": {\n        \"extend\": {}\n      }\n    }\n  },\n  \"cssVars\": {\n    \"theme\": {\n      \"--color-surface\": \"var(--surface)\",\n      \"--color-surface-2\": \"var(--surface-2)\",\n      \"--color-fg\": \"var(--fg)\",\n      \"--color-fg-muted\": \"var(--fg-muted)\",\n      \"--color-fg-disabled\": \"var(--fg-disabled)\",\n      \"--color-fg-inverse\": \"var(--fg-inverse)\",\n      \"--color-border\": \"var(--border)\",\n      \"--color-focus\": \"var(--focus)\",\n      \"--color-primary\": \"var(--primary)\",\n      \"--color-primary-fg\": \"var(--primary-fg)\",\n      \"--color-secondary\": \"var(--secondary)\",\n      \"--color-secondary-fg\": \"var(--secondary-fg)\",\n      \"--color-danger\": \"var(--danger)\",\n      \"--color-danger-fg\": \"var(--danger-fg)\"\n    },\n    \"light\": {\n      \"--surface\": \"oklch(98.5% 0 0)\",\n      \"--surface-2\": \"oklch(97% 0 0)\",\n      \"--fg\": \"oklch(14.5% 0 0)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(70.8% 0 0)\",\n      \"--border\": \"oklch(87% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(14.5% 0 0)\",\n      \"--primary-fg\": \"oklch(98.5% 0 0)\",\n      \"--secondary\": \"oklch(92.2% 0 0)\",\n      \"--secondary-fg\": \"oklch(14.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"#ffffff\"\n    },\n    \"dark\": {\n      \"--surface\": \"oklch(14.5% 0 0)\",\n      \"--surface-2\": \"oklch(20.5% 0 0)\",\n      \"--fg\": \"oklch(98.5% 0.001 106.423)\",\n      \"--fg-muted\": \"oklch(55.6% 0 0)\",\n      \"--fg-inverse\": \"oklch(98.5% 0 0)\",\n      \"--fg-disabled\": \"oklch(37.1% 0 0)\",\n      \"--border\": \"oklch(37.1% 0 0)\",\n      \"--focus\": \"oklch(68.5% 0.169 237.323)\",\n      \"--primary\": \"oklch(98.5% 0 0)\",\n      \"--primary-fg\": \"oklch(14.5% 0 0)\",\n      \"--secondary\": \"oklch(26.9% 0 0)\",\n      \"--secondary-fg\": \"oklch(98.5% 0 0)\",\n      \"--danger\": \"oklch(63.7% 0.237 25.331)\",\n      \"--danger-fg\": \"oklch(98.5% 0 0)\"\n    }\n  },\n  \"css\": {\n    \"@import \\\"tw-animate-css\\\"\": {}\n  },\n  \"meta\": {\n    \"status\": \"stable\",\n    \"tags\": [\n      \"overlay\",\n      \"interactive\",\n      \"help\"\n    ]\n  },\n  \"categories\": [\n    \"overlays\"\n  ]\n}"
  },
  {
    "path": "web/source.config.ts",
    "content": "import { defineDocs, frontmatterSchema } from \"fumadocs-mdx/config\";\nimport { z } from \"zod\";\n\nexport const docs = defineDocs({\n\tdir: \"app/docs/content\",\n\tdocs: {\n\t\tschema: frontmatterSchema.extend({\n\t\t\tisRAC: z.boolean().optional().default(false),\n\t\t}),\n\t},\n});\n"
  },
  {
    "path": "web/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2017\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\"./*\"],\n      \"@/components/ui/*\": [\"../packages/components/src/core/*\"]\n    }\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n  \"exclude\": [\"node_modules\"]\n}\n"
  }
]